locals[0] does not appear to be a module object with Hot Module replacement API enabled

[bkniffler]

Hi,
I've installed 1.0.0, I've copy&pasted .babelrc from the examples and I'm using babel-loader with webpack as adviced, all in my dev environment, but I'm getting said error as soon as I'm running the whole thing. Whereas, the previous version worked.

Is there anything not yet documented I'm missing?

[bkniffler]

I just discovered the bootstrap you provided https://github.com/gaearon/react-transform-boilerplate and it seems to work. I'll check whats different on my end.

[bkniffler]

Seems like my https://github.com/reactjs/express-react-views templates are causing these errors with react-transform-hmr.

[gaearon]

Please provide a project reproducing the problem.
Otherwise it's hard to guess why module.hot isn't available.

[gaearon]

One thing to look out for is that you shouldn't transform node_modules with babel-loader.
Transform just your code with include option on the loader.

[catamphetamine]

I'm having this too.
"react-transform-webpack-hmr" doesn't have it though.

[bkniffler]

Its because of the recent changes in version 1.0.0. And for me it seems like the problem appears since, as @gaearon supposed, I got files in custom modules that are transformed by babel-loader.

[MrEfrem]

@Gaeron i have same error but completed your recommendations.

[MrEfrem]

Repo:

https://github.com/MrEfrem/react-redux-starter-kit

Execute app:

npm run compile && npm run server:start

Out in console:

...
[2] /home/user/react-redux-starter-kit/dist/server/index.js:1269
[2] k like React.');}if(!hot || typeof hot.accept !== 'function'){throw new Error(
[2]                                                                     ^
[2] 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
[2]     at proxyReactComponents (/home/user/react-redux-starter-kit/dist/server/index.js:4574:12)
[2]     at Object.<anonymous> (/home/user/react-redux-starter-kit/dist/server/index.js:14774:65)
[2]     at Object.module.exports.Object.defineProperty.value (/home/user/react-redux-starter-kit/dist/server/index.js:14827:31)
[2]     at __webpack_require__ (/home/user/react-redux-starter-kit/dist/server/index.js:21:30)
[2]     at Object.module.exports.Object.defineProperty.value (/home/user/react-redux-starter-kit/dist/server/index.js:14918:27)
[2]     at __webpack_require__ (/home/user/react-redux-starter-kit/dist/server/index.js:21:30)
[2]     at Object.<anonymous> (/home/user/react-redux-starter-kit/dist/server/index.js:14685:16)
[2]     at __webpack_require__ (/home/user/react-redux-starter-kit/dist/server/index.js:21:30)
[2]     at Object.<anonymous> (/home/user/react-redux-starter-kit/dist/server/index.js:71:19)
[2]     at __webpack_require__ (/home/user/react-redux-starter-kit/dist/server/index.js:21:30)
[2] npm
[2]  
[2] ERR! Linux 3.16.7-24-desktop
[2] npm
[2]  ERR! 
[2] argv "/usr/bin/node" "/usr/bin/npm" "run" "server:start" "--" "--nw"
[2] npm ERR!
[2]  node v0.12.7
[2] npm ERR! npm  v2.11.3
[2] npm ERR! code ELIFECYCLE
[2] npm ERR!
[2]  [email protected] server:start: `node --harmony bin/server "--nw"`
[2] npm
[2]  ERR! Exit status 1
[2] npm ERR!
...

[gaearon]

Don't enable the transform in the Node server build. Most other React Transforms don't expect to be invoked on server either so it's good to fail early.

[catamphetamine]

@gaearon Why can't one use babel in webpack configuration?
Is it prohibited somewhere?

[gaearon]

I'm not sure I understand the question.

You can configure Babel plugin either in .babelrc with env option (corresponds to BABEL_ENV or NODE_ENV, whichever is set), or in your build tool setup (for example babel-loader for Webpack lets you pass configuration as an object to "query" field).

[catamphetamine]

my locals array looks like this:

@@@@@@@@@@@@ [ { id: 'G:\\work\\cinema\\code\\client\\html.js',
    exports: { __esModule: true },
    parent:
     { id: 'G:\\work\\cinema\\code\\server\\webpage rendering.js',
       exports: [Object],
       parent: [Object],
       filename: 'G:\\work\\cinema\\code\\server\\webpage rendering.js',
       loaded: false,
       children: [Object],
       paths: [Object] },
    filename: 'G:\\work\\cinema\\code\\client\\html.js',
    loaded: false,
    children: [ [Object], [Object], [Object], [Object] ],
    paths:
     [ 'G:\\work\\cinema\\code\\client\\node_modules',
       'G:\\work\\cinema\\code\\node_modules',
       'G:\\work\\cinema\\node_modules',
       'G:\\work\\node_modules',
       'G:\\node_modules' ] } ]

Is it good?

[catamphetamine]

It's the error i get when running the server.
I guess hot module replacement is not intended for use on the server.
But .babelrc should be uniform therefore it's a single file.
You should fix this plugin to not run on the server while there is NODE_ENV = development

[catamphetamine]

My solution is as follows:

{
    "stage"    : 0,
    "optional" : "runtime",
    "loose"    : "all",
    "plugins":
    [
        "typecheck"
    ],
    "env":
    {
        "development/client":
        {
            "plugins":
            [
                "typecheck",
                "react-transform"
            ],
            "extra":
            {
                "react-transform":
                [{
                    "target"  : "react-transform-hmr",
                    "imports" : ["react"],
                    "locals"  : ["module"]
                }]
            }
        }
    }
}

