Isomorphic react support about babel-plugin-react-transform HOT 7 CLOSED

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)

from babel-plugin-react-transform.

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

from babel-plugin-react-transform.

.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.

from babel-plugin-react-transform.

@carloscuatin you are brilliant! It works.

from babel-plugin-react-transform.

@carloscuatin thanks! got me up and running too 👍

from babel-plugin-react-transform.

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"

from babel-plugin-react-transform.

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

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

from babel-plugin-react-transform.