whitebear
whitebear

Reputation: 12455

Update the css-loader v7, and imported module became undefined

I have script like this and it works well until today,

import styles from '../css/basic-styles.module.css';
 <div className={styles.wrapper}

However, suddeenly this code shows the error on console,

Maybe It's related with the updating some library by ncu???

"css-loader": "^6.7.3", ->     "css-loader": "^7.1.0",

then error is

TopPage.js:2811 Uncaught TypeError: Cannot read properties of undefined (reading 'wrapper')
    at TopPage (TopPage.js:2811:86)

So I guess it means import module doesn't work correctly.

Now I add the code and test,

import styles from '../css/basic-styles.module.css';
console.log(styles) // undefined.

I have webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
   entry: "./src/index.js",
   output: {
       path: path.resolve(__dirname, "./static/frontend"),
       filename: "[name].js",
   },

   module: {
       rules: [
           {
               test: /\.js$/,
               exclude: /(node_modules|bower_components)/,
               use: {
                   loader: "babel-loader",
                   options: {
                    presets: ['@babel/preset-react', '@babel/preset-env']
                  }
               },
            },
            {
                test: /\.css/,
                use: [
                    "style-loader",
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|fbx|obj|mtl)/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            //[name]は画像名、[ext]は拡張子
                            name: 'images/[name].[ext]'
                        }
                    }
                ]
            }
       ],
   },
   optimization: {
       minimize: true,
   },
   plugins: [
       new webpack.DefinePlugin({
           'process.env.NODE_ENV' : JSON.stringify('development')
       })
   ]
}

my ces is like this below.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
 
}

h1 {
  text-align: center;
  margin: 2rem 0 4rem 0;
}
.btnSeparator{
  height:30px
}

.overlayConfirmAlert{
  z-index: 10001;
}
.drawingSuggests{
  overflow-y:auto;
 
  height:calc(100vh - 335px);
}

Where should I check?

Upvotes: 0

Views: 15

Answers (0)

Related Questions