Cannot read property 'replace' of undefined

[hulkish]

I'm running into the following issue while trying to use babel-plugin-react-css-modules@^1.1.0 with an experimental app I just created via create-react-app:

Failed to compile.

Error in ./src/components/calculator/index.js
Module build failed: TypeError: /Users/myuser/dev/sandbox/my-calculator-react-app/src/components/calculator/index.js: Cannot read property 'replace' of undefined
    at Array.map (native)
    at Array.map (native)
    at Array.map (native)
 @ ./src/containers/app-root/index.js 14:18-50

Here's my babel config:

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "react-css-modules"
  ]
}

Here's my webpack loaders config for my css & scss files:

{
  test: /\.css$/,
  loaders: [
    'style-loader?sourceMap',
    `css-loader?${JSON.stringify({
      importLoaders: 3,
      sourceMap: true,
      modules: true,
    })}`,
    'postcss-loader?sourceMap',
    "resolve-url-loader"
  ]
},
{
  test: /\.scss$/i,
  loaders: [
    'style-loader?sourceMap',
    `css-loader?${JSON.stringify({
      importLoaders: 3,
      sourceMap: true,
      modules: true,
    })}`,
    'postcss-loader?sourceMap',
    "resolve-url-loader",
    'sass-loader?sourceMap',
  ]
}

Here's a snippet of what my calculator.scss file looks like:

.calculator {
  display: block;
  padding: 0.2em 0.4em;
}

Here's my usage within my react component (and where the issue begins to occur):

import React, { Component } from 'react';
import './calculator.scss';// if i comment this line, the error goes away

class Calculator extends Component {
  render() {
    return (
      <div className="calculator">
        hi
      </div>
    );
  }
}

export default Calculator;

You can replicate this issue by cloning my repo: https://github.com/hulkish/calculator-app-exercise-react

Am I doing something wrong?

[ewohlken]

+1

[ksrb]

@hulkish to your babel plugin try adding:

          plugins: [
            [
              'react-css-modules',
              {
                generateScopedName: '[path]___[name]__[local]___[hash:base64:5]' 
              }
            ],
          ]

And the corresponding loader for scss.

      {
        test: /\.scss$/,
        loaders: [
          'style?sourceMap',
          'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
          'resolve-url',
          'sass?sourceMap'
        ]
      }

[ksrb]

@hulkish if that doesn't work take a look at a test project I setup that works.

[xDae]

Im having same problems described 🤕

[ewohlken]

Thanks @ksrb

I was able to get this working by adding the generateScopedName settings to my .babelrc

{
  "presets": [
    "es2015",
    "stage-0",
    "react",
    "react-hmre"
  ],
  "plugins": [
    "transform-runtime",
    "react-hot-loader/babel",
    ["react-css-modules", {
       "generateScopedName": "[path]___[name]__[local]___[hash:base64:5]"
    }]
  ],
}

[gajus]

Is this still an issue in v1.1.1?

If yes, can you please raise a PR with a failing test case?

[trodrigues]

I'm using 1.2.0 and with the setup @ksrb mentioned above this works fine. However I was seeing this issue before I set up the plugin with this additional tweak in the plugin config.

[theredspoon]

What does generateScopedName do? Is it creating a locally scoped name for the CSS class in the same way as css-loader's "localIdentName" property does? If so, why are they duplicated?

[gajus]

What does generateScopedName do? Is it creating a locally scoped name for the CSS class in the same way as css-loader's "localIdentName" property does? If so, why are they duplicated?

https://github.com/gajus/babel-plugin-react-css-modules#configuration

[gajus]

I'm using 1.2.0 and with the setup @ksrb mentioned above this works fine. However I was seeing this issue before I set up the plugin with this additional tweak in the plugin config.

Thank you