Upgrade Laravel Mix to Use Babel 7

Question

I need to update Laravel mix to use Babel 7.

I update my dependencies to use Laravel Mix 4.0.7 that should support Babel 7.

  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.2.1",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "axios": "^0.15.3",
    "babel-loader": "^7.1.5",
    "bootstrap": "4.1.3",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.0.1",
    "jquery": "^3.1.1",
    "laravel-mix": "^4.0.7",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "lodash": "^4.17.10",
    "react-color": "^2.14.1",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "styled-components": "^4.0.3",
    "vue": "^2.5.13"
  }

And in my .babelrc file i have:

{
  "loader": "babel-loader",
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-react-jsx"
  ]
}

And in my webpack.mix.js i have:

mix.react("resources/assets/app.js", "public/js");

The problem is when i run npm run watch i get the following error:

Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-core'

Apparently, Laravel Mix is trying to use babel-core instead of @babel/core.

Any ideas on how to solve this?

Answer 1

I believe you need to upgrade babel-loader to 8.x.

If you read the docs at https://www.npmjs.com/package/babel-loader

This README is for babel-loader v8 + Babel v7

Check the 7.x branch for docs with Babel v6

So, babel-loader 8.x work with @babel-core 7. babel-loader 7.x works with babel-core 6.x