CODEWITHSUNDEEP
javascriptreactjswebpackcss-loader
Ivl
Ivl

Reputation: 11

Export errors while exporting CSS using Webpack v5

WARNING in ./src/components/desktop/layout/AutoAuth.js 48:12-21
export 'layerHide' (imported as 'layerHide') was not found in '../../../css/layout.css' (possible exports: default)
@ ./src/components/desktop/pages/LoadUser.js 4:0-42 6:42-50
@ ./src/router.js 60:0-59 119:15-23
@ ./src/index.js 8:0-30 31:83-89

I am getting this warning for every file that is importing CSS. I recently was in the process of updating to Webpack v5.

This is how it is imported in every file:

import {layerShow, layerHide, siteWrapper} from "../../../css/layout.css";

Relevant block in the webpack.config.js file:

      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: "css-loader",
            options: {
              modules: {
                localIdentName: "[local]--[hash:base64:5]",
              }
            }
          },
          "postcss-loader",
          'sass-loader',
        ]
      },

Versions of the modules:

sass-loader: 14.1.0
postcss-loader: 8.1.0
css-loader: 6.10.0
mini-css-extract-plugin: 2.8.0
webpack: 5.90.1

Any help is appreciated, I've been trying to fix this for hours.

I have tried changing the directory of the CSS files, using an alias, trying different combinations of options for css-loader in webpack.config.js. I did not have this problem before updating.

Upvotes: 1

Views: 606

Answers (1)

NeoZoom.lua
NeoZoom.lua

Reputation: 2911

Have you tried the option namedExport: true of css-loader yet?

On the other hand, if you're trying to use CSS Modules then you have to name your CSS files with postfix .module.css.

Upvotes: 0

Related Questions