Comments (19)
+1. My PropType warning also come through as 'ProxyClass' instead of the actual component
from babel-plugin-react-transform.
Actually, this is resolved if I include the display-name plugin before react-transform plugin.
from babel-plugin-react-transform.
Actually, this is resolved if I include the display-name plugin before react-transform plugin.
Yes, this is the intended usage. PR to document this is appreciated.
from babel-plugin-react-transform.
If anyone else runs into this, I was getting an error about conflicting plugins because babel was loading the react-display-name
plugin automatically. Specifying it manually before react-transform
in my .babelrc
caused it to be loaded twice. I found in the babel docs you can tell plugins when to run so by specifying:
plugins: ["react-transform:after"]
I was able to make everything run in the correct order and fixed the conflict error.
from babel-plugin-react-transform.
This wasn't the case before. Are you running some new Babel version?
from babel-plugin-react-transform.
It's possible. I just updated to 5.8.25
today.
from babel-plugin-react-transform.
Let's keep it open until we figure it out.
from babel-plugin-react-transform.
@joefiorini's fix worked for me. Just add :after
My full .babelrc
:
{
"stage": 1,
"env": {
"development": {
"plugins": ["react-transform:after"],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}
}
}
}
}
from babel-plugin-react-transform.
Is this an issue again with babel 6?
I set plugin transform-react-display-name before react-transform...
.babelrc:
{
"presets": [
],
"plugins": [
],
"env": {
"development": {
"plugins": [
["transform-react-display-name"],
["react-transform", {
"transforms": [
{
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"],
},
],
}],
],
},
},
}
Component:
var React = require('react');
var Blub = React.createClass({
render: function() {
return null;
}
});
module.exports = Blub;
babel src/components/Blub.jsx
import _redboxReact from 'redbox-react';
import _react from 'react';
import _reactTransformCatchErrors from 'react-transform-catch-errors';
const _components = {
_component: {}
};
const _reactTransformCatchErrors2 = _reactTransformCatchErrors({
filename: 'src/components/Blub.jsx',
components: _components,
locals: [],
imports: [_react, _redboxReact]
});
function _wrapComponent(id) {
return function (Component) {
return _reactTransformCatchErrors2(Component, id);
};
}
var React = require('react');
var Blub = _wrapComponent('_component')(React.createClass({
render: function () {
return null;
}
}));
module.exports = Blub;
package.json
"babel-core": "^6.3.15",
"babel-plugin-transform-react-display-name": "^6.3.13",
"babel-plugin-react-transform": "^2.0.0-beta1",
"react-transform-catch-errors": "^1.0.0"
from babel-plugin-react-transform.
I'm using Babel 6 with a similar set up to @rubengrill, however the displayName
doesn't seem to be getting added.
from babel-plugin-react-transform.
I've got the same error as @rubengrill - this doesn't show my the displayName
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [
["transform-react-display-name"],
["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}]
]
}
}
}
from babel-plugin-react-transform.
Same as above. Any news here?
from babel-plugin-react-transform.
Is this an issue again with babel 6?
Looks like it's, I have it too.
from babel-plugin-react-transform.
I'm running into the same issue. Since I'm prototyping something and I don't care about speed I ended up running babel.transform
twice, first with transform-react-display-name
, and syntax-jsx
plugins only and later on with all the other ones, including react-transform
. Sharing this workaround in case s useful for anyone.
from babel-plugin-react-transform.
Also, I've added a couple of console.log
to debug the issue and looks like the problem is that babel 6 is not respecting the order in which plugins are added. Tried using :after
but couldn't make it work and looks like the old syntax `position: [before|after] no longer works on babel 6.
is this a KP or are we just using the API the wrong way? :)
from babel-plugin-react-transform.
@thejameskyle Is this something you can offer advice on?
from babel-plugin-react-transform.
Tried using :after but couldn't make it work and looks like the old syntax `position: [before|after] no longer works on babel 6.
Yes, It seems that plugins all run in parallel with babel 6 (https://phabricator.babeljs.io/T6730).
That could be linked to this issue.
For instance, I had to make this commit to make my plugin work with another plugin (transform-react-inline-elements) oliviertassinari/babel-plugin-react-remove-properties@c52e7eb
from babel-plugin-react-transform.
Hey all, I found a solution.
There's a obscure package here: https://www.npmjs.com/package/react-transform-display-name that provides the same functionality as a transform in react-transform
Under the react-transforms
hash add
{
"transform": "react-transform-display-name"
}
My full config:
{
"presets": ["react", "es2015"],
"env": {
"development": {
"plugins": [
["react-transform", {
"transforms": [{
"transform": "react-transform-display-name"
}, {
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}, {
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"]
}]
}]
]
}
}
}
from babel-plugin-react-transform.
Moving to #67
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.