"@babel/core@^7.0.0 is required" even though @babel/core is 7.x.x

[LeaVerou]

Here is the output of npm list:

├── @babel/core@7.14.6
├── @babel/preset-env@7.14.5
├── eslint@7.29.0
├── gulp-babel@8.0.0
├── gulp-concat@2.6.1
├── gulp-sourcemaps@3.0.0
├── gulp@4.0.2
└── merge2@1.4.1

And yet, when I try to use gulp-babel, I get:

[22:18:03] Error in plugin "gulp-babel"
Message:
    @babel/core@^7.0.0 is required
Details:
    domainEmitter: [object Object]
    domainThrown: false

---

I looked at the code that produces this error and then created this testcase:

const babel = require('@babel/core');

babel.loadPartialConfig({
    caller: undefined,
    babelrc: false,
    configFile: false
});

Running that gave me the culprit:

Error [BrowserslistError]: /Users/leaverou/Documents/mavo/mavo contains both .browserslistrc and package.json with browsers

Addressing that fixed my issue. However, this was a very frustrating debugging experience, as the error I was seeing was completely different from the actual error!

[szl-shalom]

what can i do with thisquestion ?

[tomfuertes]

Note: Just for SEO help. Probably not a final resolution

Had this error when browserslist wasn't defined in either package.json or .browserslistrc per details in README here: https://github.com/browserslist/browserslist

[SoldierAb]

I'm having same issue after run yarn build, Here is the configurations:

package.json

{
  "name": "k-view-react",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "scripts": {
    "dev": "dumi dev",
    "build:preview": "npm run build:site && serve site",
    "build:site": "rimraf site && dumi build",
    "build:types": "tsc -p tsconfig.build.json && cpr lib es",
    "clean":"rimraf lib es dist",
    "build":"npm run clean && npm run build:types && gulp",
    "deploy:site": "npm run build:site && gh-pages -d site"
  },
  "author": "cgj",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.18.0",
    "@babel/plugin-proposal-class-properties": "^7.17.12",
    "@babel/plugin-transform-runtime": "^7.18.0",
    "@babel/preset-env": "^7.18.0",
    "@babel/preset-react": "^7.17.12",
    "@babel/preset-typescript": "^7.17.12",
    "@babel/runtime": "^7.18.0",
    "@commitlint/cli": "^17.0.0",
    "@commitlint/config-conventional": "^17.0.0",
    "@types/react": "^18.0.9",
    "@types/react-dom": "^18.0.4",
    "@umijs/fabric": "^2.10.2",
    "commitizen": "^4.2.4",
    "cpr": "^3.0.1",
    "cross-env": "^7.0.3",
    "cz-conventional-changelog": "^3.3.0",
    "dumi": "^1.1.42",
    "gh-pages": "^4.0.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "husky": "^8.0.1",
    "lint-staged": "^12.4.1",
    "prettier": "^2.6.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "serve": "^13.0.2",
    "typescript": "^4.6.4"
  },
  "lint-staged": {
    "src/**/*.ts?(x)": [
      "prettier --write",
      "eslint --fix",
      "git add"
    ],
    "src/**/*.less": [
      "stylelint --syntax less --fix",
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  },
  "dependencies": {
    "prop-types": "^15.8.1"
  }
}

.babelrc.js

module.exports = {
    presets: ['@babel/env', '@babel/typescript', '@babel/react'],
    plugins: [
        '@babel/plugin-transform-runtime',
        '@babel/proposal-class-properties',
    ]
}

from my respo https://github.com/SoldierAb/k-view-react

[ibrouos]

@LeaVerou This doesn't solve the post but just an appreciation comment that your debugging tip helped me! my issue was that I was using "browserlist" instead of "browserlist" in the package.json file.