Webpack.js.org: Uncaught SyntaxError: Invalid or unexpected token , after applying the setup guide on "https://webpack.js.org/guides/getting-started"

Created on 9 Oct 2019 · 10Comments · Source: webpack/webpack.js.org

__Feature to document__

__Author(s)__

__Additional information__

[ ] I am willing to work on this issue and submit a pull request.

Needs Clarification

Source

ngodi

👍1

Most helpful comment

@ngodi @EugeneHlushko I had the same problem. It worked in Firefox, but in Chrome I got this error with the following HTML file:

dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Getting started with webpack</title>
    </head>
    <body>
        <script src="./main.js"></script>
    </body>
</html>

src/index.js

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.body.appendChild(component());

package.json

{
  "name": "webpack",
  "private": true,
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.0.0-beta.15",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "html-webpack-plugin": "^4.2.1",
    "lodash": "^4.17.15"
  }
}

error in chrome console Version 81.0.4044.129 (Official Build) (64-bit) for Windows 10

Uncaught SyntaxError: Invalid or unexpected token

Fix by adding meta charset tag in dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Getting started with webpack</title>
    </head>
    <body>
        <script src="./main.js"></script>
    </body>
</html>

Please inform of this in the webpack getting started page at https://webpack.js.org/guides/getting-started/

Thanks so much

16oh4 on 30 Apr 2020

👍17 😄1

All 10 comments

Had a fix by adding the meta tag in the html

Getting Started
++

ngodi on 9 Oct 2019

Hi @ngodi can you mention after which step and, which token was the issue? The html in the guide looks correct

EugeneHlushko on 10 Oct 2019

on this page: https://webpack.js.org/guides/getting-started/
this code snippet gave me the error: Uncaught SyntaxError: Invalid or
unexpected token
added meta tag to the html to get it to work

Getting Started

<script src="https://unpkg.com/[email protected]"></script>

On Thu, Oct 10, 2019 at 7:08 AM Eugene Hlushko notifications@github.com
wrote:

Hi @ngodi https://github.com/ngodi can you mention after which step
and, which token was the issue? The html in the guide looks correct

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/webpack/webpack.js.org/issues/3310?email_source=notifications&email_token=AD44N3HES3Z7R3ZDDGQ74Q3QN3BEHA5CNFSM4I6ZH432YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEA2335I#issuecomment-540392949,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AD44N3DAVX53FSUP2JYCSK3QN3BEHANCNFSM4I6ZH43Q
.

ngodi on 10 Oct 2019

👍3

@ngodi @EugeneHlushko I had the same problem. It worked in Firefox, but in Chrome I got this error with the following HTML file:

dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Getting started with webpack</title>
    </head>
    <body>
        <script src="./main.js"></script>
    </body>
</html>

src/index.js

import _ from 'lodash';

function component() {
    const element = document.createElement('div');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

document.body.appendChild(component());

package.json

{
  "name": "webpack",
  "private": true,
  "version": "1.0.0",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.0.0-beta.15",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "html-webpack-plugin": "^4.2.1",
    "lodash": "^4.17.15"
  }
}

error in chrome console Version 81.0.4044.129 (Official Build) (64-bit) for Windows 10

Uncaught SyntaxError: Invalid or unexpected token

Fix by adding meta charset tag in dist/index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Getting started with webpack</title>
    </head>
    <body>
        <script src="./main.js"></script>
    </body>
</html>

Please inform of this in the webpack getting started page at https://webpack.js.org/guides/getting-started/

Thanks so much

16oh4 on 30 Apr 2020

👍17 😄1

Thanks. This worked for me on Windows 10 64 bit. Added <meta charset="utf-8"/> and then the SyntaxError went away.

UnfocusedDrive on 18 Oct 2020

👍3

Thank you fellow Internet travelers!
I can confirm this fix works and docs need to be updated.

For those that find this via search, make sure you do a Hard Reload / Empty Cache if a basic refresh doesn't work

ryanlelek on 19 Oct 2020

Adding <meta charset="utf-8"/> fixed this issue for me

zhtangsh on 20 Oct 2020

Answer https://github.com/webpack/webpack.js.org/issues/4081#issuecomment-712918078

@zhtangsh right solution

alexander-akait on 20 Oct 2020

I'm closing this issue now as we've updated the documentation regarding <meta charset="utf-8"/>. If anyone still has a problem, consider filing a new issue, thanks.

chenxsan on 30 Oct 2020

👍1

Cheers haha, thanks for the <meta charset="utf-8"/> answer. For my case I got the error when I'm using Webpack to build a React web widget with mode: 'production', but when mode: 'development' it wont trigger such error.