Production mode vendor CSS not generating
vraghu-chwy opened this issue · comments
Hello, thanks for the wonderful starter kit. Been using it for a month and find it really useful. One issue I am running into in production builds, vendor CSS (included via node_modules) doesn't seem to be generated.
I have made no changes to the webpack config. I tried looking at the webpack tree shaking documentation and marking sideEffects to no avail. I have tried a bunch of things and am just unable to figure out where the config says to drop the CSS in prod mode. It works fine in dev mode. Below are outputs of the build run with mode set as development and production. I can't figure out where the change is happening. So far, from what I have understood, it seems like some kind of default Webpack optimization but I can't figure out what. Any pointers would be greatly appreciated.
Mode set as production - No CSS file
> cross-env NODE_ENV=production TS_NODE_PROJECT=tsconfig.tooling.json ts-node scripts/build
[2020-12-20T23:55:56.678Z] SSR build started.
[2020-12-20T23:55:57.246Z] [server] Compiling
[2020-12-20T23:55:57.289Z] [client] Compiling
Webpack Bundle Analyzer saved report to /Users/vraghu/www/splat-ui-poc/build/bundle-report.html
Time: 2315ms
Built at: 12/20/2020 6:55:59 PM
Entrypoint server = server.js
[2020-12-20T23:55:59.796Z] Server compiled.
Error parsing bundle asset "/Users/vraghu/www/splat-ui-poc/build/server/bundle.6b09d0a6.js": no such file
Error parsing bundle asset "/Users/vraghu/www/splat-ui-poc/build/server/vendors~bundle.a26927dd.chunk.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.
Webpack Bundle Analyzer saved report to /Users/vraghu/www/splat-ui-poc/build/bundle-report.html
Time: 4538ms
Built at: 12/20/2020 6:56:01 PM
Asset Size Chunks Chunk Names
../index.html 422 bytes [emitted]
asset-manifest.json 457 bytes [emitted]
assets/getFetch.d7d6010d.cjs 477 bytes [emitted] [immutable]
bundle.6b09d0a6.js 27.7 KiB 0 [emitted] [immutable] bundle
bundle.6b09d0a6.js.map 72.4 KiB 0 [emitted] [dev] bundle
vendors~bundle.a26927dd.chunk.js 484 KiB 1 [emitted] [immutable] [big] vendors~bundle
vendors~bundle.a26927dd.chunk.js.LICENSE.txt 1.61 KiB [emitted]
vendors~bundle.a26927dd.chunk.js.map 1.57 MiB 1 [emitted] [dev] vendors~bundle
Mode set as development CSS file is being generated
> cross-env NODE_ENV=development TS_NODE_PROJECT=tsconfig.tooling.json ts-node scripts/build
[2020-12-20T23:56:56.647Z] SSR build started.
[2020-12-20T23:56:56.746Z] [server] Compiling
[2020-12-20T23:56:56.778Z] [client] Compiling
Webpack Bundle Analyzer saved report to /Users/vraghu/www/splat-ui-poc/build/bundle-report.html
Time: 2494ms
Built at: 12/20/2020 6:56:59 PM
Entrypoint server = server.css server.js
[2020-12-20T23:56:59.485Z] Server compiled.
Error parsing bundle asset "/Users/vraghu/www/splat-ui-poc/build/server/bundle.js": no such file
Error parsing bundle asset "/Users/vraghu/www/splat-ui-poc/build/server/vendors~bundle.2473f469.chunk.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.
Webpack Bundle Analyzer saved report to /Users/vraghu/www/splat-ui-poc/build/bundle-report.html
Time: 3690ms
Built at: 12/20/2020 6:57:00 PM
Asset Size Chunks Chunk Names
../index.html 608 bytes [emitted]
asset-manifest.json 268 bytes [emitted]
assets/getFetch.d7d6010d.cjs 477 bytes [emitted] [immutable]
bundle.js 368 KiB bundle [emitted] [big] bundle
vendors~bundle.2473f469.chunk.js 7.94 MiB vendors~bundle [emitted] [immutable] [big] vendors~bundle
vendors~bundle.css 683 KiB vendors~bundle [emitted] [big] vendors~bundle
On further digging, this looks to be happening due to the sideEffects flag being passed as false in the library from which I am importing CSS. Even when I try to override the sideEffects in the package.json in the root of my folder by explicitly setting the path of the CSS file or via globbing, it does not override what the package ships with automatically. For now, we are working around this by using require statements for all vendor CSS. Not ideal but good enough for now. I am closing this issue.