Recently I have switched from the deprecated react-css-module to babel-plugin-react-css-modules to use CSS Module in a React project and encountered the issue that it is not able to resolve the style declaration in the CSS file imported with @import statements (with postcss-import). I wonder if it is a known issue or something missing from the configuration of these plug-ins?
The scenario is tabs.jsx is using the class declared in utilities.css which is @import-ed in a transitive way through number of CSS files:
src/components/tabs/
|
| tabs.css (@import 'base.css';)
| tabs.jsx (import './tabs.css'; and uses class 'hidden')
src/style/
|
|--> base.css (@import 'utilities.css';
|--> utilities.css (where .hidden class is declared)
This would result with error at bundle phase with webpack:
ERROR in ./components/tabs/tabs.jsx
Module build failed (from ../node_modules/babel-loader/lib/index.js):
Error: Could not resolve the styleName 'hidden'.
at handleError (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/getClassName.js:18:11)
at styleNameValue.split.filter.map.styleName (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/getClassName.js:103:14)
at Array.map (<anonymous>)
at _default (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/getClassName.js:83:6)
at _default (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/resolveStringLiteral.js:20:55)
at PluginPass.JSXElement (/Users/coder/Documents/MyCode/react-app/node_modules/babel-plugin-react-css-modules/dist/index.js:191:47)
at newFn (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/visitors.js:193:21)
at NodePath._call (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:53:20)
at NodePath.call (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:90:19)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:146:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitMultiple (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:85:17)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitMultiple (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:85:17)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:90:19)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:146:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitMultiple (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:85:17)
at TraversalContext.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:144:19)
at Function.traverse.node (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/index.js:94:17)
at NodePath.visit (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/path/context.js:95:18)
at TraversalContext.visitQueue (/Users/coder/Documents/MyCode/react-app/node_modules/@babel/traverse/lib/context.js:118:16)
@ ./components/tabs/index.js 5:0-45 5:0-45
@ ./index.js
Debugging
Add some debug statement in getClassName.js shows that the class declaration from @import never becomes available, and hence throwing the error above.
In the past when I was using react-css-module, it was never a problem. So perhaps it is specific to the newer babel-plugin-react-css-modules or the compatibility with postcss-import? Any direction for how to resolve this or help would be much appreciated. Thanks.
The Issue
Recently I have switched from the deprecated
react-css-module
tobabel-plugin-react-css-modules
to use CSS Module in a React project and encountered the issue that it is not able to resolve the style declaration in the CSS file imported with@import statements
(withpostcss-import
). I wonder if it is a known issue or something missing from the configuration of these plug-ins?The scenario is
tabs.jsx
is using the class declared inutilities.css
which is@import
-ed in a transitive way through number of CSS files:This would result with error at bundle phase with webpack:
Debugging
Add some debug statement in
getClassName.js
shows that the class declaration from@import
never becomes available, and hence throwing the error above.Setup
Here are the dependencies:
The setup in
postss.config.js
:The setup in
webpack.config.js
:In
.babelrc
:In the past when I was using
react-css-module
, it was never a problem. So perhaps it is specific to the newerbabel-plugin-react-css-modules
or the compatibility withpostcss-import
? Any direction for how to resolve this or help would be much appreciated. Thanks.