I am trying to upgrade from 7 to version 8. But I am running into some errors.

I think I need to upgrade some stuff but not sure what

This is what I have for my packages(I removed plugins that have no bearing on my problem)

 "dependencies": {
    "babel-plugin-emotion": "^9.2.5",
    "babel-polyfill": "^6.26.0",
    "http-proxy-middleware": "^0.18.0",
    "koa-connect": "^2.0.1",
    "koa-router": "^7.4.0",
    "koa2-connect-history-api-fallback": "0.0.6",
    "npm": "^6.1.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-emotion": "^9.2.5",
    "react-responsive-modal": "^3.3.0",
    "react-router-dom": "^4.2.2",

  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mobx-react-router": "^4.0.4",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }

I have in my .baelrc

{
  "presets": ["env", "react"],
   "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "emotion"]
}

I see that I need to upgrade stuff like babel-core, preset-env, preset-react but I am not sure what else.

I get this error

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

Edit my newest configs(it now seems to work)

.babelrc

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-object-rest-spread",
    "transform-class-properties"
  ]
}

package.json

  "dependencies": {
    "@babel/polyfill": "^7.0.0",
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
  }

I am trying to upgrade from 7 to version 8. But I am running into some errors.

I think I need to upgrade some stuff but not sure what

This is what I have for my packages(I removed plugins that have no bearing on my problem)

 "dependencies": {
    "babel-plugin-emotion": "^9.2.5",
    "babel-polyfill": "^6.26.0",
    "http-proxy-middleware": "^0.18.0",
    "koa-connect": "^2.0.1",
    "koa-router": "^7.4.0",
    "koa2-connect-history-api-fallback": "0.0.6",
    "npm": "^6.1.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-emotion": "^9.2.5",
    "react-responsive-modal": "^3.3.0",
    "react-router-dom": "^4.2.2",

  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mobx-react-router": "^4.0.4",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.16.5",
    "webpack-bundle-analyzer": "^2.13.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.4"
  }

I have in my .baelrc

{
  "presets": ["env", "react"],
   "plugins": ["transform-decorators-legacy", "transform-class-properties", "transform-object-rest-spread", "emotion"]
}

I see that I need to upgrade stuff like babel-core, preset-env, preset-react but I am not sure what else.

I get this error

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

Edit my newest configs(it now seems to work)

.babelrc

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-transform-object-assign",
    "@babel/plugin-proposal-object-rest-spread",
    "transform-class-properties"
  ]
}

package.json

  "dependencies": {
    "@babel/polyfill": "^7.0.0",
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
  }

• javascript
• npm
• babeljs

• I think you mean babel 7, not 8. Although babel-loader was recently updated to version 8, babel 7 is the new version. See: babeljs.io/docs/en/v7-migration for some general info, although it's not all necessary. In fact, this is probably the most plicated upgrade guide I've ever seen. – nnyby Commented Aug 30, 2018 at 23:57
• yea that's what I mean. Yea I looked through it and it confused me. Hence this post. – chobo2 Commented Aug 31, 2018 at 5:27
• this mit should give you an idea of what needs to change for the update: github./ccnmtl/astro-interactives/pull/70/mits/… – nnyby Commented Aug 31, 2018 at 10:02
• Cool, I will look into that but how about my "plugins", did they change as well? – chobo2 Commented Aug 31, 2018 at 16:19
• Shouldn't the preset be @babel/preset-env instead of @babel/env? – Pavel Hasala Commented Apr 18, 2020 at 8:16

1 Answer 1

All plugins are moved to @babel scope with Babel 7. To update your package.json, you need to rename all your plugins and presets accordingly, using the ^7.0.0 version.

You can find all the official plugins here.

If you open up a plugin that interests you, you will see that all of them are renamed to, for example: @babel/plugin-proposal-class-properties.

• babel-polyfill => @babel/polyfill
• babel-core => @babel/core
• babel-plugin-transform-class-properties => @babel/plugin-proposal-class-properties
• you get the idea. babel- is now @babel/ and some plugins are prefixed with proposal.

babel-plugin-emotion is of course not an official plugin so it stays the same, as well as babel-loader. For all other plugins make sure to pare the names with the new naming on the link provided above. Open each plugin's folder to see the new name beginning with @babel/.

The same naming now applies to .babelrc file (or babel config in general), and I suggest you do not use the shorthand naming but include the full package nam of plugins and presets in your babel config:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
   // ...
}

Hope this helps! Cheers.