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-preprocess
is returning aSourceMapGenerator
instead of whatever the svelte compiler is expecting it to return. ThisSourceMapGenerator
is coming directly from thepostcss
package. I’m not sure where exactly theSourceMapGenerator
is 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.js
at line 28636, just before the call toget_replacement
allows everything to build without errors:It was explained: https://bytearcher.com/articles/semver-explained-why-theres-a-caret-in-my-package-json/
That
package.json
specifies^3.17.3
which 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.json
The method this bug refers to did not exist until 3.30, which means you’re either using 3.30 or encountering a different issue.