Comments (7)
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.
Related Issues (20)
- Local path as an argument to "transform" does not resolve the path.
- Modify the contents of the function will not be updated.
- Doesn't work with React.PureComponent HOT 1
- Template is not a function
- Deprecated with no alternative? HOT 1
- no release info or changelog for 3.0.0
- `addImport()` is deprecated in Babel 7 HOT 2
- Use without .babelrc HOT 4
- jspm with plugin-babel and react preset: "cannot read property 'transform' of undefined" HOT 1
- React transforms being run on Backbone views HOT 6
- Question: Is it a bad practice to use react-transform for production code? HOT 1
- Transform(s) to strip propTypes and displayName HOT 4
- Ember objects detected as react components HOT 5
- Appears to wrap other functions than createClass() HOT 10
- error when passing properties to createClass() HOT 4
- Future of React Transform HOT 2
- Can we have superClass Regexp matching option , for inheritance ? HOT 2
- undefined value static properties outside class HOT 3
- displayName equals 'Constructor' HOT 8
- static properties are undefined HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from babel-plugin-react-transform.