parcel-bundler
Error when trying to import a .scss file from bootstrap into a .css file with parcel
🐛 bug report
If you try to import bootstrap .scss files in a .css file in your project, like this:
@import 'npm:bootstrap/scss/bootstrap.scss';
...parcel will fail to build with this error...
Cannot create property 'importer' on string 'scss/bootstrap.scss'
🎛 Configuration (.babelrc, package.json, cli command)
package.json
{
"scripts": {
"start": "parcel src/index.html --open",
"build": "parcel build src/index.html",
},
"devDependencies": {
"@parcel/transformer-sass": "^2.0.0",
"bootstrap": "^5.1.3",
"parcel": "^2.0.0",
}
}
src/index.html
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
src/index.css
@import 'npm:bootstrap/scss/bootstrap.scss';
🤔 Expected Behavior
Parcel builds correctly with bootstrap .scss as part fo the project.
😯 Current Behavior
Parcel fails with this error:
🚨 Build failed.
@parcel/transformer-sass: Cannot create property 'importer' on string 'scss/bootstrap.scss'
TypeError: Cannot create property 'importer' on string 'scss/bootstrap.scss'
at loadConfig (/Users/Andrew/Projects/stackoverflow-parcel-bootstrap/node_modules/@parcel/transformer-sass/lib/SassTransformer.js:92:29)
at async loadPluginConfig (/Users/Andrew/Projects/stackoverflow-parcel-bootstrap/node_modules/@parcel/core/lib/requests/ConfigRequest.js:65:21)
at async Transformation.loadTransformerConfig
(/Users/Andrew/Projects/stackoverflow-parcel-bootstrap/node_modules/@parcel/core/lib/Transformation.js:533:5)
at async Transformation.loadPipeline (/Users/Andrew/Projects/stackoverflow-parcel-bootstrap/node_modules/@parcel/core/lib/Transformation.js:472:20)
at async Transformation.run (/Users/Andrew/Projects/stackoverflow-parcel-bootstrap/node_modules/@parcel/core/lib/Transformation.js:169:20)
at async Child.handleRequest (/Users/Andrew/Projects/stackoverflow-parcel-bootstrap/node_modules/@parcel/workers/lib/child.js:217:9)
💁 Possible Solution
The bug is caused by the the way that @parcel/transformer-sass goes looking for configuration files that might be located in your project. One of the sources of configuration is the sass field in package.json (see code). For some reason, bootstrap's package.json has "sass": "scss/bootstrap.scss" (see code), which isn't the format parcel is expecting, so it chokes.
So a solution would be to either fix parcel so it doesn't go looking for config from bootstrap's package in this case, or enable it to correctly handle a string config of "sass": "scss/bootstrap.scss".
🔦 Context
I was trying to help folks out on StackOverflow with this issue
💻 Code Sample
You can see a reproduction of the issue in this repo.
🌍 Your Environment
| Software | Version(s) |
|---|---|
| Parcel | 2.0.0 |
| Node | 14.17.5 |
| Yarn | 1.22.15 |
| Operating System | OSX 11.6 |
Same goes if you try to import it from javascript. This is quite annoying.
Also suffering from this issue, albeit not when using bootstrap. I'm building a library that exports both SCSS and a pre-built, plan CSS version of said SCSS. Now for some reason parcel gets confused when building the CSS version because the library it's in also exports a sass version:
🚨 Build failed.
@parcel/transformer-sass: Cannot create property 'importer' on string 'dist/styles/index.scss'
TypeError: Cannot create property 'importer' on string 'dist/styles/index.scss'
at loadConfig (/Users/daniel/Documents/depict.ai/browser-tags-v2/.yarn/cache/@parcel-transformer-sass-npm-2.8.3-6c449bba66-9cb32b3906.zip/node_modules/@parcel/transformer-sass/lib/SassTransformer.js:92:29)
at async loadPluginConfig (/Users/daniel/Documents/depict.ai/browser-tags-v2/.yarn/cache/@parcel-core-npm-2.8.3-1751106c31-68adceb1b0.zip/node_modules/@parcel/core/lib/requests/ConfigRequest.js:65:21)
at async Transformation.loadTransformerConfig (/Users/daniel/Documents/depict.ai/browser-tags-v2/.yarn/cache/@parcel-core-npm-2.8.3-1751106c31-68adceb1b0.zip/node_modules/@parcel/core/lib/Transformation.js:569:5)
at async Transformation.loadPipeline (/Users/daniel/Documents/depict.ai/browser-tags-v2/.yarn/cache/@parcel-core-npm-2.8.3-1751106c31-68adceb1b0.zip/node_modules/@parcel/core/lib/Transformation.js:508:20)
at async Transformation.run (/Users/daniel/Documents/depict.ai/browser-tags-v2/.yarn/cache/@parcel-core-npm-2.8.3-1751106c31-68adceb1b0.zip/node_modules/@parcel/core/lib/Transformation.js:179:20)
at async Child.handleRequest (/Users/daniel/Documents/depict.ai/browser-tags-v2/.yarn/__virtual__/@parcel-workers-virtual-7a0f9788cf/0/cache/@parcel-workers-npm-2.8.3-39050bfde5-e3168b3e9e.zip/node_modules/@parcel/workers/lib/child.js:216:9)
Still reproducible:
daniel@Big-Speed parcel % yarn parcel build src/index.html
🚨 Build failed.
@parcel/transformer-sass: Cannot create property 'importer' on string 'scss/bootstrap.scss'
TypeError: Cannot create property 'importer' on string 'scss/bootstrap.scss'
at loadConfig (/private/tmp/parcel/.yarn/cache/@parcel-transformer-sass-npm-2.9.3-234c526ad6-534eb9239f.zip/node_modules/@parcel/transformer-sass/lib/SassTransformer.js:67:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async loadPluginConfig (/private/tmp/parcel/.yarn/cache/@parcel-core-npm-2.9.3-b343ad5e82-e4ba4e0909.zip/node_modules/@parcel/core/lib/requests/ConfigRequest.js:52:21)
at async Transformation.loadTransformerConfig (/private/tmp/parcel/.yarn/cache/@parcel-core-npm-2.9.3-b343ad5e82-e4ba4e0909.zip/node_modules/@parcel/core/lib/Transformation.js:488:5)
at async Transformation.loadPipeline (/private/tmp/parcel/.yarn/cache/@parcel-core-npm-2.9.3-b343ad5e82-e4ba4e0909.zip/node_modules/@parcel/core/lib/Transformation.js:440:20)
at async Transformation.run (/private/tmp/parcel/.yarn/cache/@parcel-core-npm-2.9.3-b343ad5e82-e4ba4e0909.zip/node_modules/@parcel/core/lib/Transformation.js:146:20)
at async Child.handleRequest
(/private/tmp/parcel/.yarn/__virtual__/@parcel-workers-virtual-a726b8dab9/0/cache/@parcel-workers-npm-2.9.3-b0559c8ccb-d6ac6e2abf.zip/node_modules/@parcel/workers/lib/child.js:193:9)
daniel@Big-Speed parcel % yarn parcel --version
2.9.3