locals[0] does not appear to be a `module` object...

[micooz]

...../react-transform-boilerplate/node_modules/react-transform-hmr/lib/index.js:51 throw new Error('locals[0] does not appear to be a module object with Hot Module ' + 'replacement API enabled. You should disable react-transform-hmr in ' + 'production by using env section in Babel configuration. See the ' + 'example in README: https://github.com/gaearon/react-transform-hmr');

I'm trying server-side rendering and I use react-transform-hmr to do hot reload, but when I import react components to the script, the error above is thrown.

I followed react-transform-boilerplate and simply add a line to the top of the devServer.js:

var App = require('./src/App');
...

then run the script with babel-node:

"start": "babel-node devServer.js"

and you will see the problem. So how can I use this plugin to do server-side rendering?

[gaearon]

Don't enable the react-transform plugin when rendering on the server. It is only meant for the client environment.

[micooz]

Got it. Thank you @gaearon. I think I have misunderstood something...

[mattkrick]

Just upgraded to the beta & the same error started throwing for me. Is there any other workaround? Perhaps a soft warning instead of error? In v1, instead of using ejs or sending a static string or .html I made a string out of a react component. As a workaround I can do a series of string.replace, but it's not very pretty.

[gaearon]

Is there any other workaround?

Have you tried the solution described in the error message?

[mattkrick]

I copied the .babelrc from the react-transform boilerplate & explicitly set NODE_ENV=development, but still no luck.

[andrewcoelho]

My experience is the same as @micooz. You say "Don't enable the react-transform plugin when rendering on the server". Does this mean the plugin can't be used with a universal app?

[CrocoDillon]

I moved the react-transform stuff from .babelrc to webpack.config.js as query.

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    plugins: [
      ['react-transform', {...}]
    ]
  }
}

That way you can still use react-transform. If someone knows a better solution please do tell. I’d have liked keeping that in .babelrc as much as possible.

[micooz]

@andrewcoelho Yes, it can. Just do as @CrocoDillon said. Here is an another example: https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js#L67

Notice that 'babel?' + JSON.stringify(babelLoaderQuery) in webpack configuration avoids react-transform working at server side.

You can use piping or other techniques to do server side reload.

[mxstbr]

I'm getting this error on the client side after building my application and uploading it to my web server. Works perfectly fine in dev mode, but throws the error when deployed.

This is the .babelrc file, and here is the deployed website. (Won't show anything because of the error)

I am using env in the .babelrc, and I've tried moving the config to the package.json and using query in the webpack config like @CrocoDillon, but that didn't solve the problem. Any ideas?

EDIT: This is the command that's run when building: NODE_ENV=production && webpack --config webpack.prod.config.js --progress --colors -p, I've also tried setting BABEL_ENV, but that didn't work either.

[gaearon]

@mxstbr Are you sure && is needed in this command?

[mxstbr]

@gaearon Good tip, but that didn't work, still getting the same error.

[CrocoDillon]

@mxstbr, how do you start your server in production?

[gaearon]

@mxstbr

It worked for me with your repo. Are you sure you're not hitting a cached JS file?

NODE_ENV=production webpack --config webpack.prod.config.js --progress --colors -p

builds a file with no mentions of react-transform in it.

[mxstbr]

@CrocoDillon npm run build, which creates a build folder, the contents of which I upload to my build server.

@gaearon That is interesting! Does it work for you on http://loginflow.mxstbr.com ?

[CrocoDillon]

@mxstbr for me it doesn't work either on your live version, so if it's cache it might be CloudFlare's. See headers:

Cache-Control:public, max-age=2592000
CF-Cache-Status:HIT

[gaearon]

@mxstbr It's probably cached.. somewhere. Or your upload script might have a bug. I get a different JS file when I build locally.

[CrocoDillon]

On-topic, for SSR I found an alternative to moving all transform related stuff from .babelrc to webpack.config.js, which is ignoring the .babelrc file when using babel-register (perhaps there is a similar option in babel-node).

You can see an example here, but sadly it's currently ignored. Hope the team behind Babel accepts my PR which works for me, babel/babel#3168.

[mxstbr]

@CrocoDillon it was the CloudFlare cache, and @gaearon's tip of removing the && in the command fixed the problem!

Thanks so much for the help! :+1:

[Dindaleon]

I am having the same issue since updating babel to version 6. The config inside webpack is being ignored and putting it inside a .babelrc throws that error.

throw new Error('locals[0] does not appear to be a `module` object with Hot Module ' + 'replacement API enabled. You should disable react-transform-hmr in ' + 'production by using `env` section in Babel configuration. See the ' + 'example in README: https://github.com/gaearon/react-transform-hmr');
^

Error: locals[0] does not appear to be a `module` object with Hot Module replacement API enabled. You should disable react-transform-hmr in production by using `env` section in Babel configuration.

[gaearon]

1.x won't work with Babel 6, this is expected. Please use 2.0 beta. It's on NPM.

[gaearon]

Meaning 2.0 of Babel plugin. Not this repo.

[hnqso]

For anyone using Z or Fish shell. For some reason passing the 'process.env.NODE_ENV': JSON.stringify('production') in the webpack isn't working for me. I got it working by running env NODE_ENV="production" webpack --confing webpack.config.production.js".

[gaearon]

I don’t see anything actionable here so closing.

[gaearon]

None of this should matter in React Hot Loader 3. I know React Transform has been a configuration hell; hopefully, this should be solved. See https://github.com/gaearon/react-hot-boilerplate/pull/61 if you’d like to try it!

[PhoenixFEC]

Don't enable the react-transform plugin when rendering on the server. It is only meant for the client environment.

@gaearon I want to disable it, but I don't know how to try it. I holp you help.

I have a .babelrc file, and content like this: { "presets": ["react", "es2015"], "env": { "development": { "presets": ["react-hmre"], "plugins": [["react-transform", { "transforms": [{ "transform": "react-transform-hmr", "imports": ["react", "react-dom"], "locals": ["module"] }] }]] } } }

Best Regards.

[gaearon]

@PhoenixFEC Have you looked into this solution? https://github.com/gaearon/react-transform-hmr/issues/38#issuecomment-164359991

[PhoenixFEC]

@gaearon Yes, and I try to manually changed env.development to evn.production in .babelrc yet. successful. I think... Does it have otherwise dynamic way to configure in code. And I try to set some plugin like below, but I failed.

new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') }

})

I did. @gaearon Thank you very much. Through a variable to configure development or production environment module loaders

[gaearon]

@PhoenixFEC Anyway, I recommend you to stop using react-transform and look into using React Hot Loader 3 instead.