React-starter-kit: As of v7.0.0-beta.55, we've removed Babel's Stage presets.

Created on 1 Aug 2018  ·  14Comments  ·  Source: kriasoft/react-starter-kit

はじめて投稿します。

react-redux-material-starter-kit-master.zip
↑をnpm run build すると ↓のエラーがでます。回避方法をご教示くださいませ。

As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
long run to explicitly add which proposals to use.

For a more automatic migration, we have updated babel-upgrade,
https://github.com/babel/babel-upgrade to do this for you with
"npx babel-upgrade".

If you want the same configuration as before:

{
"plugins": [
// Stage 2
["@babel/plugin-proposal-decorators", { "legacy": true }],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",

// Stage 3
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", { "loose": false }],
"@babel/plugin-proposal-json-strings"

]
}

If you're using the same configuration across many separate projects,
keep in mind that you can also create your own custom presets with
whichever plugins and presets you're looking to use.

module.exports = function() {
return {
plugins: [
require("@babel/plugin-syntax-dynamic-import"),
[require("@babel/plugin-proposal-decorators"), { "legacy": true }],
[require("@babel/plugin-proposal-class-properties"), { "loose": false }],
],
presets: [
// ...
],
};
};

Most helpful comment

Hello,

I ran into the same problem as @yasuyuki1203. It seems that babel v7.0.0-beta.55 introduced dependency deprecations that breaks the yarn start process.

I was able to follow the steps mentioned in the comment by @sandshrma comment with steps. Follow the steps mentioned by sandshrma.

The second comment by yasuyuki1203 isn't as clear for those who can't read Japanese. Basically you need to remove all lines in your configuration that uses babel-preset-stage-2 (e.g. tools/webpack.config.js, babel.config.js)

The plugins added into babel.config.js (from sandshrma's steps) replace preset-stage-2 in babel, so you need to remove all lines that use preset-stage-2 in your babel and webpack configuration.

babel.config.js
Delete line: ['@babel/preset-stage-2', { decoratorsLegacy: true }],
tools/webpack.config.js
Delete line: ['@babel/preset-stage-2', { decoratorsLegacy: true }],

When updating webpack.config.js with the new plugins, I noticed that the plugin packages were not added to my package.json. I added the packages listed in plugins to devDependencies by using yarn add --dev (Do this after using babel-upgrade --write):

yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-function-sent @babel/plugin-proposal-export-namespace-from @babel/plugin-proposal-numeric-separator @babel/plugin-proposal-throw-expressions @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-proposal-class-properties @babel/plugin-proposal-json-strings --dev

Once this is done, you should be able to successfully execute yarn start

Not sure if this is related to the Update Babel pull request (I didn't look through the commits), but it seems like it is probably related.

All 14 comments

自己解決しました。

how do you resolve this problem?

By using below steps, I resolved the problem.

1). update package.json with 'babel-upgrade --write' and run npm install.

2). removed 'preset-stage-2' from the project.

3). added following code to 'babel.config.js'
plugins: [
// Stage 2
['@babel/plugin-proposal-decorators', { legacy: true }],
'@babel/plugin-proposal-function-sent',
'@babel/plugin-proposal-export-namespace-from',
'@babel/plugin-proposal-numeric-separator',
'@babel/plugin-proposal-throw-expressions',

// Stage 3
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-syntax-import-meta',
['@babel/plugin-proposal-class-properties', { loose: false }],
'@babel/plugin-proposal-json-strings',

]

ありがとうございます。
preset-stage-2は、
.babelrc.js、/tools/webpack.config.js のpreset-stage-2 を削除しました。

Hello,

I ran into the same problem as @yasuyuki1203. It seems that babel v7.0.0-beta.55 introduced dependency deprecations that breaks the yarn start process.

I was able to follow the steps mentioned in the comment by @sandshrma comment with steps. Follow the steps mentioned by sandshrma.

The second comment by yasuyuki1203 isn't as clear for those who can't read Japanese. Basically you need to remove all lines in your configuration that uses babel-preset-stage-2 (e.g. tools/webpack.config.js, babel.config.js)

The plugins added into babel.config.js (from sandshrma's steps) replace preset-stage-2 in babel, so you need to remove all lines that use preset-stage-2 in your babel and webpack configuration.

babel.config.js
Delete line: ['@babel/preset-stage-2', { decoratorsLegacy: true }],
tools/webpack.config.js
Delete line: ['@babel/preset-stage-2', { decoratorsLegacy: true }],

When updating webpack.config.js with the new plugins, I noticed that the plugin packages were not added to my package.json. I added the packages listed in plugins to devDependencies by using yarn add --dev (Do this after using babel-upgrade --write):

yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-function-sent @babel/plugin-proposal-export-namespace-from @babel/plugin-proposal-numeric-separator @babel/plugin-proposal-throw-expressions @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-proposal-class-properties @babel/plugin-proposal-json-strings --dev

Once this is done, you should be able to successfully execute yarn start

Not sure if this is related to the Update Babel pull request (I didn't look through the commits), but it seems like it is probably related.

Thank you very much. very helpful

how to resolve it ???

hurry up, waiting online!!!!

I solved it Thank you

adding to @mrgswift 's comment, doing those steps I had to add

  plugins: ['transform-class-properties', '@babel/plugin-syntax-dynamic-import'],

to .babelrc but apart from that it works for me!

I still can't resolve this problem

For me, It worked by following @mrgswift comment,:

babel.config.js
Delete line: ['@babel/preset-stage-2', { decoratorsLegacy: true }],
tools/webpack.config.js
Delete line: ['@babel/preset-stage-2', { decoratorsLegacy: true }],

but I had further issues so I added :
plugins: [ '@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties' ]
and also reinstalled sqlite 3 and I became able to run the app.

hi sandshrma, what is that you done in the first step. I am not able to write the same in my package.json.

删除所有有关preset-stage的配置,不管你是stage-0还是其他的,不管是在webpack配置里,还是.babelrc中。之后按照提示,执行npx babel-upgrade(当然这是在npm环境下),最后,执行npm install,npm run dev,在我这里是执行成功的

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rochadt picture rochadt  ·  3Comments

buildbreakdo picture buildbreakdo  ·  3Comments

nguyenbathanh picture nguyenbathanh  ·  4Comments

scazzy picture scazzy  ·  3Comments

shikelong picture shikelong  ·  4Comments