babel
Did not upgrade .babelrc file
From what I can gather from the README, this tool should upgrade my .babelrc file too, right?
I was running babel 6.x, it updated my package.json with dozens of "@babel/...": "7.0.0-beta.39" lines but didn't touch my .babelrc file.
Did it fail because I'm using json5 syntax perhaps? Here's my .babelrc file:
{
// babel uses json5 to parse this file; comments *are* allowed (https://github.com/kadirahq/react-storybook/issues/95#issuecomment-230488360)
"presets": ['@babel/preset-react'],
"plugins": [
// 'add-module-exports',
'syntax-flow',
'syntax-trailing-function-commas',
'check-es2015-constants',
'transform-flow-strip-types',
'transform-es3-member-expression-literals', // http://stackoverflow.com/a/33513000/65387
'transform-es3-property-literals',
'transform-es5-property-mutators',
// ['transform-es2015-modules-commonjs', {loose: true}], // https://babeljs.slack.com/archives/discussion/p1455667909000424 // Webpack 2 should have modules disabled
'transform-class-constructor-call',
'transform-class-properties',
'transform-decorators',
'transform-export-extensions',
'transform-object-rest-spread',
'transform-exponentiation-operator',
'transform-es2015-arrow-functions',
'transform-es2015-block-scoped-functions',
'transform-es2015-block-scoping',
['transform-es2015-classes', {loose: true}], // https://gist.github.com/zertosh/4f818163e4d68d58c0fa, https://github.com/babel/babelify/issues/133
// 'transform-proto-to-assign',
'transform-es2015-computed-properties',
'transform-es2015-destructuring',
'transform-es2015-for-of',
'transform-es2015-function-name',
'transform-es2015-literals',
'transform-es2015-object-super',
'transform-es2015-parameters',
'transform-es2015-shorthand-properties',
'transform-es2015-spread',
'transform-es2015-sticky-regex',
'transform-es2015-template-literals',
'transform-es2015-typeof-symbol',
'transform-es2015-unicode-regex',
['transform-runtime', {"polyfill": true, "regenerator": false}],
// http://stackoverflow.com/a/28709165/65387
// 'syntax-async-functions',
// ['fast-async',{
// compiler: {
// promises: true,
// generators: false
// }
// }],
// 'transform-async-to-generator',
// 'transform-regenerator',
// ['transform-async-to-module-method', {
// module: 'bluebird',
// method: 'coroutine'
// }],
//
// // 'transform-async-to-generator',
// ['transform-regenerator', { // http://babeljs.io/docs/plugins/transform-regenerator/
// asyncGenerators: false, // true by default
// generators: true, // true by default
// async: false // true by default
// }],
],
"env": {
"production": {
"plugins": [
"transform-react-remove-prop-types",
"transform-react-inline-elements",
"transform-react-constant-elements"
]
}
},
"compact": false
}
But if you see here, they are indeed parsing the file as JSON5. Maybe some other error while reading? Was there anything printed in the console?
@aulisius No errors.
❯ npx babel-upgrade
npx: installed 217 in 7.539s
🙌 Thanks for trying out https://github.com/babel/babel-upgrade!
Updating closest package.json dependencies
VCS diff shows only package.json was modified.
aside: This issue reminds me that we should also make a website for this where you can copy paste or even drag/drop your config/package.json and it does the same thing as this tool. Maybe that could be useful too
Well for one thing, there isn't an easy way to handle comments other than my "idea" to parse as js and then output as js/json https://github.com/babel/babel-upgrade/pull/8#issuecomment-366723708
Actually it updated fine for me if the babelrc is at the root. I don't think you specified where the location of the babelrc was? I'm assuming you are using a monorepo which we don't support yet - it's in the readme https://github.com/babel/babel-upgrade
but there is a wip pr https://github.com/babel/babel-upgrade/pull/35
My .babelrc actually is at the root, next to package.json. I don't mind if the comments are stripped if that helps.
A copy-paste website would be nice. I didn't realize it was going to just modify those files without asking any questions. It's a good thing I had committed recently.
Can verify the same issue. .babelrc remains unchaged even at the root.
@jeffscottward, the current behaviour of babel-upgrade is to not write by default. Did you try with the --write flag?
@aulisius I did ✋ and got the same result. .babelc remains unchanged. I wonder if it's a permissions thing?
In the meantime, is there a tool like @hzoo mentioned for the babelrc?
I dug down a little bit, and at least in my project it was due to this line that checks for number of package.jsons. My project's not a monorepo, but I did have a random package.json nested deep down that meant that the writeBabelRC never got called.
I deleted the package.json, ran the upgrade, and then restored it from git. ✅
Mine's a monorepo, but it also didn't upgrade the .babelrc in the root.
Yea, if there's more than one package.json, it won't upgrade the babelrc. Not sure if that's intentional or not
v0.0.23: package.json upgraded fine. Saw this error with my .babelrc:
λ yarn run babel-upgrade
yarn run v1.9.4
🙌 Thanks for trying out https://github.com/babel/babel-upgrade!
Updating .babelrc config at .babelrc
(node:14496) UnhandledPromiseRejectionWarning: TypeError: name.indexOf is not a function
at changeName (C:\Apps\Manager\node_modules\babel-upgrade\src\upgradeConfig.js:8:12)
at changePlugins (C:\Apps\Manager\node_modules\babel-upgrade\src\upgradeConfig.js:85:20)
at Object.keys.forEach (C:\Apps\Manager\node_modules\babel-upgrade\src\upgradeConfig.js:108:7)
at Array.forEach (<anonymous>)
at upgradeConfig (C:\Apps\Manager\node_modules\babel-upgrade\src\upgradeConfig.js:106:29)
at writeBabelRC (C:\Apps\Manager\node_modules\babel-upgrade\src\index.js:142:12)
at <anonymous>
(node:14496) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:14496) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
My .babelrc:
{
"presets": [
["env", {
"targets": { "browsers": [">1%", "not ie < 12", "edge 16"] },
"useBuiltIns": true
}],
"airbnb",
"stage-2",
"react"
],
"plugins": [
"lodash",
"react-hot-loader/babel",
"transform-class-properties",
"transform-runtime",
"syntax-dynamic-import"
],
"env": {
"production": {
"plugins": [
"transform-react-remove-prop-types",
{ "removeImport": true }
]
}
}
}
@gknapp, there's minor error in your .babelrc
"env": {
"production": {
"plugins": [
"transform-react-remove-prop-types",
{ "removeImport": true }
]
}
}
should be
"env": {
"production": {
"plugins": [
["transform-react-remove-prop-types", { "removeImport": true }]
]
}
}
Notice that if a plugin needs options, the plugin is added as an array.
@aulisius Thanks, that fixed the error. I upgraded the config by hand in the end. I had to remove babel-preset-airbnb.
Updating .babelrc config at .babelrc
Index: .babelrc
===================================================================
--- .babelrc Before Upgrade
+++ .babelrc After Upgrade
Current .babelrc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"lodash",
"react-hot-loader/babel",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-runtime",
"@babel/plugin-syntax-dynamic-import"
],
"env": {
"production": {
"plugins": [
["transform-react-remove-prop-types", { "removeImport": true }]
]
}
}
}
Same for me, this is how my .babelrc looked initially:
{
"plugins": [
"react-hot-loader/babel",
"transform-class-properties",
"transform-object-rest-spread"
],
"presets": ["env", "react"],
"env": {
"start": {
"presets": ["react-hmre"]
}
}
}
I confirm the solution of @ericf89. I had some node_modules from NPM with package.json and the composer-generated vendor folder that also did contain some package.json. After removing these, the .babelrc was detecting successfully.
