sveltejs/svelte-loader

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

CatchABus opened this issue · 2 comments

CatchABus commented

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.

hmnd commented

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

CatchABus commented

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