Syntax error when using webpack 5 and karma 6 #507

einarq · 2021-04-09T07:29:25Z

Apologies if this isn't the correct place to report this, but getting a bit desparate. I've converted my app to work with webpack 5, but I'm unable to get the tests running. All configs look correct. I've also tried more or less plugging in the example config from here, but still getting the same error:
https://github.com/appzuka/karma-webpackv5-test

Getting a strong feeling that something related to webpack or karma is completely off, but I'm unable to figure out what it is.
As described below, the weird message I get no matter what I do is this:

Chrome 89.0.4389.114 (Windows 10) ERROR
  Uncaught SyntaxError: Unexpected token ':'
  at C:/Users/einarq/AppData/Local/Temp/_karma_webpack_1/commons.js:3:66

I've pasted the beginning of that generated file below.

Operating System: Windows 10
Node Version: 14.15.4
NPM Version: 6.14.10
webpack Version: 5.31.0
karma-webpack Version: 5.0.0

Expected Behavior

Tests should run fine

Actual Behavior

08 04 2021 20:38:17.964:INFO [karma-server]: Karma v6.3.2 server started at http://localhost:9999/
08 04 2021 20:38:17.965:INFO [launcher]: Launching browsers ChromeNoSandbox with concurrency unlimited
08 04 2021 20:38:17.971:INFO [launcher]: Starting browser Chrome
08 04 2021 20:38:20.213:INFO [Chrome 89.0.4389.114 (Windows 10)]: Connected on socket Arz-bQzd3v3C9CF0AAAB with id 68760601
Chrome 89.0.4389.114 (Windows 10) ERROR
Uncaught SyntaxError: Unexpected token ':'
at C:/Users/einarq/AppData/Local/Temp/_karma_webpack_1/commons.js:3:66

SyntaxError: Unexpected token ':'

Code

{
      mode: 'development',
      output: {
        publicPath: '/',
      },
      cache: true,
      devtool: false,
      resolve: {
        modules: [path.resolve('./www/js/app'), 'www/js/libs', 'www/svg', 'node_modules', 'test/jasmine-ui', 'server'],
        extensions: ['.js', '.jsx', '.html', '.css', '.svg'],
        fallback: {stream: require.resolve('stream-browserify')},
      },
      plugins: [
        new webpack.ProvidePlugin({
          process: 'process/browser',
        }),
      ],
      module: {
        rules: [
          {
            test: /\.(jsx|js)?$/,
            include: [path.resolve(__dirname, 'www/js/app'), path.resolve(__dirname, 'server')],
            use: [
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                },
              },
            ],
          },
        ],
      },
    },
    webpackMiddleware: {
      noInfo: true
    },
  }

Geneated file contents:

