8

I'm using a single .babelrc config and using it in webpack.config.client.js and webpack.config.server.js with babel-loader.

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "debug": false,
        "modules": false,
        "loose": true
      }
    ],
    "@babel/react"
  ],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    },
    "production": {}
  }
}

The problem is, react-hot-loader find it's way into compiled server code. I did some research and I see that babel 7 allows to configure overrides for such case.

I tried to implement it, but the "env" part never gets overridden:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "debug": false,
        "modules": false,
        "loose": true
      }
    ],
    "@babel/react"
  ],
  "env": {
    "development": {
      "plugins": ["react-hot-loader/babel"]
    },
    "production": {}
  },
  "overrides": {
    "include": "./src/server/index.js", // ?
    "env": {
      "development": {
        "plugins": [] 
      }
    }
  }
}

Appreciate any help

yotke
  • 1,170
  • 2
  • 12
  • 26
  • Are you setting the environment somewhere? If so, how. – loganfsmyth Sep 01 '18 at 17:27
  • I set env with dotenv in webpack and server. The env is working. In development, react-hot-loader plugin is in client bundle and server bundle. I'm looking how to remove it from server bundle. – yotke Sep 01 '18 at 17:31

1 Answers1

4

Babel doesn't know anything about your client/server differentiation. Your "include": "./src/server/index.js", check would affect that single file, but not your conceptual server bundle.

Realistically, there are a bunch of ways to do this, but I'll just list a couple to start.

One would be to use env and have 4 instead of 2 (production-client, production-server, development-client, development-server). Then you could do

"env": {
  "development-client": {
    "plugins": ["react-hot-loader/babel"]
  },
}

Alternatively, you could set another environment variable, e.g.

cross-env NODE_ENV=development BUNDLE_NAME=server webpack --config webpack.config.server.js

and rename your config to be a .babelrc.js file, and do

module.exports = {
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "debug": false,
        "modules": false,
        "loose": true
      }
    ],
    "@babel/react"
  ],
  "env": {
    "development": {
      "plugins": 
        process.env.BUNDLE_NAME === "server" 
          ? [] 
          : ["react-hot-loader/babel"]
    },
    "production": {}
  },
};
loganfsmyth
  • 156,129
  • 30
  • 331
  • 251
  • 1
    Thanks, your solution will have to do for now. It would be nice not to introduce 2/4 env variables though, because I build client and server together with a single variable - NODE_ENV. Once I figure out how to use overrides I will update here. – yotke Sep 01 '18 at 19:24
  • What do you mean with a single variable? If you expand the question to elaborate on why my proposals are less than ideal for your case, I can expand my answer with more alternatives. There is an approach that would use `overrides`, but it makes things more complicated in your Webpack config, so I was avoiding it. – loganfsmyth Sep 01 '18 at 20:07
  • Well, my webpack setup is weird and I don't feel like changing it, so I look for lazy solutions. I use 1 babel config for client and server and overrides sounded straight forward, without messing with env or adjust npm tasks. I eventually converted to .babelrc.js and introduced CLIENT=true variable like you said. Not meant to say it's not ideal solution. Thanks for your time – yotke Sep 01 '18 at 21:08