Reputation: 12455
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