I have such a project structure:
/main-folder
/apps
/app — // I want to import "project-b" here
/node_modules
/public
/src
|app.js
|app.css
|.babelrc
|package.json
|package-lock.json
|webpack.config.js
/static
/project-b — // Project that I want to export
/node_modules
/public
/src
/lib
...components
|.babelrc
|package.json
|package-lock.json
Everything okay when I try to import components without class properties.
But if I import component with class properties:
I thought if I add .babelrc it'll work (I added .babelrc to the app and project-b folders and it still doesn't work)
.babelrc:
{
"presets": ["#babel/preset-react","#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
app package.json:
{
"name": "auth",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"start:dev": "webpack-dev-server",
"webpack:production": "webpack -p"
},
"author": "namename",
"license": "MIT",
"dependencies": {
"css-loader": "^1.0.1",
"entrl-ui-kit": "^1.0.3",
"file-loader": "^2.0.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-router-dom": "^4.3.1",
"react-transition-group": "^2.5.0",
"style-loader": "^0.23.1"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
project-b package.json:
{
"name": "project-b",
"version": "1.0.0",
"author": "namename",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist"
],
"scripts": {
"start": "react-scripts start",
"build-examples": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"build": "rimraf ./build && mkdirp ./build && babel -d ./build ./src"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0-beta.6",
"babel-preset-latest": "^6.24.1",
"mkdirp": "^0.5.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "^2.1.1",
"react-transition-group": "^2.5.0",
"rimraf": "^2.6.2"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"dependencies": {
"babel-core": "^7.0.0-bridge.0"
}
}
All I need to do is add babel.config.js to the root folder:
Thanks to loganfsmyth!
/main-folder
|babel.config.js — //HERE!
/apps
/app — // I want to import "project-b" here
/node_modules
/public
/src
|app.js
|app.css
|.babelrc
|package.json
|package-lock.json
|webpack.config.js
/static
/project-b — // Project that I want to export
/node_modules
/public
/src
/lib
...components
|.babelrc
|package.json
|package-lock.json
babel.config.js:
module.exports = {
babelrcRoots: [
".",
"static/project-b/*"
]
};
Related
When running npm run build I'm getting Module not found error. The extension in the request is mandatory for it to be fully specified.
This is relating to a shared package I created using create-react-library. This lib is being referenced in a new project using the latest create-react-app.
I have created a config-overrides.js file setting fullySpecified to false but this does not seem to have any affect.
Any idea what I am missing?
Module not found: Error: Can't resolve './utils' in
'C:\Users\Bob\source\repos\my-react-app\node_modules#my-lib\shared\dist\services'
Did you mean 'utils.js'? BREAKING CHANGE: The request './utils' failed
to resolve only because it was resolved as fully specified (probably
because the origin is strict EcmaScript Module, e. g. a module with
javascript mimetype, a '.mjs' file, or a '.js' file where the
package.json contains '"type": "module"'). The extension in the
request is mandatory for it to be fully specified. Add the extension
to the request.
package.json
{
"name": "myreactapp",
"version": "1.0.0",
"private": true,
"dependencies": {
"#date-io/date-fns": "^2.16.0",
"#mui/icons-material": "^5.10.9",
"#mui/material": "^5.10.9",
"#mui/x-date-pickers": "^5.0.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.65",
"#types/react": "^18.0.21",
"#types/react-dom": "^18.0.6",
"#typescript-eslint/eslint-plugin": "^5.40.0",
"#typescript-eslint/parser": "^5.40.0",
"#mylib/shared": "^1.0.128-preview", // <-- my shared lib
"aws-amplify": "^4.3.37",
"clsx": "^1.2.1",
"date-fns": "^2.29.3",
"eslint": "^8.25.0",
"jest": "^27.5.1",
"react": "^18.2.0",
"react-app-rewired": "^2.2.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
"react-i18next": "^11.18.6",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"tailwindcss": "^3.1.8",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
config-overrides.js
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: function (config, env) {
const webpack = config.module.rules[1].oneOf;
webpack.splice(webpack.length - 1, 0, {
test: /\.m?js/,
resolve: {
fullySpecified: false
}
});
return config;
},
};
#mylib - package.json
{
"name": "#mylib/shared",
"version": "1.0.0-local",
"description": "Shared library",
"author": "na",
"license": "MIT",
"repository": "na",
"type": "module",
"main": "dist/index",
"module": "dist/index.modern.js",
"types": "dist/index",
"source": "src/index.js",
"engines": {
"node": ">=10"
},
"scripts": {
"build": "microbundle-crl --no-compress --format modern,cjs",
"start": "microbundle-crl watch --no-compress --format modern,cjs",
"prepare": "run-s build",
"test:all": "run-s test:unit test:lint test:build",
"test:build": "run-s build",
"test:lint": "eslint .",
"test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
"test:watch": "react-scripts test --env=jsdom",
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build",
"test": "jest",
"test:ci": "npm run test -- --watchAll=false --passWithNoTests --reporters=default --reporters=jest-junit --coverage --coverageReporters=cobertura"
},
"peerDependencies": {
"react": "^18.2.0"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"cross-env": "^7.0.2",
"eslint": "^7.1.0",
"eslint-config-prettier": "^6.7.0",
"eslint-config-standard": "^14.1.0",
"eslint-config-standard-react": "^9.2.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-standard": "^4.0.1",
"gh-pages": "^2.2.0",
"jest": "^27.5.1",
"jest-junit": "^13.1.0",
"microbundle-crl": "^0.13.10",
"npm-run-all": "^4.1.5",
"prettier": "^2.7.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-scripts": "^5.0.1",
"ts-jest": "^27.1.3",
"typescript": "4.8.4"
},
"files": [
"dist"
],
"dependencies": {
"#types/jest": "^27.4.1",
"#types/node": "^17.0.21",
"#types/react": "^17.0.39",
"#types/react-dom": "^17.0.11",
"aws-amplify": "^4.3.12",
"dotenv": "^16.0.0",
"fetch-intercept": "^2.4.0",
"object-mapper": "^6.2.0",
"react-i18next": "^11.15.6",
"typescript": "4.8.3",
"zen-observable-ts": "^1.1.0"
},
"jest-junit": {
"suiteNameTemplate": "{filepath}",
"outputDirectory": ".",
"outputName": "junit.xml"
}
}
#mylib - index.ts
import sharedUtils from './services/utils';
export {
sharedUtils,
};
As long as the line with useLazyQuery in App.js (code below) is removed, it will display simple "HELLO" message (working well), otherwise, I got the below error message
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
App.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { syncUser as syncRecord } from "./components/util";
import { useLazyQuery } from "#apollo/client";
export default function App(props) {
console.log("React.version1", React.version);
console.log("ReactDOM.version1", ReactDOM.version);
const [syncUser] = useLazyQuery(syncRecord, {}); //CULPRIT LINE
const [hasToken, setHasToken] = React.useState(false);
return <div className="App">HELLO</div>;
}
A few things I have checked
React version & React DOM version are same in index.js & App.js i.e. 16.13.1
I don't think I broke Hooks rule -- useState working well in the same sample code App.js
npm ls react returns long tree with multiple react (but other than react at root tree -- the rest (part of the library) are using same react#16.3.1 deduped
Apollo Client version
"#apollo/client": "^3.3.15",
"#apollo/react-hooks": "^4.0.0",
The base project is node js server-side code, and I created a client directory in it - which contains also a React app.
client package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#auth0/auth0-react": "^1.1.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.20.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"proxy": "http://localhost:4567/",
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
server-side package.json
{
"name": "cmis",
"version": "0.3.0",
"description": "NodeJS",
"engines": {
"node": "16.x"
},
"type": "module",
"main": "server.js",
"scripts": {
"start": "node server.js",
"heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build",
"test": "node test.js",
"generate": "plop",
"client": "cd client && yarn start",
"server": "nodemon -e js,graphql server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"#apollo/client": "^3.3.15",
"#apollo/react-hooks": "^4.0.0",
"#aws-sdk/client-codebuild": "^3.20.0",
"#aws-sdk/client-s3": "^3.20.0",
"#david.kucsai/react-pdf-table": "^0.3.0",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#react-pdf/renderer": "^1.6.12",
"#sendgrid/mail": "^7.4.0",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"aws-sdk": "^2.804.0",
"bull": "^3.19.1",
"constant-case": "^3.0.4",
"dataloader": "^2.0.0",
"dayjs": "^1.9.3",
"dotenv": "^8.2.0",
"ejs": "^2.5.6",
"express": "^4.17.1",
"express-graphql": "^0.11.0",
"express-jwt": "^6.0.0",
"express-jwt-authz": "^2.4.1",
"file-saver": "^2.0.5",
"filepond": "^4.23.1",
"filepond-plugin-file-validate-size": "^2.2.2",
"filepond-plugin-image-exif-orientation": "^1.0.9",
"filepond-plugin-image-preview": "^4.6.4",
"graphql": "^15.3.0",
"graphql-tools": "^6.2.1",
"jwks-rsa": "^1.11.0",
"knex": "^0.21.5",
"pg": "^8.3.3",
"pluralize": "^8.0.0",
"react": "16.13.1",
"react-apollo": "^3.1.5",
"react-filepond": "^7.1.0",
"react-lottie": "^1.2.3",
"react-redux": "^7.2.1",
"react-swipeable-views": "^0.13.9",
"react-typist": "^2.0.5",
"redis": "^3.0.2",
"redux": "^4.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"swiper": "^6.5.3",
"throng": "^5.0.0",
"uuid": "^8.3.0",
"yarn": "^1.22.10"
},
"devDependencies": {
"#faker-js/faker": "^6.0.0-alpha.3",
"concurrently": "^4.0.1",
"got": "^11.3.0",
"plop": "^3.0.5",
"tape": "^4.7.0"
},
"repository": {
"type": "git",
"url": "https://github.com/heroku/node-js-getting-started"
},
"keywords": [
"node",
"heroku",
"express"
],
"license": "MIT"
}
Delete your node_modules folder(also from the recycle bin)
and run npm install
It worked for me because i had two node_modules folder in the project directory
I'm working on an electron app, using React on the front end and I'm attempting to use Jest for testing. However, when I try to run tests I get the following error:
SyntaxError: C:\Users\JimArmbruster\source\repos\cyborg_cloud_explorer\cyborg_cloud_explorer_gui\src\assets\custom_components\stylesheets\buttons.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (1:1):
> 1 | #import "../../fonts/fonts.css";
| ^
2 |
3 | :root {
4 | --cyborgBlue: #65c8cc;
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:147:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:142:17)
at Parser.expectOnePlugin (node_modules/#babel/parser/src/parser/util.js:198:18)
at Parser.parseDecorator (node_modules/#babel/parser/src/parser/statement.js:424:10)
at Parser.parseDecorators (node_modules/#babel/parser/src/parser/statement.js:403:30)
at Parser.parseStatement (node_modules/#babel/parser/src/parser/statement.js:228:12)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/src/parser/statement.js:966:25)
at Parser.parseBlockBody (node_modules/#babel/parser/src/parser/statement.js:942:10)
at Parser.parseProgram (node_modules/#babel/parser/src/parser/statement.js:117:10)
at Parser.parseTopLevel (node_modules/#babel/parser/src/parser/statement.js:102:25)
I realize this question has been asked many times before but the most common solution is to add "["#babel/plugin-proposal-decorators", { "legacy": true }]" to the plugins section of my .babelrc file. Unfortunately that hasn't resolved the issue.
Here's my package.json file:
"name": "cyborg_cloud_explorer",
"version": "0.2.7",
"homepage": "./",
"author": "Cyborg Inc.",
"description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
"main": "public/electron.js",
"scripts": {
"start": "electron .",
"prestart": "npm run build",
"pack": "electron-builder --dir",
"dev": "concurrently \"npm run start-browser\" \"wait-on http://localhost:3000 && electron .\"",
"start-browser": "react-scripts start",
"eject": "react-scripts eject",
"ebuild": "npm run build && /node_modules/.bin/build",
"build": "react-scripts build",
"dist": "electron-builder",
"test": "jest __tests__/ --coverage",
"marge": "marge report.json",
"electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"dependencies": {
"#material-ui/core": "^4.12.3",
"aws4": "^1.11.0",
"axios": "^0.21.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"base32": "0.0.6",
"convert-csv-to-json": "^1.3.1",
"convert-excel-to-json": "^1.7.0",
"dotenv": "^10.0.0",
"ffi-napi": "^3.0.1",
"franc-min": "^5.0.0",
"hyperquest": "^2.1.3",
"jssha": "^3.2.0",
"keytar": "^6.0.1",
"mammoth": "^1.4.17",
"mochawesome-report-generator": "^5.1.0",
"ndjson": "^2.0.0",
"nibbler": "^0.2.0",
"node-addon-api": "^3.1.0",
"node-html-parser": "^3.3.6",
"node-machine-id": "^1.1.12",
"node-tika": "0.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-file-icon": "^1.0.0",
"react-hotkeys-hook": "^3.4.0",
"react-scripts": "^4.0.3",
"ref-napi": "^2.1.2",
"ref-struct-napi": "^1.1.1",
"version": "^0.1.2",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.0",
"#babel/plugin-transform-object-assign": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"concurrently": "^6.0.2",
"dotenv": "^10.0.0",
"electron": "^9.4.3",
"electron-builder": "^22.9.1",
"electron-builder-squirrel-windows": "^22.10.4",
"electron-chromedriver": "^11.0.0",
"eslint": "^7.17.0",
"jest": "^26.6.0",
"mocha": "^8.2.1",
"mochawesome": "^6.2.1",
"node-key-sender": "^1.0.11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"selenium-webdriver": "^4.0.0-beta.1",
"spectron": "^11.1.0",
"spectron-keys": "0.0.1",
"wait-on": "^5.3.0"
},
"build": {
"productName": "Cyborg Cloud Explorer",
"artifactName": "CloudExplorer",
"compression": "normal",
"forceCodeSigning": false,
"copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
"asarUnpack": [
"assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
],
"extraResources": [
"assets/vs_redist/*"
],
"files": [
"src/assets/fonts/**/*",
"src/assets/media",
"src/assets/dictionaries",
"src/assets/cyborg_cloud_engine",
"src/pages/**/*",
"src/*",
"build/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "squirrel",
"icon": "src/assets/media/cyborg.ico"
},
"linux": {
"target": "AppImage",
"icon": "./assets/media/256x256.png",
"executableName": "CloudExplorer",
"category": "Network",
"appId": "Cyborg.Cloud.Explorer"
},
"mac": {
"target": "dmg",
"icon": "./assets/media/cyborg.icns",
"appId": "com.cloud.explorer",
"category": "public.app-category.business"
},
"squirrelWindows": {
"iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
"loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And my .babelrc file:
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}```
Jest won't use the babel plugins out of the box, you need to install some additional packages.
With yarn:
yarn add --dev babel-jest babel-core regenerator-runtime
With npm:
npm install babel-jest babel-core regenerator-runtime --save-dev
Jest should then pick up the configuration from your .babelrc or babel.config.js.
Source: https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel
I think I've found the issue. When I changed the name of my .babelrc file to babel.config.json. I didn't get that error anymore.
According to Babel's docs, .babelrc files are file-relative whereas babel.config.json files are project wide.
Here's where you can read more about it: https://babeljs.io/docs/en/config-files
I have created my own npm package but while using in a test application am getting the following error: Add #babel/plugin-transform-react-jsx to the 'plugins' section of your Babel config to enable transformation.
Note: I've written my component in JSX
package.json
{
"name": "my-test-package",
"version": "1.4.3",
"description": "Rich form fieds with simple and complex validation",
"main": "index.js",
"homepage": "https://github.com",
"url": "https://github.com/",
"license": "MIT",
"bugs": {
"url": "https://github.com/"
},
"scripts": {
"start": "webpack-dev-server --mode development --env --open --hot --port",
"build": "./node_modules/.bin/webpack --mode production"
},
"author": "Harish",
"contributors": [
"Harish"
],
"peerDependencies": {
"react": "^16.6.1",
"react-dom": "^16.6.3",
"prop-types": "^15.5.4"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}
}
.babelrc file:
{
"presets": ["#babel/preset-env","#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
Thanks in advance.
You need to add that to your .babelrc file, not package.json
I am getting a
"regeneratorRuntime is not defined"
when trying to use async/await in a project.
My babelrc file is this currently:
{
"presets": ["env", "react"],
"plugins": [
"transform-runtime",
"transform-object-rest-spread"
]
}
and my package.json is:
{
"name": "****",
"version": "1.0.0",
"description": "****",
"main": "index.js",
"author": "****",
"license": "UNLICENSED",
"private": true,
"scripts": {
"start": "yarn build && nodemon server/index.js --ignore dist/ --ignore public/",
"watch": "parcel watch public/index.html --public-url /",
"build": "parcel build public/index.html --public-url /",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.5.5",
"axios": "^0.19.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"super-reset-css": "^1.0.5"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"jest": "^24.8.0",
"nodemon": "^1.14.11",
"parcel-bundler": "^1.5.1",
"sass": "^1.22.9"
}
}
I'm sort of new to configuring babel so not sure what to do here.
I fixed a similar problem using the following post
Try the following in .babelrc:
{
"presets": ["#babel/preset-env"],
"plugins": [
"#babel/plugin-transform-runtime"
],
...
with the following dev dependencies:
#babel/plugin-transform-runtime #babel/runtime
I think it is because you are using #babel/runtime.
My set up is #babel/runtime, #babel/core, #babel/plugin-transform-runtime and in the .bablerc set
"plugins": ["#babel/transform-runtime"]
I hope this helps.