question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
DeMoorJaspercommented, Dec 18, 2019

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

0reactions
alexiwondercommented, Dec 18, 2019

@DeMoorJasper Legend! Thanks so much 😊.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found