karma-webpack

karma-webpack copied to clipboard

• Operating System: Ubuntu 20.04
• Node Version: 12.20
• NPM Version: [email protected]
• webpack Version: 5.26.0
• karma-webpack Version: 5.0.0

Expected Behavior

Builds a bundle without SyntaxError

Actual Behavior

Builds a bundle with a SyntaxError

/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
{

/***/ "./test/karma.tests.js":
/*!*****************************!*\
  !*** ./test/karma.tests.js ***!
  \*****************************/
/***/ (() => {

eval("console.log(1);\n\nit(\"passes\", () => {});\n\nit(\"fails\", () => {\n  throw new Error();\n});\n\n\n//# sourceURL=webpack:///./test/karma.tests.js?");

/***/ })

};

Code

https://github.com/eps1lon/material-ui/blob/b1b99948b18a84398186b9cf8e0d2475c024726f/test/karma.conf.js

How Do We Reproduce?

I'm unable to reproduce this in isolation (https://github.com/eps1lon/webpack-karma) even with the exact same karma.conf.js, karma.tests.js and dependencies.

Mar 16 '21 10:03 eps1lon

Do you have a branch on material ui that can reproduce this?

Mar 16 '21 14:03 codymikol

Do you have a branch on material ui that can reproduce this?

Sure, accidentally linked the commit, not the branch:

1. checkout https://github.com/eps1lon/material-ui/tree/repro/karma-webpack5
2. yarn install
3. yarn test:karma

Produces:

yarn run v1.22.10
$ karma start test/karma.conf.js
Webpack bundling...
Webpack starts watching...
asset commons.js 889 bytes [emitted] (name: commons) (id hint: commons)
asset runtime.js 670 bytes [emitted] (name: runtime)
asset karma.tests.3944139494.js 566 bytes [emitted] (name: karma.tests.3944139494)
Entrypoint karma.tests.3944139494 2.08 KiB = runtime.js 670 bytes commons.js 889 bytes karma.tests.3944139494.js 566 bytes
webpack 5.26.0 compiled successfully in 62 ms
16 03 2021 16:02:15.860:WARN [karma]: No captured browser, open http://localhost:9876/
16 03 2021 16:02:15.881:INFO [karma-server]: Karma v6.2.0 server started at http://localhost:9876/
16 03 2021 16:02:15.881:INFO [launcher]: Launching browsers chromeHeadless with concurrency unlimited
16 03 2021 16:02:15.884:INFO [launcher]: Starting browser ChromeHeadless
16 03 2021 16:02:16.906:INFO [Chrome Headless 90.0.4421.0 (Linux x86_64)]: Connected on socket DT4uF5MW2Ji9pPlLAAAB with id 79097167
Chrome Headless 90.0.4421.0 (Linux x86_64) ERROR
  Uncaught SyntaxError: Unexpected token ':'
  at /tmp/_karma_webpack_825130/commons.js:11:30
  
  SyntaxError: Unexpected token ':'

Mar 16 '21 15:03 eps1lon

@codymikol Were you able to reproduce this or is this somehow related to my local setup?

Mar 26 '21 09:03 eps1lon

@codymikol Were you able to reproduce this or is this somehow related to my local setup?

I was definitely able to reproduce it. IIRC it looked like this was the actual bundle being returned by webpack. I also tried using different versions of webpack and they all seemed to return the same result. Unfortunately I have had a lot of different things taking my attention and didn't have time to dig further.

Mar 30 '21 22:03 codymikol

~~I was just able to get this to run successfully, I haven't totally figured out the root cause yet, but it looks like something is incorrectly parsing the file names.~~

~~I changed karma.tests.js to tests.js and changed the corresponding entry in karma.conf.js and it then started working.~~

~~I'll try and dig further, but this should at least get things running for you.~~

I was mistaken about this workaround, I'm still looking into it

Apr 11 '21 14:04 codymikol

I still get the same error after renaming the file to "tests.js" unfortunately :(

On Sun, Apr 11, 2021 at 4:47 PM Cody Mikol @.***> wrote:

I was just able to get this to run successfully, I haven't totally figured out the root cause yet, but it looks like something is incorrectly parsing the file names.

I changed karma.tests.js to tests.js and changed the corresponding entry in karma.conf.js and it then started working.

I'll try and dig further, but this should at least get things running for you.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ryanclark/karma-webpack/issues/505#issuecomment-817319667, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABT6D6TTLBLIDCJZHLUMHDTIGY7ZANCNFSM4ZIJ6KVA .

Apr 11 '21 15:04 einarq

Ah, now I saw your update as well :)

Apr 11 '21 15:04 einarq

Well, it seems I get material-ui to work by deleting the .browserslistrc file. Why that makes a difference, I have absolutely no idea.

@eps1lon could you confirm that that works for you as well?

It looks like I have some research to do :S

Apr 11 '21 16:04 codymikol

I can totally confirm that adding this file to karma-webpack causes webpack to fail in exactly the same manner.

Apr 11 '21 16:04 codymikol

I think this might a bug in babel

Apr 11 '21 17:04 codymikol

https://github.com/babel/babel-loader/issues/902

Opened an issue over here to bring attention to this

Apr 19 '21 15:04 codymikol