Did not upgrade .babelrc file

[mnpenner]

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
}

[aulisius]

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?

[mnpenner]

@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.

[hzoo]

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

[hzoo]

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 #8 (comment)

[hzoo]

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 #35

[mnpenner]

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.

[jeffscottward]

Can verify the same issue. .babelrc remains unchaged even at the root.

[aulisius]

@jeffscottward, the current behaviour of babel-upgrade is to not write by default. Did you try with the --write flag?

[kevinSuttle]

@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?

[ericf89]

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. ✅

[kevinSuttle]

Mine's a monorepo, but it also didn't upgrade the .babelrc in the root.

[ericf89]

Yea, if there's more than one package.json, it won't upgrade the babelrc. Not sure if that's intentional or not

[gknapp]

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 }
      ]
    }
  }
}

[aulisius]

@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.

[gknapp]

@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 }]
      ]
    }
  }
}

[kevinSuttle]

I counted 15 package.jsons in my current repo 🤣

[jhoffmcd]

Currently having this same issue in a Lerna monorepo, did #35 go stale?

[Sundin]

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"]
    }
  }
}

[kkoomen]

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.