Support the new Babel 7 decorator implementation #1352
Comments
|
Just wanted to share my requirements for setting up |
|
I really like decorators, any way to keep it? |
|
My config. It work well |
|
@und3fined, thanks, it's works! |
|
When using the new Babel 7.00-beta.46 it no longer works, as described here |
|
UPDATE Builds work fine for me but I'm getting runtime errors like: for things like class MyStoreObject {
@observable someObservableClassProperty;
}It appears that at the time that
My package.json has .babelrc |
|
@Tsury please try. update for Diff with 7.0.0-beta42
|
|
New Babel PR: babel/babel#7976 |
|
This stopped working for me when I was using |
|
I am sharing the best solution for so far from my sight of view. and package.json |
|
Now that babel 7 stable released, its possible to work on new decorator API? |
|
Yes. But sadly TS implementation is not being updated yet, as the spec has
not officially progressed to the next stage, although the things under
consideration are only cosmetical, not semantical afaik
Op do 30 aug. 2018 om 14:11 schreef Matheus Gambati <
notifications@github.com>:
… Now that babel 7 stable released, its possible to work on new decorator
API?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#1352 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ABvGhBJZDsaiBu96kYe9XDVY716IFM5Nks5uV9aMgaJpZM4SIcuz>
.
|
|
The order is important. "plugins": [
...
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
],
...
]Follow the order. |
|
Updated the original comment to show the latest status, the non-beta Babel 7 version |
|
Posting this error message here because when it took me all day to find the solution to this based on the error. The error I was getting was: I was getting the error when using The solution posted by OP works fine with Babel 7. Babel 7 has caused me nothing but headaches so far. |
|
I had the same issue with "@babel/core": "7.1.0" and I was able to solve the problem in two steps:
|
|
Also, make sure to put decorators plugin before the class-properties plugin in your babel config. Apparently, the ordering of plugins matter in babel. Who knew? Agree with @JamesTheHacker, Babel 7 brought me nothing but headaches. |
Update:This isn't MobX specific issue, it's related to general Babel compilation error. Original commentHi! Another interesting bug here ;) In runtime this will throw I made little repo to demonstrate it https://github.com/andriimiroshnychenko/small-repro. |
|
@mweststrate |
|
@und3fined, are you trolling? Lots of us are using decorators with MobX in production. |
|
@jjinux hi there, |
|
@JamesTheHacker please use decorators in @2Pacalypse- I added the notice about ordering also to the post on top of this thread, but yes, order was always important already. @andriimiroshnychenko not sure how your issue is related to mobx? @und3fined following the instructions on should generally keep you out of harms way :). https://mobx.js.org/best/decorators.html Pro tip in general: If babel causes too many headaches, try TypeScript for a while, configuration is trivial and has worked reliably for years :). The amount of Babel versus TS issues in this repo is probably 100:1 |
|
@mweststrate you're totally right, this is not MobX-generated error, other decorators usage will cause same error. Sorry for not stating it in my message. I wrote it just for people, who will run in the same problem. |
|
@mweststrate currently, i'm use |
Perhaps it was because they switched the order of decorators and export. There's a legacy option that you can use to put it back to what was there before. I did that without updating my code. I'm waiting for that issue to settle down before I actually dig in to change my code since it is a very contentious issue. |
|
Yes, just enable the 'legacy' option. The name of that option is quite
misleading, as the decision about what will be the standard hasn't yet been
made, so the current syntax might very well not become legacy but stay as
is.
Op wo 7 nov. 2018 om 23:35 schreef Shannon -jj Behrens <
notifications@github.com>:
… @und3fined <https://github.com/und3fined>
I was really use it for production, it is good but after each babel and
mobx update
I need more than 2 working days to fix the compilation(transpiler
implementations) error
Perhaps it was because they switched the order of decorators and export.
There's a legacy option that you can use to put it back to what was there
before. I did that without updating my code. I'm waiting for that issue to
settle down before I actually dig in to change my code since it is a very
contentious issue.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1352 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ABvGhLLGkpeH4UqqmbohNoysNIp5fs6nks5us2AhgaJpZM4SIcuz>
.
|
|
I almost add all babel in this contexty. but it still report error.... // .babelrc // package.json // error log |
|
@yk1062008412 looks like your config isn't picked at all up by the build tool you are using. Doesn't sound really related to mobx itself, so best provide a project repository so that people can actually look at your setup. Or google for the error in combination with the stack you are using. |
Thank you for your reply. |
See mobxjs/mobx#1352 for some details.
|
I'm writing a TypeScript+Webpack project, but I need a couple of Babel plugins (styled-components, react-hot-loader, etc). These plugins have to run before TypeScript or they don't work well. I've found that the best way to get everything to work nicely is to use Babel syntax plugins instead of transformation plugins wherever you can. That way Babel does a minimum amount of transformations, leaving TS the bulk of the work. This is a simplified version of my webpack module rule: {
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'awesome-typescript-loader',
},
{
loader: 'babel-loader',
options: {
plugins: [
['@babel/plugin-syntax-decorators', { decoratorsBeforeExport: true }],
'@babel/plugin-syntax-class-properties',
'babel-plugin-styled-components',
'@babel/plugin-syntax-typescript',
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-json-strings',
'react-hot-loader/babel',
],
},
},
],
}I was able to make a decorator version of import { flow as mobxFlow } from 'mobx'
export function flow(
_: any,
_1: string,
descriptor: TypedPropertyDescriptor<(...args: any[]) => IterableIterator<any>>
) {
if (descriptor.value) {
descriptor.value = mobxFlow(descriptor.value) as any
}
}
class Store {
@flow
*getData() {
...
}
} |
@mweststrate, how do you pair ts-loader with babel-loader in the Webpack pipeline then? I require Babel because of two transformation plugins and I'd be even ok to have two transpilation steps but I couldn't get ts-loader and babel-loader to work together. I couldn't get this work just with Babel either using its own TS plugin (what MS recommends). Would you mind to show your Webpack config in case you use ts-loader and babel-loader together? |
|
I was trying to upgrade due to a security vulnerability today, but I couldn't get babel 7 to work. It was strangely failing with an observer component with a constructor like this: constructor(props) {
super(props);
this.doSomething(this.props.something);
}The problem was that |
|
Daniel, could you open a separate issue, and include babel config and such?
…On Mon, Feb 18, 2019 at 7:40 PM Daniel Rotter ***@***.***> wrote:
I was trying to upgrade due to a security vulnerability today, but I
couldn't get babel 7 to work. It was strangely failing with an observer
component with a constructor like this:
constructor(props) {
super(props);
this.doSomething(this.props.something);
}
The problem was that this.props seemed to be undefined, and for that
reason the code erred. Is it possible that a behavior like this is somehow
related to this issue? I also used the plugins as mentioned in the first
post (first the decorator one with the legacy option and then the class
properties with the loose option), but it still didn't work...
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1352 (comment)>, or mute
the thread
<https://github.com/notifications/unsubscribe-auth/ABvGhM1nD1QHGsqfeq-kkZRJ5FXHlCwiks5vOvOogaJpZM4SIcuz>
.
|
|
Also, did you try moving that same logic to componentWillMount?
On Tue, Feb 19, 2019 at 11:35 AM Michel Weststrate <mweststrate@gmail.com>
wrote:
… Daniel, could you open a separate issue, and include babel config and such?
On Mon, Feb 18, 2019 at 7:40 PM Daniel Rotter ***@***.***>
wrote:
> I was trying to upgrade due to a security vulnerability today, but I
> couldn't get babel 7 to work. It was strangely failing with an observer
> component with a constructor like this:
>
> constructor(props) {
> super(props);
> this.doSomething(this.props.something);
> }
>
> The problem was that this.props seemed to be undefined, and for that
> reason the code erred. Is it possible that a behavior like this is somehow
> related to this issue? I also used the plugins as mentioned in the first
> post (first the decorator one with the legacy option and then the class
> properties with the loose option), but it still didn't work...
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#1352 (comment)>, or mute
> the thread
> <https://github.com/notifications/unsubscribe-auth/ABvGhM1nD1QHGsqfeq-kkZRJ5FXHlCwiks5vOvOogaJpZM4SIcuz>
> .
>
|
|
Closing for now, will be reopened once #1928 happens. |
|
Sorry, it took me quite some time to get the setup running, and I am quite busy at the moment 🙈 I think I'll try again once the decorators stuff landed, and create an issue if the problem then still persists. |
|
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions. |
and others
Example config for babel 7, in decorators legacy mode:
Please note that plugin ordering is important, and
plugin-proposal-decoratorsshould be the first plugin in your plugin listNon-legacy mode decorators (stage 2) is work in progress, see #1732
Edit: updated config to show the non-beta configuration for babel 7
The text was updated successfully, but these errors were encountered: