I am going to use solanaweb3 on babelrc project.
When I run npm start I am getting .
I have gone through many posts on github and stackoverflow.
npm install -g browserify
npm install --save-dev browserify babelify babel-preset-es2015 babel-preset-stage-0 babel-preset-env babel-preset-react
npm install #babel/core --save
What is solution?
Here is my package.json content.
"scripts": {
"start": "budo src/index.js"
},
"dependencies": {
"#babel/runtime": "^7.14.8",
"#solana/web3.js": "^1.29.2",
"babel-core": "7.0.0-bridge.0"
},
"devDependencies": {
"#babel/core": "^7.15.5",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babelify": "^10.0.0",
"browserify": "^16.5.2",
"budo": "^11.6.4"
},
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"#babel/preset-env"
]
}
]
]
}
}
Related
I init my first vscode extension following this page.
Here is my steps:
npm install -g yo generator-code
yo code
And here is the package.json generated:
{
"name": "helloworld",
"displayName": "helloworld",
"description": "description helloworld",
"version": "0.0.1",
"engines": {
"vscode": "^1.72.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:helloworld.helloWorld"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "helloworld.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#types/glob": "^8.0.0",
"#types/mocha": "^10.0.0",
"#types/node": "16.x",
"#types/vscode": "^1.72.0",
"#typescript-eslint/eslint-plugin": "^5.38.1",
"#typescript-eslint/parser": "^5.38.1",
"#vscode/test-electron": "^2.1.5",
"eslint": "^8.24.0",
"glob": "^8.0.3",
"mocha": "^10.0.0",
"typescript": "^4.8.4"
}
}
When I press H5 to debug, I got no command matched here:
I was stuck here for a while, where is my command??
I've encountered this just now as well. Make sure that engines.vscode in package.json matches the version of vscode you are running:
"engines": {
"vscode": "^1.73.0"
},
I guess the generator will use the latest version available, but you might not have upgraded yet. That was the case for me.
#tacospice pointed out exactly. in package.json, engines.vscode determines minimum version of VSCode. In my case, yo created extension template which set minimum VSCode version(1.74.0) newer than working VSCode(1.70.0). Check Help -> About -> version with package.json.
I am setting up testing-library/react with mocha. Faced a lot of problems on the setup that were resolved by installing babel libraries and configuring them in .babelrc file as explained on the bottom most part of this question. Now, I am stuck on this error:
> mocha --exit --require #babel/register --require jsdom-global/register
D:\projects\demo_app\node_modules\antd\es\row\index.js:1
(function (exports, require, module, __filename, __dirname) { import { Row } from '../grid';
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
This comes from ant.design component which uses the syntax above. I have tried to test a dummy component like below:
const component = () => (<div>hello</div>)
And it has no problem. But whenever I import my real component that I need to test that is using ant design, I get the error above.
Is it setup part for babel not configured properly? I have no idea how to fix the error. Somehow have a guess that it might be related to babel presets or plugins.
P.S. My project is using Create React App, the exact same test runs smoothly with Jest, but for some reason I don't want to use jest.
Below is .babelrc
{
"presets": [
["#babel/preset-env",
{
"targets": {
"esmodules": true,
"node": "current"
}
}
],
["#babel/preset-react"]
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
["module-resolver", {
"root": ["./src"],
"alias": {
"underscore": "lodash"
}
}]
]
}
Below is package.json
{
"dependencies": {
"antd": "^4.4.2",
"axios": "^0.19.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-google-oauth": "^1.0.0",
"react-icons": "^3.10.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.0.1",
"validator": "^13.1.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --exit --require #babel/register --require jsdom-global/register",
"test:jest": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.9",
"#babel/plugin-proposal-class-properties": "7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "7.12.7",
"#babel/register": "7.12.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"babel-eslint": "10.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"chai": "4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-flowtype": "^3.13.0",
"eslint-plugin-import": "^2.20.1",
"husky": "^4.2.1",
"jsdom": "^16.4.0",
"jsdom-global": "^3.0.2",
"mocha": "8.2.1",
"msw": "^0.19.5",
"react-test-renderer": "^16.13.1",
"redux-mock-store": "^1.5.4",
"standard": "^14.3.1"
},
"optionalDependencies": {
"fsevents": "^2.1.2"
},
"standard": {
"parser": "babel-eslint",
"ignore": [
"/public"
]
},
"jest": {
"transformIgnorePatterns": [
"node_modules/?!(react)/"
]
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
Any help would be appreciated.
You have "esmodules": true which forces Babel to use ES modules. That means that if you're using Node, it needs to support ES modules, and you either need to have your tests in .mjs files or have "type": "module" in package.json. If this isn't supported or you want to support older Node versions, remove "esmodules": true from your Babel config to enable compatibility with CJS modules.
I'm trying to create a build for this project but I've faced this issue with babel :
Error: [BABEL] D:\open-source\React\react-notify\src\components\Notification\Action\index.js:
As of v7.0.0-beta.55, we've removed Babel's Stage presets.
Please consider reading our blog post on this decision at
https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets
for more details. TL;DR is that it's more beneficial in the
long run to explicitly add which proposals to use.
For a more automatic migration, we have updated babel-upgrade,
https://github.com/babel/babel-upgrade to do this for you with
"npx babel-upgrade".
If you want the same configuration as before:
{
"plugins": [
// Stage 2
["#babel/plugin-proposal-decorators", { "legacy": true }],
"#babel/plugin-proposal-function-sent",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-numeric-separator",
"#babel/plugin-proposal-throw-expressions",
// Stage 3
"#babel/plugin-syntax-dynamic-import",
"#babel/plugin-syntax-import-meta",
["#babel/plugin-proposal-class-properties", { "loose": false }],
"#babel/plugin-proposal-json-strings"
]
}
If you're using the same configuration across many separate projects,
keep in mind that you can also create your own custom presets with
whichever plugins and presets you're looking to use.
module.exports = function() {
return {
plugins: [
require("#babel/plugin-syntax-dynamic-import"),
[require("#babel/plugin-proposal-decorators"), { "legacy": true }],
[require("#babel/plugin-proposal-class-properties"), { "loose": false }],
],
presets: [
// ...
],
};
};
my package.json:
{
"name": "react-notify",
"version": "0.1.0",
"description": "Push notification component for React",
"main": "dist/index.js",
"module": "dist/index.js",
"babel": {
"presets": [
"#babel/react",
"#babel/env",
"#babel/stage-2"
]
},
"license": "MIT",
"dependencies": {
"#babel/runtime": "^7.11.2",
"#fortawesome/fontawesome-svg-core": "^1.2.30",
"#fortawesome/free-brands-svg-icons": "^5.14.0",
"#fortawesome/free-solid-svg-icons": "^5.14.0",
"#fortawesome/react-fontawesome": "^0.1.11",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"styled-components": "^5.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/Notification --out-dir dist --copy-files",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"resolutions": {
"styled-components": "^5"
},
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"#babel/preset-stage-2": "^7.8.3",
"#storybook/addon-actions": "^6.0.21",
"#storybook/addon-essentials": "^6.0.21",
"#storybook/addon-links": "^6.0.21",
"#storybook/node-logger": "^6.0.21",
"#storybook/preset-create-react-app": "^3.1.4",
"#storybook/react": "^6.0.21",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.4",
"enzyme-to-json": "^3.5.0",
"react-addons-test-utils": "^15.6.2",
"react-is": "^16.13.1",
"react-test-renderer": "^16.13.1"
}
}
I tried :
npx babel-upgrade
But still facing the same issue.
My Action/index.js:
import React, { useContext } from "react"
import PropTypes from "prop-types"
import { Button, Wrapper } from "./Styled"
import Context from "../context"
const Action = ({ name, onClick }) => {
const { type } = useContext(Context);
if (!(typeof onClick === "function")) {
throw new Error("Action event should be a function")
}
return (< Wrapper >
<Button type={type} onClick={onClick}>{name}</Button>
</Wrapper >)
}
Action.propTypes = {
name: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired
}
export default Action
Why I faced this issue?
Babel had stopped supporting Stage Presets in the configuration. Read this article.
How to solve the issue?
By running this command :
npx babel-upgrade
Then:
npm install
This will replace the legacy dependencies with :
"devDependencies": {
"#babel/cli": "^7.11.6",
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.0.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
}
And replace the configuration with :
"babel": {
"presets": [
"#babel/react",
"#babel/env"
]
},
I have code reading .env using dotenv that is working in dev but after transcompiling with Babel the values from process.env are undefined. I created a sample program to illustrate the problem which is below.
If I'm in projectRoot and run
npm run start-w
then
console.log(process.env.VAR1)
prints the value 'var1Val'
However, if I do
npm run build
cd dist
node index.js
the value of VAR1 is 'undefined'.
index.js
import 'dotenv/config'
console.log('VAR1', process.env.VAR1)
.env
VAR1=var1val
VAR2=var2val
VAR3=var3val
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
"#babel/plugin-transform-runtime",
]
}
package.json
{
"name": "dotenv.node-babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"#babel/runtime": "^7.4.3",
"dotenv": "^7.0.0"
},
"devDependencies": {
"#babel/cli": "^7.4.3",
"#babel/core": "^7.4.3",
"#babel/node": "^7.2.2",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#types/dotenv": "^6.1.1",
"nodemon": "^1.18.11",
"rimraf": "^2.6.3"
},
"scripts": {
"clean-dist": "rimraf dist",
"build": "npm run-script clean-dist && babel . -d dist --ignore node_modules",
"start": "babel-node index.js",
"start-w": "NODE_ENV=devLocal nodemon --exec babel-node index.js"
},
"author": "",
"license": "ISC"
}
If you do not have a .env file in your build directory, try creating one. I guess that's why the environment variable is undefined.
I'm trying to use an additional babel plugin when running Ava to transpile react dynamic imports so they can run on node (based on this response)
ava dynamic syntax import enable support
I cannot add it to my main .babelrc file as we are implementing bundle splitting in webpack.
To get around this I'm trying to include the plugin through ava's babel configuration. When I run ava, babel does not use the additional plugin.
package.json
{
"dependencies": {
"babel-cli": "6.16.0",
"babel-core": "^6.26.3",
"babel-eslint": "7.2.1",
"babel-loader": "^7.1.2",
"babel-plugin-dynamic-import-node": "^2.1.0",
"babel-plugin-flow-react-proptypes": "^5.1.2",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-recharts": "1.1.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "6.16.0",
"babel-preset-es2015-node": "^6.1.1",
"babel-preset-react": "6.16.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-preset-env": "^1.7.0",
"babel-register": "6.16.3"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill",
"ignore-styles"
],
"babel": {
"plugins": [
"babel-plugin-dynamic-import-node"
]
}
}
}
.babelrc
{
"plugins": [
["babel-plugin-transform-builtin-extend", {
"globals": ["Error"]
}],
"recharts",
"transform-object-rest-spread",
"flow-react-proptypes",
"transform-flow-strip-types",
"transform-async-to-generator",
"transform-class-properties",
"syntax-dynamic-import",
"react-hot-loader/babel",
[
"module-resolver",
{
"root": ["./src"],
"alias": {
"tests": "./tests"
}
}
]
],
"presets": ["env", "react"]
}
0.24 is quite old. The latest version for Babel 6 is 0.25, but if possible you should upgrade to Babel 7 and use the latest AVA 1.0 beta.