search

codymikol / karma-webpack

Karma webpack Middleware
MIT License
830 stars 221 forks source link

Bundle is invalid when used in an existing repository #505

Closed eps1lon closed 10 months ago

eps1lon commented 3 years ago

Expected Behavior

Builds a bundle without SyntaxError

Actual Behavior

Builds a bundle with a SyntaxError

malformed bundle ```js /* * 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.

codymikol commented 3 years ago

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

eps1lon commented 3 years ago

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 ':'
eps1lon commented 3 years ago

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

codymikol commented 3 years ago

@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.

codymikol commented 3 years ago

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

einarq commented 3 years ago

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 .

einarq commented 3 years ago

Ah, now I saw your update as well :)

codymikol commented 3 years ago

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

codymikol commented 3 years ago

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

codymikol commented 3 years ago

I think this might a bug in babel

codymikol commented 3 years ago

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

Opened an issue over here to bring attention to this