svelte-loader icon indicating copy to clipboard operation
svelte-loader copied to clipboard

Modifying package.json throws error during hot reload if emitCss is set to `true`

Open CatchABus opened this issue 4 years ago • 2 comments
trafficstars

If one modifies package.json and hot reload attempts to compile, it will throw the following error:

ERROR in ./src/views/Map.svelte (./src/views/Map.svelte.1.css!=!./node_modules/svelte-loader/index.js?cssPath=/home/dev/workdir/clients/web_v2/src/views/Map.svelte.1.css!./src/views/Map.svelte)
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: PostCSS received undefined instead of CSS string
    at new Input (/home/dev/workdir/clients/web_v2/node_modules/postcss/lib/input.js:24:13)
    at parse (/home/dev/workdir/clients/web_v2/node_modules/postcss/lib/parse.js:8:15)
    at new LazyResult (/home/dev/workdir/clients/web_v2/node_modules/postcss/lib/lazy-result.js:132:16)
    at Processor.process (/home/dev/workdir/clients/web_v2/node_modules/postcss/lib/processor.js:34:12)
    at Object.loader (/home/dev/workdir/clients/web_v2/node_modules/css-loader/dist/index.js:140:51)
    at processResult (/home/dev/workdir/clients/web_v2/node_modules/webpack/lib/NormalModule.js:703:19)
    at /home/dev/workdir/clients/web_v2/node_modules/webpack/lib/NormalModule.js:809:5
    at /home/dev/workdir/clients/web_v2/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/dev/workdir/clients/web_v2/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/dev/workdir/clients/web_v2/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/dev/workdir/clients/web_v2/node_modules/css-loader/dist/index.js:155:5)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at runNextTicks (node:internal/process/task_queues:65:3)
    at processImmediate (node:internal/timers:437:9)
 @ ./src/views/Map.svelte 308:0-309:1
 @ ./src/routes.js 68:26-54
 @ ./src/App.svelte 35:0-34 244:32-38 444:2-8
 @ ./src/main.js 3:0-31 20:14-17

I noticed it occurs on files that contain rules with url() value in CSS. I use file-loader to parse and transform URLs and have set emitCss to true. In general, compilation is successful but everything is ruined if package.json is changed.

CatchABus avatar Jun 23 '21 10:06 CatchABus

@DimitrisRK did you ever figure this out? I'm getting this error too, but it's happening to me consistently instead of just with package.json changes.

hmnd avatar Oct 19 '21 09:10 hmnd

@DimitrisRK did you ever figure this out? I'm getting this error too, but it's happening to me consistently instead of just with package.json changes.

According to docs:

// NOTE emitCss: true is currently not supported with HMR
// Enable it for production to output separate css file
emitCss: prod, // Default: false
// Enable HMR only for dev mode
hotReload: !prod, // Default: false
// Extra HMR options, the defaults are completely fine
// You can safely omit hotOptions altogether

I have personally set emitCss to always be true so that's expected.

CatchABus avatar Oct 19 '21 14:10 CatchABus