Error: Cannot find module 'babel-preset-env' - Did you mean "@babel/env"?

Question

I've been asked to go through our application and update all the frameworks as it was incredibly outdated, one of the things was to update babel, now one of our scripts in package.json was:

"compile": "babel --presets es2015 -d /tests common_scripts/",

but looking online I saw that babel --presets es2015 should be replaced with @babel/preset-env which I did and I tried to update the script like so:

"compile": "babel --presets=env -d /tests common_scripts/"

however, when I run it now I am now getting the error:

{ Error: Cannot find module 'babel-preset-env'
- Did you mean "@babel/env"?

and I'm not sure why and can't see where I've gone wrong.

My package.json is like so:

{
  "main": "index.js",
  "scripts": {
    "compile": "babel --presets=env -d /tests common_scripts/",
    "test": "npm run compile && mocha --require @babel/core/register jsdom-global/register common_scripts/**/*tests.js Areas/Gdpr/DataMappingApp/**/*tests.js Areas/Gdpr/GdprListAdminApp/**/*tests.js Areas/Gdpr/scripts/*.tests.js  Areas/Support/GridColumnsAdminApp/**/*tests.js --reporter spec",
    "buildDev": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% ",
    "buildDevB": "npm run unsetReadOnly && webpack --env NODE_ENV=local && ECHO Completed at %TIME% && echo \u0007 ",
    "buildProd": "npm run unsetReadOnly",
    "lint": "eslint Areas/Gdpr/DataMappingApp/** Areas/Gdpr/GdprListAdminApp/** Areas/Support/GridColumnsAdminApp/**  Areas/Gdpr/SarApp/** common_scripts/**",
    "unsetReadOnly": "attrib -R Content\\kendo\\2017.1.223\\Bootstrap\\*.png /S",
    "bell": "echo \u0007",
    "preinstall": "npx npm-force-resolutions"
  },
  "author": "BusinessPort",
  "license": "ISC",
  "resolutions": {
    "js-yaml": "^3.11.3",
    "is-svg": "^4.2.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.8",
    "@babel/node": "^7.16.8",
    "@babel/plugin-proposal-object-rest-spread": "7.17.3",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-eslint": "^8.2.3",
    "babel-loader": "^8.2.4",
    "babel-plugin-es6-promise": "^1.1.1",
    "babel-plugin-module-resolver": "^3.1.1",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "chai": "^4.1.2",
    "css-loader": "^6.7.1",
    "eslint": "^8.12.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
    "eslint-import-resolver-webpack": "^0.9.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-react": "^7.7.0",
    "file-loader": "^6.2.0",
    "jsdom": "^11.10.0",
    "jsdom-global": "^3.0.2",
    "mini-css-extract-plugin": "2.4.0",
    "mocha": "^9.2.2",
    "node": "^9.8.0",
    "script-loader": "^0.7.2",
    "source-map-support": "0.4.3",
    "style-loader": "^0.20.3",
    "ts-loader": "^3.5.0",
    "typescript": "^2.6.2",
    "url-loader": "^4.1.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.4",
    "@progress/kendo-data-query": "^1.2.2",
    "@progress/kendo-dateinputs-react-wrapper": "^2018.2.620",
    "@progress/kendo-dropdowns-react-wrapper": "^2018.1.221",
    "@progress/kendo-grid-react-wrapper": "^2018.1.221",
    "@progress/kendo-react-dropdowns": "^0.5.1",
    "@progress/kendo-theme-bootstrap": "^5.2.0",
    "@progress/kendo-theme-default": "^2.50.0",
    "@progress/kendo-ui": "^2018.1.411",
    "@progress/kendo-validator-react-wrapper": "^2018.1.221",
    "@progress/kendo-window-react-wrapper": "^2018.1.221",
    "acorn": "^8.7.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^5.1.3",
    "braces": "^3.0.2",
    "es6-promise": "^4.2.4",
    "glob-parent": "^6.0.2",
    "is-extglob": "^2.1.1",
    "jquery": "3.6.0",
    "prop-types": "^15.6.1",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^4.1.2",
    "redux-thunk": "^2.4.1",
    "webpack-dev-server": "^4.7.4"
  }
}

and.babelrc file is:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "es6-promise",
    "transform-object-assign",
    [
      "@babel/plugin-proposal-object-rest-spread",
      { "useBuiltIns": true }
    ],
    [
      "module-resolver",
      { "alias": { "common_scripts": "./common_scripts" } }
    ]
  ]
}

I'm not sure if it would make a difference but my webpack.config.js is:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


module.exports = {  
    mode: 'development',
    context: __dirname,
    output: {
        path: __dirname,
        filename: '[name].bundle.js'
    },

      devtool: 'eval-cheap-module-source-map',
    entry: {
        'Content/CSS/bundles/common': './Content/CSS/commonCss.js',
        'Scripts/bundles/common': ['babel-polyfill', './Scripts/common.js'],
        'Scripts/bundles/gdpr_dm': ['babel-polyfill', './Areas/Gdpr/DataMappingApp/main.jsx'],
        'Scripts/bundles/gdpr_dma': ['babel-polyfill', './Areas/Gdpr/GdprListAdminApp/main.jsx'],
        'Scripts/bundles/gdpr_sar': ['babel-polyfill', './Areas/Gdpr/SarApp/main.jsx'],
        'Scripts/bundles/support_columns': ['babel-polyfill', './Areas/Support/GridColumnsAdminApp/main.jsx'],
        'Scripts/bundles/vendor': [
            'react', 'react-router', 'react-dom',
            'react-router-dom', 'redux', 'react-redux',
            '@progress/kendo-ui/js/kendo.core', '@progress/kendo-dropdowns-react-wrapper',
            '@progress/kendo-grid-react-wrapper', '@progress/kendo-ui/js/kendo.grid.js',
            '@progress/kendo-ui/js/kendo.tooltip', '@progress/kendo-ui/js/kendo.multiselect'
        ],
        'Scripts/bundles/admin_area': ['babel-polyfill', './Areas/Admin/scripts/admin_area.js']
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                include: [
                    path.join(__dirname, '/Areas/Gdpr/DataMappingApp/'),
                    path.join(__dirname, '/Areas/Gdpr/GdprListAdminApp/'),
                    path.join(__dirname, '/Areas/Gdpr/SarApp/'),
                    path.join(__dirname, '/Areas/Support/GridColumnsAdminApp/'),
                    path.join(__dirname, '/common_scripts/')
                ],
                use: [{
                    loader: 'babel-loader',

                }]
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
             test: /\.(png|jpe?g|gif)$/,
            use: [{ loader: 'url-loader',
            options: {
                limit: 4096,
                name: '[name].[ext]&useRelativePath=true&publicPath=../'
                }
            }]
        }
        ]
    },
    plugins: [
          new MiniCssExtractPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.ProvidePlugin({
            __assign: ['tslib', '__assign'],
            __extends: ['tslib', '__extends'],
        }),

    ],
    resolve: {
        extensions: ['.js', '.jsx'/*, ".tsx", ".ts"*/],
        fallback: {
         "fs": false, 
         "crypto": require.resolve("crypto-browserify"),
         "https": require.resolve("https-browserify"),
         "stream": require.resolve("stream-browserify"),
         "path": require.resolve("path-browserify"),
         "http": require.resolve("stream-http"),
},
        alias: {
         common_scripts: path.resolve(__dirname, 'common_scripts'),
         process: "process/browser"
        }
    }, 
};

Is there something I'm missing in babel file? or have I rewritten that line wrong?

Answer 1

You passed --presets=env and the error is trying to tell you that instead of that, it should be --presets=@babel/preset-env .