{
/***/ "./node_modules/@babel/runtime-corejs2/core-js/date/now.js":
/*!*****************************************************************!*\
  !*** ./node_modules/@babel/runtime-corejs2/core-js/date/now.js ***!
  \*****************************************************************/
/*! dynamic exports */
/*! export __esModule [maybe provided (runtime-defined)] [no usage info] [provision prevents renaming (no use info)] -> ./node_modules/@babel/runtime-corejs2/node_modules/core-js/library/fn/date/now.js .__esModule */
/*! other exports [maybe provided (runtime-defined)] [no usage info] -> ./node_modules/@babel/runtime-corejs2/node_modules/core-js/library/fn/date/now.js */
/*! runtime requirements: module, __webpack_require__ */
/***/ ((module, __unused_webpack_exports, __webpack_require__) => {

module.exports = __webpack_require__(/*! core-js/library/fn/date/now */ "./node_modules/@babel/runtime-corejs2/node_modules/core-js/library/fn/date/now.js");

/***/ }),

/***/ "./node_modules/@babel/runtime-corejs2/core-js/number/is-integer.js":
/*!**************************************************************************!*\
  !*** ./node_modules/@babel/runtime-corejs2/core-js/number/is-integer.js ***!

The text was updated successfully, but these errors were encountered:

codymikol · 2021-04-09T17:38:52Z

Related issue: #505

codymikol · 2021-04-09T17:40:10Z

This is a much smaller repro, I'll try and look at this sometime over the weekend to troubleshoot.

codymikol · 2021-04-11T14:55:17Z

~~I found a workaround over in #505 . I'm still looking on how to make a proper fix though.~~

Looks like I was mistaken about the workaround unfortunately...

einarq · 2021-04-19T10:23:28Z

As mentioned in the other issue, deleting the "browserslist" file solves the problem.
It also works if I simplify it to just specify this for example:
"last 2 Chrome versions"

I tried a some different approaches to overriding this in my karma config, but was not able to do so successfully.
Perhaps you know of a way to do this?

I tried this:

{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
    presets: [['@babel/preset-env', {targets: 'last 2 Chrome versions'}]],
  },
}

einarq · 2021-04-19T10:33:23Z

Actually, I was able to get it working by putting this in my karma.conf.js:

module.exports = function(config) {
  process.env.BROWSERSLIST = 'Chrome >= 80, Firefox >= 80, IE >= 11';

einarq · 2021-04-19T10:34:37Z

Btw, part of the problem is probably that we use "split bundling" currently, to serve a modern bundle to those who are worthy :)

Contents of "browserlist" file:

[modern]
last 2 Chrome versions
not Chrome < 60
last 2 Firefox versions
not Firefox < 54

[legacy]
last 5 Chrome versions
last 5 Firefox versions
last 5 Edge versions
Safari >= 10
iOS >= 10.1
IE >= 11

codymikol · 2021-04-19T15:09:03Z

babel/babel-loader#902

Opened an issue over here to bring attention to this

haakemon · 2021-04-21T11:57:37Z

I'm working on the same project as @einarq , and can it definitely looks to be something with the way our browserslist is defined.

If we remove the environments from our browserslist and f.ex change the browserslist to either:

last 2 Chrome versions
not Chrome < 60
last 2 Firefox versions
not Firefox < 54

or

last 5 Chrome versions
last 5 Firefox versions
last 5 Edge versions
Safari >= 10
iOS >= 10.1
IE >= 11

the tests runs fine.

Another option is to leave the browserslist as-is with both environments defined, and instead set the target config in karma/webpack config to either target: 'browserslist:modern or target: 'browserslist:legacy'. When doing this, the tests also run fine. This is what we are doing for now.

peaceful-james · 2021-08-24T09:53:43Z

I am getting the same Unexpected token ':' error.
I have tried deleting the .browserslistrc file.
I have tried setting target: 'browserslist with only targeting a single version of Chrome.
No joy :(

peaceful-james · 2021-08-24T09:56:43Z

@einarq In this issue, you describe working with karma 6. However, in the linked "example" repo you are using karma 5. Do you have an example "karma 6" repo?

einarq · 2021-08-24T10:21:42Z

@peaceful-james
Sorry, don't remember all the details, but I think the "fix" we did on our end was to add this to our karma config:

      target: 'browserslist:modern',

@haakemon Isn't that correct?

peaceful-james · 2021-08-25T07:59:29Z

target: 'browserslist:modern',

@einarq What does your .browserslistrc file look like?

einarq · 2021-08-25T08:17:44Z

We have a file called simply "browserslist" (not a dot file, no extension), and it looks like this: [modern] last 3 Chrome versions not Chrome < 60 last 3 Firefox versions not Firefox < 54 [legacy] last 5 Chrome versions last 5 Firefox versions last 5 Edge versions Safari >= 10 iOS >= 10.1 IE >= 11

…

On Wed, Aug 25, 2021 at 9:59 AM Peaceful James ***@***.***> wrote: target: 'browserslist:modern', What does your .browserslistrc file look like? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#507 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABT6DZ27XVBNPIJKN7WEALT6SPGZANCNFSM42UNNVNA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

peaceful-james · 2021-08-25T08:20:14Z

@einarq Thanks. I will try that. The target: 'browserslist:modern', that you put in karma.conf.js, is that a root level config option? I can't find it in the docs.

EDIT: Never mind, I see it's a webpack option. Sadly, with your exact browserslist and with the target config, I am still getting the same error:

  Uncaught SyntaxError: Unexpected token ':'
  at /var/folders/qb/xxxxxxxxxxxxxxxxxxxx/T/_karma_webpack_348757/commons.js:104741:42

einarq · 2021-08-25T08:31:38Z

It's a webpack option, so we put it on the weppack part of the karma.conf.js file: webpack: { mode: 'development', output: { publicPath: '/', }, cache: true, target: 'browserslist:modern',

…

On Wed, Aug 25, 2021 at 10:20 AM Peaceful James ***@***.***> wrote: @einarq <https://github.com/einarq> Thanks. I will try that. The target: 'browserslist:modern', that you put in karma.conf.js, is that a root level config option? I can't find it in the docs. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#507 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABT6D2LDOPIH5ZD3HSZYMLT6SRUTANCNFSM42UNNVNA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&utm_campaign=notification-email> .

peaceful-james · 2021-08-25T09:49:38Z

I have done some more investigation and I think my problem is actually different in nature to the OP.

I have a lib called draft-js that has a particular line in one of the functions:

  process.env.NODE_ENV !== "production" ? warning(selection.isCollapsed(), 'moveSelectionBackward should only be called with a collapsed SelectionState') : void 0;

This is strange to me because the source on github (https://github.com/facebook/draft-js/blob/10ca1ad44843e970c4314f85a8f37d26f842ebf9/src/component/handlers/edit/commands/moveSelectionBackward.js#L27) just says:

warning(selection.isCollapsed(), 'moveSelectionBackward should only be called with a collapsed SelectionState')

So my node_modules code is different to the code in their repo. Anyway...

I get the syntax error on how this line is interpreted. In /var/folders/qb/xxxxxxxxxxxxxxxxxxxx/T/_karma_webpack_348757/commons.js I am seeing this:

{"key1":"value1","key2":"value2"}.env.NODE_ENV !== "production" ? warning(selection.isCollapsed(), 'moveSelectionBackward should only be called with a collapsed SelectionState') : void 0;

So the process is being converted into a huge dictionary/object/map (whatever it's called) representing every key-value pair in process.

I'm sorry if I have cluttered this issue with something unrelated but for posterity I'm leaving my discoveries.

peaceful-james · 2021-08-25T10:06:01Z

Final note: I should not have written anything in this issue. My problem was caused by process not being defined, and me trying to define it in a hacky way. I have fixed my problem by using:

        new EnvironmentPlugin({
          NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
          DEBUG: false
        })

in my webpack "plugins" config. Sorry for all the noise 🎺

codymikol · 2021-08-25T14:28:25Z

@peaceful-james I appreciate your diligence in reporting your findings, those posts may someday be useful to someone troubleshooting the same issue 😉

codymikol mentioned this issue Apr 19, 2021

Syntax error when using .browserslistrc babel/babel-loader#902

Closed

codymikol closed this as completed Oct 22, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Syntax error when using webpack 5 and karma 6 #507

Syntax error when using webpack 5 and karma 6 #507

einarq commented Apr 9, 2021

codymikol commented Apr 9, 2021

codymikol commented Apr 9, 2021

codymikol commented Apr 11, 2021 •

edited

Loading

einarq commented Apr 19, 2021 •

edited

Loading

einarq commented Apr 19, 2021

einarq commented Apr 19, 2021

codymikol commented Apr 19, 2021

haakemon commented Apr 21, 2021

peaceful-james commented Aug 24, 2021

peaceful-james commented Aug 24, 2021

einarq commented Aug 24, 2021

peaceful-james commented Aug 25, 2021 •

edited

Loading

einarq commented Aug 25, 2021 via email

peaceful-james commented Aug 25, 2021 •

edited

Loading

einarq commented Aug 25, 2021 via email

peaceful-james commented Aug 25, 2021

peaceful-james commented Aug 25, 2021

codymikol commented Aug 25, 2021

Syntax error when using webpack 5 and karma 6 #507

Syntax error when using webpack 5 and karma 6 #507

Comments

einarq commented Apr 9, 2021

Expected Behavior

Actual Behavior

Code

codymikol commented Apr 9, 2021

codymikol commented Apr 9, 2021

codymikol commented Apr 11, 2021 • edited Loading

einarq commented Apr 19, 2021 • edited Loading

einarq commented Apr 19, 2021

einarq commented Apr 19, 2021

codymikol commented Apr 19, 2021

haakemon commented Apr 21, 2021

peaceful-james commented Aug 24, 2021

peaceful-james commented Aug 24, 2021

einarq commented Aug 24, 2021

peaceful-james commented Aug 25, 2021 • edited Loading

einarq commented Aug 25, 2021 via email

peaceful-james commented Aug 25, 2021 • edited Loading

einarq commented Aug 25, 2021 via email

peaceful-james commented Aug 25, 2021

peaceful-james commented Aug 25, 2021

codymikol commented Aug 25, 2021

codymikol commented Apr 11, 2021 •

edited

Loading

einarq commented Apr 19, 2021 •

edited

Loading

peaceful-james commented Aug 25, 2021 •

edited

Loading

peaceful-james commented Aug 25, 2021 •

edited

Loading