How to setup babel.config.js, so Couldn't find preset "@babel/env" relative to directory works - react

Viewed 18

I'm having issues setting up babel 7 in the app I'm working. I saw different solutions but for now none of them have worked for me and I'm still getting the same error:

Error: Couldn't find preset "@babel/env" relative to directory {projectURL}

the babel.config.js

module.exports = api => {
  api.cache(true);

  const presets = [
    ['@babel/preset-env',
      {
        targets: {
          browsers: ['defaults']
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
    "@babel/preset-react"
  ];

  const plugins = [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-runtime', // See: https://github.com/babel/babel/issues/9849
    ['babel-plugin-webpack-aliases', { config: './webpack/webpack.common.resolve.js' }]
  ];

  return {
    presets,
    plugins
  };
};

The package.json file has:

"devDependencies": {
    "@babel/cli": "^7.15.4",
    "@babel/core": "^7.15.5",
    "@babel/node": "^7.15.4",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.15.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
    "@babel/plugin-proposal-function-sent": "^7.14.5",
    "@babel/plugin-proposal-json-strings": "^7.14.5",
    "@babel/plugin-proposal-numeric-separator": "^7.14.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/polyfill": "7.12.1",
    "@babel/preset-env": "^7.19.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/runtime": "^7.15.4",
    "@types/jest": "^27.0.1",
    "babel-jest": "^27.2.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-webpack-aliases": "^1.1.3",
    "babel-preset-env": "^1.7.0",
    "clean-css": "^5.1.5",
    "css-loader": "^6.2.0",
    "file-loader": "6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "jest": "^27.2.0",
    "jest-fetch-mock": "^3.0.3",
    "jest-transform-stub": "^2.0.0",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.3.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "raw-loader": "^4.0.2",
    "style-loader": "^3.2.1",
    "supertest": "^6.1.6",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.2.1",
    "webpack-merge": "^5.8.0"
1 Answers

There were a conflict between a global old version babel installation and the local one, so it was loading the old global version instead of the local one and it worked differently

Related