Webpack 4 css modules TypeError Cannot read property context of undefined

0 votes

I just upgraded to webpack 4. I use css modules.

ERROR:

ERROR in ./client/src/common/accordian-component/accordian.css (./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/lib??ref--5-2!./client/src/common/accordian-component/accordian.css) Module build failed: TypeError: Cannot read property 'context' of undefined at Object. (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:101:57) at Array.map () at Object. (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/loader.js:99:31) at /Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/css-loader/lib/processCss.js:200:3 From previous event: at Promise.then (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/cls-bluebird/lib/shimMethod.js:38:20) at Object.loader (/Users/phillipjones/Workspace/sl_pathfinder/website/node_modules/postcss-loader/lib/index.js:96:6) @ ./client/src/common/accordian-component/accordian.css 2:14-160 21:1-42:3 21:158-42:2 22:19-165 @ ./client/src/common/accordian-component/accordian-item.jsx @ ./client/src/common/accordian-component/all-components.js @ ./client/src/common/accordian-component/accordian-component.jsx @ ./client/src/common/index.js @ ./client/src/views/main-view/all-components.js @ ./client/src/views/main-view/main-view.jsx @ ./client/src/views/index.js @ ./client/src/routes/index.jsx @ ./client/src/App.jsx @ multi ./client/src/App.jsx

webpack.config.js

require('dotenv').config();
const path = require('path');
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const importPlugin = require('postcss-import');
const postcssFunctions = require('postcss-functions')({
  functions: require('./postcss-functions') }); // eslint-disable-line
// const fs = require('fs');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');

const nodeEnv = process.env.NODE_ENV || 'development';
// console.log({ nodeEnv });
let mode = 'production';
if (nodeEnv !== 'production') {
  mode = 'development';
}
// const api_base_url = process.env.API_BASE_URL || 'http://localhost:8000/api';

// Common rules
const rules = [
  {
    test: /\.jsx?$/,
    use: ['babel-loader'],
    include: /(pathfinder-common|src)/,
  },
  {
    test: /\.css$/i,
    include: /client/,
    use: [
      'style-loader',
      { loader: 'css-loader',
        options: {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          camelCase: true,
          localIdentName: '[name]__[local]___[hash:base64:5]',
        },
      },
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            importPlugin(),
            autoprefixer({ browsers: ['last 2 versions'] }),
            postcssFunctions,
          ],
        },
      },
    ],
  },
  {
    test: /\.woff2?/,
    loader: 'url-loader',
    options: {
      name: '[path][name].[ext]?[hash]',
      mimetype: 'application/font-woff',
    },
  },
  {
    test: /\.(jpe?g|gif|svg|ico|ttf|otf|woff|woff2)(\?[a-z0-9=&.]+)?$/i,
    loader: 'url-loader',
    options: {
      name: '[path][name].[ext]?[hash]',
    },
  },

  {
    test: /\.png$/,
    loader: 'url-loader?mimetype=image/png',
    options: {
      name: '[path][name].[ext]?[hash]',
    },
  },
];
Jul 20, 2022 in CSS by Edureka
• 13,620 points
1,128 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
2 answers

Uncaught TypeError: Cannot read property 'setState' of undefined

Use this.delta() = this.delta.bind(this); in place of this.delta. ...READ MORE

answered Aug 22, 2020 in CSS by Abhishek
14,214 views
0 votes
0 answers

What are good uses of the css `content` property?

Because CSS is for display and not ...READ MORE

Jul 18, 2022 in CSS by Edureka
• 13,620 points
184 views
0 votes
1 answer

CSS shadow white line at the end of linear-gradient background

This is a byproduct of the gradient ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
2,373 views
0 votes
1 answer

Why is the CSS border-color inheriting the color property?

An element in CSS can have two ...READ MORE

answered Jun 10, 2022 in CSS by Edureka
• 12,690 points
483 views
0 votes
1 answer

Change color of PNG image via CSS?

The simplest one line that worked for ...READ MORE

answered Jun 1, 2022 in CSS by Edureka
• 12,690 points
5,846 views
0 votes
1 answer

CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

A simple solution is to make the ...READ MORE

answered Jun 21, 2022 in CSS by Edureka
• 12,690 points
3,601 views
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
2,218 views
0 votes
1 answer

Error:setState doesn't update the state immediately

Hello @kartik, The method setState() takes a callback. And ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
4,879 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,880 points
762 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP