Module build failed: TypeError: Cannot read property '0' of undefined

[AlexanderTserkovniy]

Hi guys,

So as probably most of us, I have this issue in prod mode. Here are details:

Run script: NODE_ENV=production webpack -p

Output:

Requiring webpack production mode
Hash: 4d2418c5e837c9e2db07
Version: webpack 2.2.0-rc.3
Time: 15781ms
[../node_modules/react-css-modules/dist/index.js] ../~/react-css-modules/dist/index.js 2.42 kB {0} [built]
[../node_modules/react-dom/index.js] ../~/react-dom/index.js 59 bytes {0} [built]
[../node_modules/react-dom/lib/ReactDOM.js] ../~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
[../node_modules/react-hot-loader/index.js] ../~/react-hot-loader/index.js 41 bytes {0} [built]
[../node_modules/react-hot-loader/lib/index.js] ../~/react-hot-loader/lib/index.js 1.57 kB {0} [built]
[../node_modules/react/lib/React.js] ../~/react/lib/React.js 2.69 kB {0} [built]
[../node_modules/react/lib/ReactDOMFactories.js] ../~/react/lib/ReactDOMFactories.js 5.53 kB {0} [built]
[../node_modules/react/lib/ReactElement.js] ../~/react/lib/ReactElement.js 11.2 kB {0} [built]
[../node_modules/react/lib/ReactPropTypes.js] ../~/react/lib/ReactPropTypes.js 15.8 kB {0} [built]
[../node_modules/react/react.js] ../~/react/react.js 56 bytes {0} [built]
[../node_modules/tms-dashboard-core/lib/appMain/index.js] ../~/tms-dashboard-core/lib/appMain/index.js 1.81 MB {0} [built]
[../node_modules/tms-dashboard-core/lib/public/styles.js] ../~/tms-dashboard-core/lib/public/styles.js 399 kB {0} [built]
[../node_modules/xhr/index.js] ../~/xhr/index.js 7.17 kB {0} [built]
[./src/index.js] ./src/index.js 992 bytes {0} [built]
[./src/styles/App.css] ./src/styles/App.css 2.4 kB {0} [built]
    + 335 hidden modules

ERROR in ../~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!../~/postcss-loader!../~/extract-text-webpack-plugin/loader.js?{"omit":0,"remove":true,"notExtractLoader":"style-loader"}!../~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!../~/resolve-url-loader!../~/postcss-loader!./src/styles/App.css
Module build failed: TypeError: Cannot read property '0' of undefined
    at Parser.decl (/Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/node_modules/postcss/lib/parser.js:203:25)
    at Parser.other (/Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/node_modules/postcss/lib/parser.js:170:18)
    at Parser.loop (/Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/node_modules/postcss/lib/parser.js:81:26)
    at parse (/Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/node_modules/postcss/lib/parse.js:26:16)
    at new LazyResult (/Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/node_modules/postcss/lib/lazy-result.js:70:24)
    at Processor.process (/Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/node_modules/postcss/lib/processor.js:117:12)
    at Object.module.exports (/Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/node_modules/postcss-loader/index.js:62:22)
 @ ./src/styles/App.css 4:14-565 13:2-17:4 14:20-571
 @ ./src/components/App.jsx
 @ ./src/index.js
Child extract-text-webpack-plugin:
    [../node_modules/css-loader/index.js?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!../node_modules/resolve-url-loader/index.js!../node_modules/postcss-loader/index.js!./src/styles/App.css] ../~/css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!../~/resolve-url-loader!../~/postcss-loader!./src/styles/App.css 275 bytes {0} [built]
    [../node_modules/css-loader/lib/css-base.js] ../~/css-loader/lib/css-base.js 1.51 kB {0} [built]

npm ERR! Darwin 16.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "wprod"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ELIFECYCLE
npm ERR! jobs-automation-frontend@0.0.7 wprod: `NODE_ENV=production webpack -p`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the jobs-automation-frontend@0.0.7 wprod script 'NODE_ENV=production webpack -p'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the jobs-automation-frontend package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     NODE_ENV=production webpack -p
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs jobs-automation-frontend
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls jobs-automation-frontend
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/oleksandr.tserkovnyi/Projects/jobs-automation-frontend/npm-debug.log

Config file base:

const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    // activate HMR for React
    'react-hot-loader/patch',

    // bundle the client for webpack-dev-server
    // and connect to the provided endpoint
    // 'webpack-dev-server/client?http://localhost:8080',
    'webpack-hot-middleware/client',

    // bundle the client for hot reloading
    // only- means to only hot reload for successful updates
    'webpack/hot/only-dev-server',


    // the entry point of our app
    './src/index.js'
  ],
  output: {
    // the output bundle
    filename: 'main.js',

    path: resolve(__dirname, '../', 'app', 'dist'),

    // necessary for HMR to know where to load the hot update chunks
    publicPath: '/'
  },

  context: resolve(__dirname, '../', 'app'),

  devtool: 'cheap-module-source-map',

  devServer: {
    // enable HMR on the server
    hot: true,

    // match the output path
    contentBase: resolve(__dirname, '../', 'app', 'dist'),

    // match the output `publicPath`
    publicPath: '/'
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          'babel-loader',
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader?sourceMap',
          'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'postcss-loader',
        ],
      },
    ]
  },

  resolve: {
    extensions: ['.jsx', '.js', '.json', '.css'],
    alias: {
      css: resolve(__dirname, '../', 'app', 'src', 'styles')
    }
  },

  plugins: [
    // new webpack.optimize.OccurrenceOrderPlugin(),

    // enable HMR globally
    new webpack.HotModuleReplacementPlugin(),

    // prints more readable module names in the browser console on HMR updates
    new webpack.NamedModulesPlugin(),
  ]
};

Production extension:

'use strict';

const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack-base.js');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = function(env) {

  // Replace css for production
  const rules = commonConfig.module.rules.slice().map(rule => {
    if (rule.test && rule.test.toString().indexOf('css$') > -1) {
      return {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({
          notExtractLoader: 'style-loader',
          loader: 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!resolve-url-loader!postcss-loader',
        })
      };
    } else {
      return rule;
    }
  });

  const plugins = [
    new ExtractTextPlugin({
      filename: 'main.css',
      allChunks: true
    }),

    new webpack.NoErrorsPlugin()
  ];

  return webpackMerge(commonConfig, {
    entry: './src/index.js',
    devServer: {},
    module: {
      rules
    },
    plugins
  });
};

Could you help me, I rummaged everything...

[michael-ciniawsky]

@AlexanderTserkovniy Could you remove extract-text-pluginand see if it builds without it, there are know issues with webpack 2 atm. Also if I'm not mistaken NODE_ENV=production webpack === webpack -p the -p flag sets NODE_ENV=production to my knowledge

[michael-ciniawsky]

Otherwise please make config as simple as possible and enhance it with e.g webpack-merge gracefully to narrow the issue down.

[AlexanderTserkovniy]

So, when I remove extract-text-plugin the issue is seems to gone, but I am not entirely sure that it does not depend on postcss.

[michael-ciniawsky]

@AlexanderTserkovniy It's an comfirmed issue with extract-text-webpack-plugin && webpack v2 there is already discussion about it in the webpack slack. Bugfix for it will hopefully be released soon. Closing as unrelated to postcss-loader

[AlexanderTserkovniy]

Found solution here if someone still having this problem. Works perfectly!

So my changes looks like this:

  const ExtractTextPlugin = require("extract-text-webpack-plugin");
  module.exports.plugins.push(new ExtractTextPlugin("styles.css"));
  module.exports.module.rules[1] = {
    test: /\.css$/,
    exclude: /node_modules/,
    loader: ExtractTextPlugin.extract({
      fallbackLoader: 'style-loader',
      loader: [
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'postcss-loader'
      ]
    })
  };

Thanks guys!

btw @michael-ciniawsky webpack -p does set the NODE_ENV=production but not for webpack.config.js itself, that's why it have to be explicitly added.

[michael-ciniawsky]

btw @michael-ciniawsky webpack -p does set the NODE_ENV=production but not for webpack.config.js itself, that's why it have to be explicitly added.

I see 😛 likely never had an issue until now 🙏

So the solution is to use query params/strings for now instead of the 'new' plain JS variant in loader options? postcss.config.js is loaded and applied ?