[Error]_Cannot find module 'babel-preset-es2015'

littleAnt

I'm learning to setup Webpack to my React project. Then, I met an error on the Babel setting step when I run this command

npx webpack --config webpack.config.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-es2015'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at resolve (internal/modules/cjs/helpers.js:33:19)
at resolveStandardizedName (...\project\node_modules\@babel\core\lib\config\files\plugins.js:111:7)      
at resolvePreset (...\project\node_modules\@babel\core\lib\config\files\plugins.js:59:10)
at loadPreset (...\project\node_modules\@babel\core\lib\config\files\plugins.js:78:20)
at loadPreset.next (<anonymous>)
at createDescriptor (...\project\node_modules\@babel\core\lib\config\config-descriptors.js:187:16)       
at createDescriptor.next (<anonymous>)
at step (...\project\node_modules\gensync\index.js:261:32)
at evaluateAsync (...\project\node_modules\gensync\index.js:291:5)

More detail, I have some code lines:

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(jsx|js)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', {
                "targets": "defaults"
              }],
              '@babel/preset-react'
            ]
          }
        }]
      }
    ],
  }
}

.babelrc

{
  "presets": ["es2015", "react"]
}

package.json

{
  "name": "react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.16.7",
    "@babel/preset-react": "^7.16.7",
    "antd": "^4.17.3",
    "babel-loader": "^8.2.3",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "css-loader": "^6.5.1",
    "ts-loader": "^9.2.6"
  }
}

How can I fix this problem and What is the point of caution? Thank you very much!

zonni

Your problem comes from an incorrect .babelrc file, please look at it closer - you are defining babel to use "2015" preset but your dependencies point that you are using "@babel/preset-env".

The correct replacement for "2015" is "@babel/preset-env" in your case. Read about it more: https://babeljs.io/docs/en/babel-preset-env

.babelrc

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

ERROR in ./src/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/preset-present-env'

From

Cannot find module '@babel/core'

From Dev

Export es6 class in Babel - Cannot find module

From Dev

Is there a way to use loose modules when using es2015 preset in babel 6?

From Dev

Using webpack with babel and babel-preset-react and babel-preset-es2015

From Dev

Couldn't find preset "es2015" relative to directory "web/static/js"

From Dev

Babel - Error: Cannot find module 'babel-runtime/helpers/typeof'

From Dev

Couldn't find preset "es2015" relative to directory

From Dev

Webpack + Babel: Couldn't find preset "es2015" relative to directory

From Dev

react native transform - error couldn't find preset "babel-preset-react-native-stage-0

From Dev

Cannot find module '@babel/preset-plugin-transform-object-assign'

From Dev

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

From Dev

Cannot find module '@babel/parser'

From Dev

bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/workspace/reactnative''

From Dev

Error: Cannot find module '@vue/babel-preset-app'

From Dev

Cannot find module 'babel-preset-env' from PATH Did you mean "@babel/env"?

From Dev

Cannot find module '@babel/preset-es2015' from 'C:\repos\ondemandProject\ondemnd-web'

From Dev

./components/Avatar.tsx Error: Cannot find module '@babel/preset-stage-0'

From Dev

Nuxt.js Cannot find module '@babel/preset-env/lib/utils'

From Dev

Babel es2015 Arrow Function error

From Dev

Gulp and Babel: Error: Cannot find module

From Dev

babel - es2015 and es2017 preset not working together

From Dev

browserify fails to parse jsx despite using babel-preset-react, babel-preset-es2015 and babel-preset-stage-3

From Dev

Error: Couldn't find preset "es2015" relative to directory with node js

From Dev

Babel : error when trying to use relay preset 'Couldn't find preset "relay" relative to directory'

From Dev

Webpack - Babel Error - Couldn't find preset "@babel/env" relative to directory

From Dev

Error: Cannot find module 'babel-preset-react' - If you want to resolve "react", use "module:react"

From Dev

Parsing error : Cannot find module 'next/babel'

From Dev

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from

Related Related

  1. 1

    ERROR in ./src/app.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/preset-present-env'

  2. 2

    Cannot find module '@babel/core'

  3. 3

    Export es6 class in Babel - Cannot find module

  4. 4

    Is there a way to use loose modules when using es2015 preset in babel 6?

  5. 5

    Using webpack with babel and babel-preset-react and babel-preset-es2015

  6. 6

    Couldn't find preset "es2015" relative to directory "web/static/js"

  7. 7

    Babel - Error: Cannot find module 'babel-runtime/helpers/typeof'

  8. 8

    Couldn't find preset "es2015" relative to directory

  9. 9

    Webpack + Babel: Couldn't find preset "es2015" relative to directory

  10. 10

    react native transform - error couldn't find preset "babel-preset-react-native-stage-0

  11. 11

    Cannot find module '@babel/preset-plugin-transform-object-assign'

  12. 12

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

  13. 13

    Cannot find module '@babel/parser'

  14. 14

    bundling failed: Error: Cannot find module 'babel-preset-react-native' from '/workspace/reactnative''

  15. 15

    Error: Cannot find module '@vue/babel-preset-app'

  16. 16

    Cannot find module 'babel-preset-env' from PATH Did you mean "@babel/env"?

  17. 17

    Cannot find module '@babel/preset-es2015' from 'C:\repos\ondemandProject\ondemnd-web'

  18. 18

    ./components/Avatar.tsx Error: Cannot find module '@babel/preset-stage-0'

  19. 19

    Nuxt.js Cannot find module '@babel/preset-env/lib/utils'

  20. 20

    Babel es2015 Arrow Function error

  21. 21

    Gulp and Babel: Error: Cannot find module

  22. 22

    babel - es2015 and es2017 preset not working together

  23. 23

    browserify fails to parse jsx despite using babel-preset-react, babel-preset-es2015 and babel-preset-stage-3

  24. 24

    Error: Couldn't find preset "es2015" relative to directory with node js

  25. 25

    Babel : error when trying to use relay preset 'Couldn't find preset "relay" relative to directory'

  26. 26

    Webpack - Babel Error - Couldn't find preset "@babel/env" relative to directory

  27. 27

    Error: Cannot find module 'babel-preset-react' - If you want to resolve "react", use "module:react"

  28. 28

    Parsing error : Cannot find module 'next/babel'

  29. 29

    Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@babel/plugin-preset-react' imported from

HotTag

Archive