4

The Issue

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.

Setup

Here are the dependencies:

  "devDependencies": {
    "css-loader": "3.0.0",
    "postcss": "7.0.17",
    "postcss-import": "12.0.1",
    "postcss-inline-svg": "4.0.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.6.0",
    ...
  }
  "dependencies": {
    "@babel/runtime": "7.4.5",
    "babel-plugin-react-css-modules": "5.2.6",
     ...
  }

The setup in postss.config.js:

module.exports = {
  plugins: [
    require('postcss-inline-svg'),
    require('postcss-import')({
      path: ['src/styles'],
    }),
  ]
};

The setup in webpack.config.js:

...
{
  test: /\.css$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
        sourceMap: true,
        importLoaders: 1,
      },
    },
    {
      loader: 'postcss-loader',
    },
  ],
},
...

In .babelrc:

...
{
  "plugins": ["@babel/plugin-proposal-object-rest-spread", "lodash",
    ["react-css-modules", {
      "exclude": "node_modules",
      "generateScopedName": "[name]__[local]--[hash:base64:5]",
      "autoResolveMultipleImports": true
      }
    ]
  ],
}
...

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.

codeful.element
  • 242
  • 2
  • 7

0 Answers0