svelte: Error in preprocessor sourcemapping: "Cannot read property 'length' of undefined"
Describe the bug The new preprocessor sourcemapping feature seems to sometimes cause errors (CC @halfnelson @milahu)
Logs
> sapper-postcss-template@2020.11.18 build /Users/babichjacob/Repositories/sapper-postcss-template
> cross-env NODE_ENV=production sapper build --legacy
> Building...
[!] (plugin svelte) TypeError: Cannot read property 'length' of undefined
/Users/babichjacob/Repositories/sapper-postcss-template/src/routes/index.svelte
TypeError: Cannot read property 'length' of undefined
at sourcemap_add_offset (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/svelte/compiler.js:22087:23)
at get_replacement (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/svelte/compiler.js:28575:10)
at /Users/babichjacob/Repositories/sapper-postcss-template/node_modules/svelte/compiler.js:28635:21
at async Promise.all (index 0)
at async replace_async (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/svelte/compiler.js:28551:52)
at async preprocess_tag_content (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/svelte/compiler.js:28618:22)
at async preprocess (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/svelte/compiler.js:28644:10)
at async Object.transform (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/rollup-plugin-svelte/index.js:100:23)
at async ModuleLoader.addModuleSource (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/rollup/dist/shared/rollup.js:18289:30)
at async ModuleLoader.fetchModule (/Users/babichjacob/Repositories/sapper-postcss-template/node_modules/rollup/dist/shared/rollup.js:18345:9
To Reproduce
git clone git@github.com:babichjacob/sapper-postcss-template.git
Upgrade to svelte 3.30 and rollup-plugin-svelte 7 following the upgrade guide (example of that here: https://github.com/sveltejs/sapper-template/pull/289)
sourcemap = false -> no error sourcemap = “inline” -> that error sourcemap = true -> that error
Severity Several people have reported this issue on Discord. It seems to happen relatively frequently
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 11
- Comments: 22 (15 by maintainers)
Damn I didn’t known it did that, thank you and sorry for being arrogant 😕 It worked with the ’~‘, thank you
My analysis so far: The PostCSS processor in
svelte-preprocessis returning aSourceMapGeneratorinstead of whatever the svelte compiler is expecting it to return. ThisSourceMapGeneratoris coming directly from thepostcsspackage. I’m not sure where exactly theSourceMapGeneratoris supposed to turn into an actual source map, but that seems to be the missing step AFAICT.Update: Looks like just changing the postcss transformer isn’t sufficient.
This is certainly not the exact right fix, but adding this in the Svelte
compiler.jsat line 28636, just before the call toget_replacementallows everything to build without errors:It was explained: https://bytearcher.com/articles/semver-explained-why-theres-a-caret-in-my-package-json/
That
package.jsonspecifies^3.17.3which means get the latest 3.x release, which is 3.30. The actual version used is specified in thepackage-lock.json. Trygrep -r -A2 svelte package-lock.jsonThe method this bug refers to did not exist until 3.30, which means you’re either using 3.30 or encountering a different issue.