configuration.plugins = configuration.plugins.concat
(
    // environment variables
    new webpack.DefinePlugin
    ({
        'process.env':
        {
            NODE_ENV: JSON.stringify('development'),
            BABEL_ENV: JSON.stringify('development/client')
        },
...

With this configuration it works, but they've made a mistake by using JSON instead of Javascript in their .babelrc file.

[gaearon]

With this configuration it works, but they've made a mistake by using JSON instead of Javascript in their .babelrc file.

Maybe, but that would be up to Babel. Maybe you can file an issue there (unless one already exists).

[catamphetamine]

@gaearon Nah, they obviously won't listen to a stranger with no history of commits. The thing is Babel requires Node.js so why not make the configuration non-declarative like they did in Webpack.

By the way, I didn't find a way to stop Babel from loading the default .babelrc, so my approach with custom .babelrc.server didn't work.
The custom BABEL_ENV is the only one that worked.

[gaearon]

If you use Webpack on client, you can put React Transform configuration there. For example see this React Native example using babel-loader's configuration query field. This way you can share .babelrc between client and server.

[catamphetamine]

@gaearon hmmm, actually, that would be a better solution. I'll use it.

[aulizko]

That's really strange.
After running some test cases it looks like this error appears wherever I use any babel-related stuff on the server, like require('babel/register'). I didn't even start nor webpack-dev-server nor webpack-dev-middleware + webpack-hot-middleware, just bare express instance that is intended to run React on the server-side.
It's really confusing that example at Readme recommends not-the-best(bulletproof?) way.
Anyway, @halt-hammerzeit, @gaearon, thanks for discussion, I have everything up and running now.
I suggest to add some clarification about how to use this plugin with projects that heavily rely on server-side (I mean universal apps here too).

[catamphetamine]

@aulizko yes, that's a new feature of babel so I recommend removing .babelrc way from the README
http://babeljs.io/blog/2015/03/31/5.0.0/#babelrc

[gaearon]

It's really confusing that example at Readme recommends not-the-best(bulletproof?) way.

You can always make a PR to recommend the right way. 😉
Open source projects need help, especially in documentation.

[catamphetamine]

@gaearon but there's always the project owner factor where the project owner should say "yes, do it" otherwise noone's gonna merge your PR.
so I woudn't submit such a PR blindly.
if the project owner says "aaah, that's actually a good idea, username!" only then a stranger should start thinking about contributing.

[catamphetamine]

@gaearon by the way you've got a bunch of cool projects here. not Holowaychuk level of course but still a lot of development efforts. so that you know we appreciate your contribution to the progression of society.

[ferdinandsalis]

@gaearon I think you are awesome. Whatever level that is.

[gaearon]

I believe the change itself is for the better so that's why I released it. However configuring Babel is something you know better than me: you have real apps with different requirements and you are a better judge of how to make this change work in your project and what best practices are. That's what I'm trying to say: I can't document the best approach because I don't know it. If you know a better approach than the docs say, submit a PR and let's discuss it.

[catamphetamine]

okay, I propose some kind of this textual addition to the readme:

## React

If you're rendering React both on client and server then you should add `react-transform` plugin to your `babel-loader` configuration
...
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        stage: 0,
        plugins: []
      }
    },
    ...]
  },
...

// enable React Hot loader
if (process.env.HOT) {
  config.module.loaders[0].query.plugins.push('react-transform');
  config.module.loaders[0].query.extra = {
    'react-transform': [{
      target: 'react-transform-hmr',
      imports: ['react'],
      locals: ['module']
    }]
  };
}

Otherwise, if you're not using React on server side, you can just edit your .babelrc to include extra.babel-plugin-react-transform.
...

That's my idea of updating the Readme but most likely you'll want to change this somehow.

[creeperyang]

Things changed with babel6. I still have this problem with [email protected], [email protected] and [email protected].

[gaearon]

Things changed with babel6. I still have this problem with [email protected], [email protected] and [email protected].

What exactly changed? The problem is that you're either enabling the transform in environments other than development, or you are compiling for production with a dev/empty environment. This was the cause of the problem before, and it is the cause of the problem now. How did this change?

[creeperyang]

@gaearon wow, I have this problem because I comment // new webpack.HotModuleReplacementPlugin() 😂 So it's all right besides query: {stage:0, xxx} is not valid setting with babel6.

However, I found my app wont update even there is log:

[WDS] Hot Module Replacement enabled.
[WDS] App updated. Recompiling...
[WDS] App hot update...
[WDS] App updated. Recompiling...
[WDS] App hot update...

[hiddaorear]

Hi, try this:
webpack.config.js:
devServer: {
historyApiFallback: true,
inline: true,
hot: true,
progress: true
}
and package.json:
"scripts": {
"dev": "webpack-dev-server --progress --hot --profile --colors"
}

hot is the key.

[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 gaearon/react-hot-boilerplate#61 if you’d like to try it!

[guerjon]

I had this same problem in react-native, i can't erase the .babelrc because use the "presets": ["react-native"], and his configuration, this only happend when i desactive JS Dev Mode in Dev Settings, i don't want change node_modules carpets, any idea?

[guyca]

fwiw - I had this issue in react-native project, I disabled JS Dev Mode in debug preferences which caused this 👍

[yash2code]

@guyca where cani find debug prefrernces?

[xerotolerant]

@yash2code It is at the top of the Dev settings menu when you shake the device.