I continue to get:
App.jsx:11 Uncaught ReferenceError: regeneratorRuntime is not defined
on any line that does an async. I don't what that polyfill, but I am having a hard time getting rid of it:
app.jsx:11)
const fetcher = (async () => {
"#babel/cli": "^7.4.4",
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"#types/react": "^16.8.17",
"babel-preset-env": "^1.7.0"
here is the .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"chrome": ">70",
},
"exclude": ["transform-regenerator"]
},
"#babel/preset-react"
]
]
}
If you want to use async, await with (ES6 or ES Next) then you must need to install #babel/polyfill but you don't need to write anything in babelrc file. Just install
npm install --save #babel/polyfill
From the documentation:
Because this is a polyfill (which will run before your source code),
we need it to be a dependency, not a devDependency
And finally you need to import #bable/polyfill in your mainJS (App.js) file like:
import "#babel/polyfill";
This appears to be a bug in the parcel js bundler.
https://github.com/babel/babel/issues/9971
Related
I am working on a legacy project which uses RequireJs to load and resolve all the dependencies. It works fine on modern browsers, but i need to add support for IE11.
I tried to use babel 7 with #babel/preset-env with following .babelrc
{
"presets": [
["#babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers" : ["ie>=11"]
},
"modules": false
}]
],
"compact": false
}
the import statements injected by the preset as following
import "core-js/modules/es.function.name.js";
cause error "import statements can't be used outside a module". Even when I use modules: "amd", then core-js is imported as
define(["core-js/modules/es.array.filter.js", "core-js/modules/es.object.to-string.js", "core-js/modules/es.string.includes.js", "core-js/modules/es.function.name.js", "core-js/modules/es.regexp.exec.js", "core-js/modules/es.string.split.js", "core-js/modules/es.string.small.js", "core-js/modules/es.string.search.js"], function (_esArrayFilter, _esObjectToString, _esStringIncludes, _esFunctionName, _esRegexpExec, _esStringSplit, _esStringSmall, _esStringSearch) {
"use strict";
//...
});
which throws error like "define is not defined in require.js".
When using useBuiltIns: "entry", and then including core-js as
require(["core-js", ../other modules], function(corejs, ...){
}
)
in the main.js file, it fails to correctly resolve the path of the files even though I have included the path to core-js in require.config.paths.
I tried #babel/runtime and #babel/plugin-transform-runtime but no luck there.
So my question is what would be the best way to add babel and the required polyfills in my RequireJs project so that it is compatible with IE 11?
I've a outdated app that uses very older few packages those doesn't support ES Module as an example file-type package. So if you setup babel and node HTTP server with and then install file-type package then start building and running will throw error message like below:
Error [ERR_REQUIRE_ESM]: require() of ES Module E:\test\testbabel\node_modules\file-
type\index.js from E:\test\testbabel\dist\index.js not supported.
Instead change the require of E:\test\testbabel\node_modules\file-type\index.js in
E:\test\testbabel\dist\index.js to a dynamic import() which is available in all CommonJS
modules.
at Object.<anonymous> (E:\test\testbabel\dist\index.js:10:17) {
code: 'ERR_REQUIRE_ESM'
}
I tried this on a fresh project though my old project has an outdated config or so, It still throwing this error
Here are my index.js codes
import http from 'http';
import { fileTypeFromFile } from 'file-type';
const server = http.createServer((req, res) => {
res.end('Hello from the server');
}).listen(4001);
console.log('Server is up and running');
export default server;
file package.json.
{
"name": "testbabel",
"version": "1.0.0",
"description": "test babel with http or express",
"main": "index.js",
"scripts": {
"build": "babel index.js -d dist",
"start": "npm run build && node dist/index.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/cli": "^7.17.10",
"#babel/core": "^7.18.2",
"#babel/plugin-transform-modules-commonjs": "^7.18.2",
"#babel/preset-env": "^7.18.2"
},
"dependencies": {
"file-type": "^17.1.1"
}
}
I just tried to import the package and got the errors above.
attempt:
I thought a converter might help so used #babel/plugin-transform-modules-commonjs but still didn't help, and seems no effect on including that package
I'm not sure but added some tweaks on package.json like "type": "module" "type": "commonjs" didn't help at all.
what is the easiest solution for this issue and how do we fix it?
Note: I saw people were going back to the supported package instead of new one which doesn't make sense to me as a solution.
Option1(babel with mocha): Rename "index.js" to "index.mjs" and modify file-type's pacakage.json ("index.js" to "index.mjs"), then leave Babel to transpile for you.
// babel-register.js
const babel_register = require("#babel/register").default;
babel_register({
ignore: [
// Only work on Project-wide configuration
// overrides ignore can transpile packages(modules) from node_modules (https://babeljs.io/docs/en/babel-register/#ignores-node_modules-by-default)
],
});
Use babel.config instead of .babelrc
//.mocharc.js
require("./babel-register");
module.exports = {
// https://github.com/mochajs/mocha/blob/v8.4.0/example/config/.mocharc.js
ui: "bdd",
timeout: 5000,
recursive: true,
};
Option2(babel only): Using dynamic import expression
async function doSomething() {
const {fileTypeFromStream} = await import("file-type");
}
and
["#babel/preset-env", {
exclude: ["proposal-dynamic-import"]
}]
Avoiding Babel tanspile dynamic import expression
I am trying to use babel module resolver plugin with eslint + create react app but I am unable to start the application, getting the error
internal/modules/cjs/loader.js:1237
throw err;
^
SyntaxError: C:\Users\enisr\Desktop\projects\pcPartPicker\jsconfig.json:
Unexpected token } in JSON at position 166
at parse (<anonymous>)
I have set up a git repo showcasing the problem https://github.com/sgoulas/pcPartPicker
I have read the instructions in the docs and in the original repository and I am unable to configure it correctly.
My configuration files are the following:
.babelrc
{
"plugins": [
["module-resolver", {
"extensions": [
".js",
".jsx",
".es",
".es6",
".mjs"
],
"root": ["./src"],
"alias": {
"#components": "./src/components"
}
}
]
]
}
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"#components/*": ["./src/components/*"],
}
}
}
webpack.config.dev.js
var path = require("path");
module.exports = {
include: path.appSrc,
loader: require.resolve("babel-loader"),
options: {
plugins: [
[
"module-resolver",
{
root: ["./src/App"],
alias: {
"#components": "./src/components",
},
},
],
],
cacheDirectory: true,
},
};
My component:
import { GPUtable, CPUtable } from "#components/Tables";
const App = () => {
return (
<>
<GPUtable />
<CPUtable />
</>
);
};
export default App;
There are some minor fixes you need to make (below), but the main issue is that Create React App does not expose the webpack config, you'll need to eject to edit that.
npm run eject
Merge the babel configs: delete the babel key + value at the bottom of the package.json, and paste the value into your bablrc ("presets": ["react-app"],).
Add import React from 'react'; to the top of App.js
Confirmed locally that the app will run.
Other suggested fixes
Your jsconfig has a trailing comma after the array value in #components/*. You need to remove it because JSON doesn’t support them.
You need to fix the include path in weback.config.dev.js. appSrc isn't something defined on the node path module. Try using path.resolve(__dirname, 'src') - the example in their docs is creating/importing a paths object with appSrc pointing to this value.
You're missing test: /\.(js|jsx|mjs)$/, in webpack.config.dev.js.
I am writing first tests for my app and just install Jest.
My test is pretty simple, so I don't think the error I am getting is coming from there.
import React from 'react';
import renderer from 'react-test-renderer';
import FancyInput from './FancyInput';
describe('FancyInput', () => {
it('should render correctly', () => {
expect(
renderer.create(
<FancyInput />
)
).toMatchSnapshot();
});
});
Error when run the test is Support for the experimental syntax 'jsx' isn't currently enabled
also
`Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.`
My webpack file has the following thing:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-react',
],
plugins: [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-optional-chaining"],
["#babel/plugin-syntax-jsx"],
]
}
}
},
also my package.json has all the plugins I believe are necessary
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/plugin-proposal-optional-chaining": "^7.11.0",
"#babel/plugin-syntax-jsx": "^7.10.4",
"#babel/preset-react": "^7.0.0",
what am I missing here ?
I tried to use following babelrcs:
{
"presets": [
["es2015", { "transform-es2015-modules-commonjs": { "loose": true } }]
]
}
fails with "Invalid options type for foreign"
{
"presets": ["es2015"],
"plugins": [
["transform-es2015-modules-commonjs", { "loose": true }]
]
}
ignores the "loose" option
{
"plugins": [
["transform-es2015-modules-commonjs", { "loose": true }]
]
}
does not use the preset
By enabling es2015, you are asking for non-loose-mode modules. If you want loose module modes in Babel v6 (at least at the moment), you would need to explicitly list the plugins you wish to use by listing everything that is part of es2015.
I ended up creating a preset es2015-mod for this same purpose - an exact copy of Babel's es2015 with loose modules enabled.
babel-preset-es2015-loose package has been deprecated. With babel-preset-es2015 v6.13.0+, you can now configure your .babelrc like so:
{ presets: [ ["es2015", {"loose": true}] ] }
For me it was an old babel-core version. You need at least 6.13+
NEW: Using es2015-loose preset
es2015-loose is a preset that uses modify-babel-preset to modify es2015 preset and enable loose mode where available.
Use it like that:
{
"presets": ["es2015-loose"]
}
Make sure to install both es2015 and es2015-loose packages:
$ npm install --save-dev babel-preset-es2015-loose babel-preset-es2015
PS: There are other loose presets for example if you target node versions >= 4 you can use es2015-node4-loose preset.