Export errors while exporting CSS using Webpack v5

Question

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.

It seems unlikely given that it's CSS, but do you have any dependency cycles between these files? Eg A imports B, B imports C, C imports A. — Slbox
– Slbox, Commented Feb 7, 2024 at 1:09
I don't know if I have a way to check that as this is from a very big code base. — Ivl
– Ivl, Commented Feb 7, 2024 at 1:13

NeoZoom.lua · Accepted Answer · 2024-03-06 06:35:27Z

0

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.

edited Mar 6, 2024 at 6:35

answered Feb 19, 2024 at 0:03

NeoZoom.lua

2,9814 gold badges42 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ivl Over a year ago

I have and it had not solved the problem. I solved it by changing the way CSS is imported for every file.

NeoZoom.lua Over a year ago

@Ivl You need to name your CSS files as .module.css if you want to use it with namedExport: true. I recommend you to try it again.

Ivl Over a year ago

I will give it a try, I did not try that, thanks!

Collectives™ on Stack Overflow

Export errors while exporting CSS using Webpack v5

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related