Export warnings while exporting CSS using Webpack 5

[Nblue-dev0]

Export warnings while exporting CSS using Webpack 5

[alexander-akait]

Please use:

{
          test: /\.(s[ac]|c)ss$/i,
          use: [
            { loader: MiniCssExtractPlugin.loader },
            {
                loader: "css-loader",
                options: {
                    modules: {
                        namedExport: true
                    }
                }
            },
            "postcss-loader",
            "sass-loader"
          ],
        },

named export is not enabled by default right now (will be in the next major release)

[Nblue-dev0]

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

[Nblue-dev0]

In the repo I provided there is no problem with the build, but in my main project I'm still getting errors in this pattern now,

WARNING in ./src/components/desktop/layout/PortalNav.js 120:15-32
export 'default' (imported as 'formStyles') was not found in '../../../css/form.css' (possible exports: active, alert, badge, bar, button, buttonFaded, buttonGroup, buttonIcon, buttonPrimary, buttonPrimaryOutline, buttonSecondary, buttonSecondaryOutline, buttonSmall, buttonSuccess, check, danger, dropButton, dropdown, dropdownItem, dropdownMenu, dropdownMenuRight, fill, formGroup, hidePart, icon, image, info, input, invalidInput, invalidLabel, muted, part, poll, popupTransition, progress, small, success, validInput, validLabel, warning)
 @ ./src/util/components/RouteLayout.js 9:0-66 19:40-49
 @ ./src/router.js 4:0-56 204:39-50 209:39-50 214:39-50 219:39-50 224:39-50 229:39-50 234:39-50 239:39-50 244:39-50 249:73-84 254:73-84 259:39-50 264:73-84 269:39-50 274:39-50 279:73-84 287:39-50 292:39-50 297:39-50 302:39-50 307:39-50 312:39-50 317:39-50
 @ ./src/index.js 8:0-30 31:83-89

Here is my full Webpack Config file:
https://gist.github.com/Nblue-dev0/6851446f354867be7c884ae5f39f5be3

[alexander-akait]

It means you have mixed default and named exports, there is a good error message how to fix it

[alexander-akait]

Also check it https://gist.github.com/Nblue-dev0/6851446f354867be7c884ae5f39f5be3#file-webpack-config-js-L54