Module names in DOM but no CSS names

[jpaulsen-apixio]

I'm having issues related to a couple of closed issues:

• Instructions to switch from react-css-modules #108
• Modules names added but CSS isn't generated #132

I'm running node version 9.7.1 and webpack 4.2.0.

In the DOM, the style names are being correctly applied, but the styles are not, they seem to have a different name.

Based on the above mentioned issues, I have made sure that my generateScopedName is the same as my localIdentName.

.babel loader config that simulates babelrc
This is due to an issue with the context (apparently will be fixed by babel 7). This gets imported into webpack.config.

const babelLoader = {
  loader: 'babel-loader',
  options: {
    'plugins': [
      'react-hot-loader/babel',
      'transform-runtime',
      'transform-object-rest-spread',
      'transform-class-properties',
      ['react-css-modules',
        {
          context: paths.javascript,
          'generateScopedName': '[name]__[local]___[hash:base64:5]',
          'filetypes': {
            '.scss': {
              'syntax': 'postcss-scss',
              'plugins': ['postcss-nested']
            }
          },
          'exclude': 'node_modules',
          'webpackHotModuleReloading': true
        }
      ]
    ],
    'presets': [
      'env',
      'react',
      'flow'
    ],
    'env': {
      'production': {
        'presets': ['react-optimize']
      }
    }
  }
}

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer')
const paths = require('./webpack/config').paths
const babelLoader = require('./webpack/config').babelLoader

module.exports = function (env, argv) {
  const IS_DEVELOPMENT = (argv.mode === 'development')
  const IS_PRODUCTION = (argv.mode === 'production')

  const extractSass = new ExtractTextPlugin({
    filename: '[name].css',
    allChunks: true
  })

  const getSassRule = () => {
    const autoprefixerOptions = {
      browsers: [
        'last 2 version',
        'ie >= 10'
      ]
    }

    return [
      {
        loader: 'css-loader',
        options: {
          sourceMap: IS_DEVELOPMENT,
          minimize: IS_PRODUCTION,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: IS_DEVELOPMENT,
          plugins: () => [
            autoprefixer(autoprefixerOptions)
          ]
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: IS_DEVELOPMENT }
      },
      {
        loader: 'sass-resources-loader',
        options: {
          // Provide path to the file with resources
          resources: [`${paths.node}/bootstrap/scss/bootstrap.scss`, `${paths.source}/scss/**/*.scss`]
        }
      }
    ]
  }

  return {
    entry: [
      'bootstrap-loader/extractStyles',
      path.join(paths.javascript, 'index.js')
    ],
    devtool: (IS_PRODUCTION) ? false : 'eval-source-map',
    context: paths.javascript,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            'source-map-loader',
            babelLoader
          ]
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader',
              options: { minimize: true }
            }
          ]
        },
        {
          test: /\.scss$/,
          use: (IS_PRODUCTION)
            ? extractSass.extract({
              use: getSassRule()
            })
            : [
              {
                loader: 'style-loader'
              },
              ...getSassRule()
            ]
        },
        {
          test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: 'url-loader?limit=10000'
        },
        {
          test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
          use: 'file-loader'
        },
        {
          test: /\.svg$/,
          use: [
            babelLoader,
            {
              loader: 'react-svg-loader',
              options: {
                svgo: {
                  plugins: [
                    {
                      removeTitle: true
                    }
                  ],
                  floatPrecision: 2
                }
              }
            }
          ],
          include: paths.svg
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: 'client/assets/[name]-[hash].[ext]'
              }
            }
          ]
        }
      ]
    },
    plugins: [
      extractSass,
      new HtmlWebPackPlugin({
        title: 'Apixio',
        template: path.join(paths.source, 'index.html'),
        filename: 'index.html',
        minify: {
          collapseWhitespace: true,
          minifyCSS: true,
          minifyJS: true,
          removeComments: true,
          useShortDoctype: true
        }
      }),
      new webpack.ProvidePlugin({
        'window.Tether': 'tether'
      }),
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: JSON.stringify(argv.mode)
        }
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: IS_PRODUCTION ? paths.build : paths.source,
      historyApiFallback: true,
      port: 3000,
      compress: IS_PRODUCTION,
      inline: IS_DEVELOPMENT,
      hot: IS_DEVELOPMENT,
      host: '127.0.0.1',
      disableHostCheck: true, // To enable local network testing
      overlay: true,
      open: true,
      stats: {
        assets: true,
        children: false,
        chunks: false,
        hash: false,
        modules: false,
        publicPath: false,
        timings: true,
        version: false,
        warnings: true,
        colors: true
      }
    }
  }
}

I've also made sure to single quote the naming as mentioned might be a problem. I've also noticed that my stylesheets seem to incorporate the full bootstrap for each module. I still can't seem to get this to work. Here is my repo: https://github.com/yazdog8/launchpad

[jpaulsen-apixio]

Closing the issue. Found out it was not pulling the correct babelrc settings. Once that was fixed it worked properly.