[SOLVED] Error in start react with vite (parse5 error code eof-in-element-that-can-contain-only-text) – Stack Overflow

Issue

This Content is from Stack Overflow. Question asked by Guilherme Ramos

When I start the application I get the following error:

[vite] Internal server error: Unable to parse HTML; parse5 error code
eof-in-element-that-can-contain-only-text at
{“file”:”/index.html”,”line”:56,”column”:1}

at {“file”:”/index.html”,”line”:56,”column”:1}
at handleParseError (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-a713b95d.js:43358:11)
at Parser.onParseError (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-a713b95d.js:43285:13)
at Parser._err (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:4942:14)
at eofInText (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:6977:7)
at Parser.onEof (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:5731:17)
at Tokenizer._emitEOFToken (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1403:22)
at Tokenizer._stateRawtext (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1903:22)
at Tokenizer._callState (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1522:22)
at Tokenizer._runParsingLoop (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1179:22)
at Tokenizer.write (file:///C:/Users/Marco/Documents/Projetos/admooh-presentation/src/node_modules/vite/dist/node/chunks/dep-19c40c50.js:1204:14)

package.json

{
  "name": "admooh-presentation",
  "version": "4.1.0",
  "description": "Admooh presentation project",
  "repository": {
    "type": "git",
    "url": "git://github.com/react-boilerplate/react-boilerplate-typescript.git"
  },
  "license": "MIT",
  "author": "Max Stoiber",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 8080",
    "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet app",
    "lint:css": "stylelint app/**/*.{js,ts,tsx}",
    "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern",
    "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern --quiet --fix",
    "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx --no-error-on-unmatched-pattern --quiet",
    "prettify": "prettier --write app ",
    "pretest": "npm run test:clean && npm run lint",
    "test": "vitest run",
    "test:ci": "vitest run",
    "test:clean": "rimraf ./coverage",
    "test:coverage": "vitest run --coverage",
    "test:watch": "vitest watch",
    "typecheck": "tsc --noEmit",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "prepare": "cd .. && husky install"
  },
  "lint-staged": {
    "*.{md,json}": [
      "prettier --write",
      "git add --force"
    ],
    "*.{ts,tsx,js,jsx}": [
      "npm run lint:eslint:fix",
      "git add --force"
    ]
  },
  "dependencies": {
    "@devexpress/dx-core": "3.0.5",
    "@devexpress/dx-react-chart": "3.0.5",
    "@devexpress/dx-react-chart-material-ui": "3.0.5",
    "@devexpress/dx-react-core": "3.0.5",
    "@hookform/resolvers": "2.9.8",
    "@mui/icons-material": "^5.10.3",
    "@mui/lab": "5.0.0-alpha.99",
    "@mui/material": "^5.10.5",
    "@mui/styled-engine-sc": "^5.10.3",
    "@mui/x-date-pickers": "^5.0.1",
    "@react-google-maps/api": "2.12.2",
    "@rjsf/bootstrap-4": "^4.2.3",
    "@rjsf/core": "^4.2.3",
    "@textea/json-viewer": "^1.24.4",
    "@uppy/core": "3.0.1",
    "@uppy/dashboard": "^3.0.1",
    "@uppy/drag-drop": "^3.0.0",
    "@uppy/file-input": "^3.0.0",
    "@uppy/locales": "3.0.0",
    "@uppy/progress-bar": "^3.0.0",
    "@uppy/react": "3.0.1",
    "@uppy/tus": "3.0.1",
    "@uppy/xhr-upload": "^3.0.1",
    "bootstrap": "^4.6.2",
    "copy-to-clipboard": "^3.3.2",
    "crypto-js": "^4.1.1",
    "currency.js": "2.0.4",
    "date-fns": "2.29.3",
    "immer": "9.0.15",
    "intl": "1.2.5",
    "jsdom": "^20.0.0",
    "lodash": "4.17.21",
    "mixpanel-browser": "^2.45.0",
    "mui-tel-input": "^2.0.1",
    "node-fetch": "^3.2.10",
    "notistack": "3.0.0-alpha.7",
    "ramda": "0.28.0",
    "react": "18.2.0",
    "react-beautiful-dnd": "13.1.1",
    "react-bootstrap": "^1.6.6",
    "react-dom": "18.2.0",
    "react-error-boundary": "3.1.4",
    "react-hook-form": "7.35.0",
    "react-input-mask": "^2.0.4",
    "react-intl": "6.1.1",
    "react-jsonschema-form": "1.8.1",
    "react-query": "3.39.2",
    "react-responsive": "9.0.0-beta.10",
    "react-responsive-carousel": "3.2.23",
    "react-router-dom": "^6.4.0",
    "react-table": "7.8.0",
    "react-youtube": "10.0.0",
    "sanitize.css": "13.0.0",
    "styled-components": "5.3.5",
    "typescript-plugin-styled-components": "2.0.0",
    "use-immer": "0.7.0",
    "use-places-autocomplete": "4.0.0",
    "vest": "3.2.8",
    "yup": "0.32.11",
    "zod": "^3.19.1"
  },
  "devDependencies": {
    "@hookform/devtools": "4.2.2",
    "@storybook/addon-actions": "^6.5.12",
    "@storybook/addon-essentials": "^6.5.12",
    "@storybook/addon-links": "^6.5.12",
    "@storybook/react": "^6.5.12",
    "@stylelint/postcss-css-in-js": "^0.38.0",
    "@testing-library/jest-dom": "5.16.5",
    "@testing-library/react": "13.4.0",
    "@testing-library/user-event": "14.4.3",
    "@types/google.maps": "^3.50.1",
    "@types/lodash": "4.14.185",
    "@types/node": "18.7.18",
    "@types/ramda": "0.28.15",
    "@types/react": "18.0.20",
    "@types/react-beautiful-dnd": "13.1.2",
    "@types/react-dom": "18.0.6",
    "@types/react-responsive": "8.0.5",
    "@types/react-router-dom": "5.3.3",
    "@types/styled-components": "5.1.26",
    "@types/testing-library__jest-dom": "5.14.5",
    "@typescript-eslint/eslint-plugin": "5.37.0",
    "@typescript-eslint/parser": "5.37.0",
    "@vitejs/plugin-react": "2.1.0",
    "@vitest/ui": "^0.23.2",
    "cross-env": "7.0.3",
    "eslint": "8.23.1",
    "eslint-config-airbnb-typescript": "17.0.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-import-resolver-typescript": "3.5.1",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jest-dom": "^4.0.2",
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.31.8",
    "eslint-plugin-react-hooks": "4.6.0",
    "eslint-plugin-storybook": "^0.6.4",
    "eslint-plugin-testing-library": "^5.6.4",
    "husky": "^8.0.1",
    "lint-staged": "13.0.3",
    "msw": "0.47.3",
    "postcss-syntax": "^0.36.2",
    "prettier": "2.7.1",
    "rimraf": "3.0.2",
    "stylelint": "14.11.0",
    "stylelint-config-recommended": "9.0.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.10.0",
    "typescript": "4.8.3",
    "vite": "^3.1.1",
    "vitest": "^0.23.2"
  },
  "engines": {
    "node": ">=10.13.0",
    "npm": ">=6.4.1"
  },
  "msw": {
    "workerDirectory": "public"
  }
}

Can anyone tell me what the error could be?

Already adjusted the dependencies, already deleted the nodemodules and installed again.

Node version: 16.17



Solution

I’ve just found out what the problem was. Sine version 3.1.0 vite uses parse5 as it’s html parser. And for some reason this causes the crash. You should lock the vite dependency on 3.0.9.


This Question was asked in StackOverflow by Guilherme Ramos and Answered by ZVER3D It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?