Importing CSS from node_modules results in "undefined" class name in html
See original GitHub issue🐛 bug report
I could successfully import CSS/SCSS files into my React modules:
import * as styles from './my-component.css';
....
<div className= {`${styles.glory}`}>A text</div> // Which will be generated as <div class = "_glory_c5yp0">A text</div>
What I’m not able to do is to do the same for a CSS file in a node_modules
package:
import * as styles from 'bootstrap/dist/css/bootstrap.css';
....
<div className= {`${styles.row}`}>A text</div> // Which will be generated as <div class = "undefined">A text</div>
🎛 Configuration (.babelrc, package.json, cli command)
.postcssrc
{
"modules": true,
"plugins": {
"autoprefixer": {
"grid": true,
},
"postcss-modules": {
"camelCase": true
}
}
}
.babelrc
{
"presets": [
"@babel/preset-react",
"@babel/preset-env",
[
"@emotion/babel-preset-css-prop",
{
"sourceMap": false
}
]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
[
"@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
Nothing fancy in package.json. Installed packages:
parcel-plugin-typed-css-modules
autoprefixer
@types/autoprefixe
postcss-modules
🤔 Expected Behavior
<div className= {`${styles.row}`}>A text</div>
should be generated to
<div class = "row">A text</div>`
😯 Current Behavior
<div className= {`${styles.row}`}>A text</div>
is generated to
<div class = "undefined">A text</div>`
No error is generated.
🔦 Context
I want to have type-check and intellisense for class names of the CSS stylesheets of installed npm packages like Bootstrap.
🌍 Your Environment
Software | Version(s) |
---|---|
Parcel | 1.12.3 |
Node | 10.16.3 |
npm/Yarn | 6.6.0 |
Operating System | Windows 10 |
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Importing CSS from node_modules into JS modules results in ...
Importing CSS from node_modules into JS modules results in "undefined" class name in generated html ; Just a guess - try '~/bootstrap/dist/css/ ...
Read more >import - JavaScript - MDN Web Docs - Mozilla
Name of the module object that will be used as a kind of namespace when referring to the imports. Must be a valid...
Read more >CSS - Parcel
To use CSS modules, create a file with the .module.css extension, and import it from a JavaScript file with a namespace import. Then,...
Read more >css-loader | webpack - JS.ORG
Importing. To import a local classname from another module. Note. We strongly recommend that you specify the extension when importing a file ...
Read more >FAQs - styled-components
Note regarding css @import and createGlobalStyle. At this time we do not recommend using ... You can use its existing class names alongside...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
It should be in
node_modules/bootstrap
as that is the node module you’re requiring. Hopefully this works, you will probably have to clear parcel cache as well as it didn’t have a config file before@DeMoorJasper Legend! Thanks so much 😊.