Using it with react universal and css-modules about babel-plugin-webpack-loaders

[istarkov]

I'm not sure about your config, are you sure that client ant server config shares the same properties for css-modules
https://github.com/istarkov/babel-plugin-webpack-loaders/blob/master/examples_webpack_configs/lib.webpack.config.js#L27

I talk about localIdentName=[name]__[local]--[hash:base64:5]

[primozs]

Its the same config but resulting hash is different.

var cssLoaders = [
  'style-loader',
  'css-loader?minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
  'autoprefixer-loader?browsers=last 2 version'
];

Its logical since in my case there are two processes generating the code. webpack for client and babel for server. One solution would be to remove hash, but I am wandering if there is some nicer option.

[istarkov]

IMHO hash must depends on path and content and not depends on what process generates the code.

So the problem if it exists is here https://github.com/webpack/css-loader/blob/6ade74035c845978e3cf4026bdacb829fcf300d7/lib/processCss.js#L169

So you need to create error test example and then I could investigate what the problem is, or check what differs in that code line by yourself.

[nkbt]

@primozs to be completely consistent I would just remove hash part for the moment in your case. [name]__[local] usually gives enough uniqueness

[primozs]

@nkbt thx

[istarkov]

@primozs I still think you do something wrong, I just added example
please clone this project and run commands below, and look that client and server builds has the same classnames.

npm install
npm run build
npm run example-build
./node_modules/.bin/webpack --config ./examples_webpack_configs/client.webpack.config.js

Server build is placed at ./build/myCoolLibrary
Client build is placed at ./build/myCoolLibrary2

Classnames with hashes are same.

[primozs]

@istarkov thank you for example, it does work like you said.

[MoOx]

For my concern, I am having the same hash from client and server. But my current issue is that on the client, style-loader is not doing its job anymore and does not introduce the styles... I have tried with or without ExtractTextPlugin, same result (no styles). I got the classes right tho.

Here are my config

webpack.config.babel.js (common)

import path from "path"
import webpack from "webpack"
import ExtractTextPlugin from "extract-text-webpack-plugin"

import config from "./statinamic.config.js"

export default {
  module: {
    loaders: [
      //
      // statinamic requirement
      //
      {
        test: /\.md$/,
        loader: "statinamic/lib/md-collection-loader"
      },
      {
        test: /\.css$/,
        // loader: ExtractTextPlugin.extract(
        //   "style-loader",
        loader:
          "style-loader" +
          "!" +
          "css-loader" +
            "?modules"+
            "&localIdentName=[path][name]--[local]--[hash:base64:5]" +
          "!" +
          "postcss-loader",
        // ),
      },
      {
        test: /\.(html|ico|jpe?g|png|gif)$/,
        loader: "file-loader" +
          "?name=[path][name].[ext]&context=" +
          path.join(config.cwd, config.destination),
      },
    ],
  },

  postcss: () => [
    require("stylelint")(),
    require("postcss-cssnext")({ browsers: "last 2 versions" }),
    require("postcss-browser-reporter")(),
    require("postcss-reporter")(),
  ],

  /**
   * ******************
   *
   * ↓ HANDLE WITH CARE ↓
   *
   * *******************
   */
  plugins: [
    // new ExtractTextPlugin("[name].css", { disable: config.dev }),
    new webpack.DefinePlugin({ "process.env": { NODE_ENV: JSON.stringify(
      config.production ? "production" : process.env.NODE_ENV
    ) } }),

    ...config.production && [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false,
        },
      }),
    ],
  ],

  output: {
    libraryTarget: "commonjs2", // static

    path: path.join(config.cwd, config.destination),
    publicPath: config.baseUrl.path,
  },

  resolve: {
    extensions: [ ".js", ".json", "" ],
    root: [ path.join(config.cwd, "node_modules") ],
  },
  resolveLoader: { root: [ path.join(config.cwd, "node_modules") ] },
}

webpack.config.client.babel.js (client, that extends common)

import path from "path"

// import config from "./statinamic.config.js"
import webpackConfig from "./webpack.config.babel.js"

export default {
  ...webpackConfig,
  module: {
    ...webpackConfig.module,
    loaders: [
      ...webpackConfig.module.loaders,
      {
        test: /\.json$/,
        loader: "json-loader",
      },
      {
        test: /\.js$/,
        loaders: [
          "babel-loader",
          "eslint-loader?fix",
        ],
        exclude: /node_modules/,
      },
    ],
  },

  /**
   * ******************
   *
   * ↓ HANDLE WITH CARE ↓
   *
   * *******************
   */

  output: {
    ...webpackConfig.output,

    libraryTarget: "var",
    filename: "[name].js",
  },

  entry: {
    "statinamic-client": path.join(__dirname, "scripts", "index-client"),
  },
}

Any idea? Not that my server is a development server so both server config and client config are used in the same process (my server use webpack-dev-middleware to launch/watch/rebuild the client script).

[MoOx]

Note that with ExtractTextPlugin enabled it's still disabled due to my config.dev flag.
@istarkov I saw in the code that you make different things when ExtractTextPlugin is here and when it's not. Did you handle the case where ExtractTextPlugin is here but disabled?

[istarkov]

Can't get the question, do you use this plugin for client builds? It's prohibited by documentation https://github.com/istarkov/babel-plugin-webpack-loaders#warning
If not how does this plugin can affect style-loader on client side?

[MoOx]

OH. Shit. I didn't think about the fact that babel is going to use this module anyway since the NODE_ENV is global to the process.
I need to find a way to enable this babel plugin for my server but not for the webpackDevMiddleware.
Is there any other way than using the NODE_ENV to enable this plugin?

[istarkov]

Good question, let me think some time

[istarkov]

I think you can pass to devMiddleware config, babel-loader
with query property where you can redefine plugins.
I'm not sure, but I think that query params has a priority over .babelrc file

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {
      presets: ['react', 'es2015'],
      plugins: ['transform-runtime']
    }
  }

[MoOx]

Yeah that's what I am going to try. But I think babel merge rc and other config. I will check babel source to see and report what I found here.

[MoOx]

It seems there is a "babelrc" option that I can set to false. I will try that.

[MoOx]

I successfully did what I want with this horrible config

        loaders: [
          "babel-loader" +
          "?" + JSON.stringify({
            babelrc: false,
            ...pkg.babel,
            env: {}, // no env!
          }),
          "eslint-loader?fix",
        ],
// pkg is my package.json content

[istarkov]

Cool, I havent knew about env prop. Thank you!

[istarkov]

I so tired of configs, so I moved in library development on kotatsu as like here