-1

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

Guilherme Ramos
  • 21
  • 1
  • 1
    The error says there's a problem in `index.html` at line 56. You should start there – Phil Sep 18 '22 at 23:57
  • I have the same exact issue, have you been able to fix it? I've even copied and pasted index.html file from different examples, changed encoding to utf-8 with and without BOM, removed and added the empty line at the end of the file, changed end of line to lf and crlf. Most importantly I even removed the script tag, so that I know that my js code has nothing to do with this. I reinstalled node_modules countless times and nothing has worked for me so far. Have you been able to fix your issue? – ZVER3D Oct 05 '22 at 03:20

4 Answers4

0

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.

Edit:

So, I have finally figured out what the problem was with my html file, since there was a need to update to the latest vite version. It was because of html file formatting, parse5 throws when you have html styled like so

<noscript
      ><div>
        <h1 style="margin: 16px; font-size: 26px">
          No js detected
        </h1>
        <p style="font-size: 18px">
          Turn your js on
        </p>
      </div></noscript
    >

Notice the new line after <noscript that is the problem. It has to be <noscript> without the empty line. Obviously, the same applies to other tags. Which is really stupid, since that is completely valid and some formatters do format html like that.

ZVER3D
  • 262
  • 1
  • 3
  • 10
0

You should probably include the HTML file in the question too.

In my case I found the issue was invalid HTML not quite on the same line. I had a self closing script tag that looked like:

<script type="text/javascript" src="/src/index.js"/> which is invalid HTML. Changing it to <script type="text/javascript" src="/src/index.js"></script> fixed it. See Why don't self-closing script elements work?

Ian
  • 33,605
  • 26
  • 118
  • 198
0

Use latest version

I faced the same issue in index.html. To add some context: prettier failed to format the file.

Updating the react Vite project to the latest stable version fixed the issue.

"vite": "^4.2.0"

"@vitejs/plugin-react": "^3.1.0",

If you are starting a new Vite project make sure to install using

yarn create vite

or

npm create vite@latest

@latest is mandatory when using npm

Anjan Talatam
  • 2,212
  • 1
  • 12
  • 26
0

This problem comes from your index.html file check if there is an issue and recompile your project.

Hasan Naim
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 01 '23 at 18:08