Isomorphic react support

[Deathsteps]

I'm trying to use it in my isomorphic react project. But I got a error when I require a jsx file.

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. See the example in README: https://github.com/gaearon/react-transform-hmr
    at proxyReactComponents (/Users/xujie/Documents/Github/FTravel/node_modules/react-transform-hmr/lib/index.js:51:11)
    at Object.<anonymous> (/Users/xujie/Documents/Github/FTravel/public/js/components/Root.jsx:47:59)
    at Module._compile (module.js:425:26)
    at loader (/Users/xujie/Documents/Github/FTravel/node_modules/babel-register/lib/node.js:130:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (/Users/xujie/Documents/Github/FTravel/node_modules/babel-register/lib/node.js:140:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (app.js:5:20)

Seems like, babel cant figure out whether the file is required in the server side or not. So it apply the react-transform-hmr on every jsx file.

Any workarounds to solve my problem?

[olegakbarov]

What are the contents of your .babelrc and npm scripts?

[Deathsteps]

.babelrc:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      "plugins": [
        ["react-transform", {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals": ["module"]
          }, {
            "transform": "react-transform-catch-errors",
            "imports": ["react", "redbox-react"]
          }]
        }]
      ]
    }
  }
}

npm scripts:

"scripts": {
    "start": "node ./bin/www",
    "test": "mocha"
  }

I just set up an express server with a webpack-dev-middleware in the start script.

I built the configuration based on gaearon's react-transform-boilerplate.

[carloscuatin]

not use babel-plugin-react-transform in .babelrc. use config in webpack.config.js
example

module: {
    loaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel',
        include: path.join(__dirname, 'src'),
        query: {
          plugins: [
            ["react-transform", {
              transforms: [{
                transform: "react-transform-hmr",
                imports: ["react"],
                locals: ["module"]
              }, {
                "transform": "react-transform-catch-errors",
                "imports": ["react", "redbox-react"]
              }]
            }]
          ]
        }
      }
    ]
  }

it is support in isomorphic apps (y)

[Deathsteps]

@carloscuatin you are brilliant! It works.

[Dakuan]

@carloscuatin thanks! got me up and running too 👍

[gaearon]

Seems like, babel cant figure out whether the file is required in the server side or not. So it apply the react-transform-hmr on every jsx file.

Babel only checks the NODE_ENV. Look at your .babelrc:

{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
      ...

This means the plugin activates when NODE_ENV is equal to development or absent because this is the default.

So the solution is to tell Babel to use another configuration on the server by specifying NODE_ENV.

# any of these will do!

NODE_ENV=production node app.js
NODE_ENV=server node app.js
NODE_ENV=server-development node app.js
NODE_ENV=whatever node app.js

# but not this!
node app.js

We already say this in README but sadly people look over it. :-(

// this plugin will be included only in development mode, e.g.
// if NODE_ENV (or BABEL_ENV) environment variable is not set
// or is equal to "development"

[webxzy]

删除(delete) .bablerc => env =>"development": {"presets": ["react-hmre"]}

{
	"presets": ["react","es2015", "stage-0"],
	"plugins": [],
	"env": {}
}