UPDATED.
This error is coming up when I am making a pull request. There is a github workflow audit that runs checks on the pull request and it loads the test file from another repository.
- name: Run Audits
run: npx jest audits/ch-2 --json --outputFile=audits/ch-2.json --noStackTrace
Test suite failed to run
/Users/frankukachukwu/StudioProjects/covid-19-estimator-tksilicon-js/babel.config.js: Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.
How do I solve this issue?
SOLVED: For anyone who encounters this problem. This has got to do with Babel settings. The use of .mjs, cjs or js extension for the babel.config.extension. In my case where I was running LTE Node 12.6.2. I needed this configuration at the root of my directory babel.config.cjs. cjs is what is applicable for Nodejs when using "type"="module". See more about it here on babel docs.
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
And jest.config.cjs at the root too.
In addition to "cjs" solution, I was able to resolve this issue by converting babel.config.js to babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
],
"#babel/preset-typescript"
]
}
Related
There is code that is transpiled by babel. But on runtime error it shows a wrong line number.
I run the script this way.
node -r ./runner.js ./index.js
It uses the runner.
console.log('Runner. Registers babel.')
require('source-map-support').install()
require('#babel/register')({
extensions: ['.js'],
ignore: [
/node_modules[\\/](?!console-command-manager)/
],
});
Babel register uses the config from babel.config.js
console.log('Babel. Configuration.');
module.exports = {
presets: [['#babel/preset-env', { targets: { node: 'current' } }]],
plugins: [],
sourceMap: "inline"
};
When I throw an error in the code on runtime. It shows me wrong line numbers. I understand that source-map-support does not work.
VSCode debugging goes well. The editor see and understand source maps.
Help me to make source-maps workable.
The plugin registration of babel-plugin-source-map-support in babel.config.js is missed.
Read the description of the library babel-plugin-source-map-support
There two libraries are needed: babel-plugin-source-map-support and source-map-support. Install them both.
In babel file, register source-map-support plugin
{
sourceMaps: true,
plugins: ['source-map-support', ...]
}
Enable on runtime in a file at the top.
require('source-map-support').install()
Now, when it fails it has to show the right error line number of the source code.
I'm a C++ developer and beginner in the Node world.
I would like to create a CEP and VUE based Photoshop plugin.
The skeleton plugin works well.
I would like to use node-libcurl package for this plugin.
I installed libcurl - It's OK.
npm i node-libcurl --save
I put down into my C4.js
const { curly } = require('node-libcurl');
When I want to build my project I got this error:
INFO Starting development server... 98% after emitting CopyPlugin
ERROR Failed to compile with 1 error
7:26:51 PM error in
./node_modules/node-libcurl/lib/binding/node_libcurl.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are
configured to process this file. See https://webpack.js.org/concepts#loaders (Source code omitted for > > this binary file)
# ./node_modules/node-libcurl/dist/Easy.js 5:17-60
# ./node_modules/node-libcurl/dist/index.js
# ./src/c4/C4.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.22:8080&sockPath=/sockjs-node
(webpack)/hot/dev-server.js ./src/main.js
I tried this webpack.config.js in .... \node_modules\node-libcurl
module.exports = {
target: "node",
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.node$/,
loader: "node-loader",
},
],
},
};
... but it did not work.
I appreciate any help
Thx:
Carlos
It was my fail.
I got answer from developer.
This library is not supposed to work in the Browser, it is a backend-only library.
/Carlos
I have an app built using create-react-app and it has an entrypoint that used something like this —
require('babel-register')({
ignore: [/(node_modules)/],
presets: ['es2015', 'react-app'],
plugins: [
'syntax-dynamic-import',
'dynamic-import-node',
'react-loadable/babel'
]
});
require('./index');
I'm in the process of upgrading Node (from v8 to v13.5) and decided to upgrade Babel too. Using Babel 7, the above piece of code was rewritten as —
require('#babel/register')({
ignore: [/(node_modules)/],
presets: ['#babel/preset-env', 'react-app'],
plugins: [
'#babel/plugin-syntax-dynamic-import',
'dynamic-import-node',
'react-loadable/babel'
],
});
require('./index');
Now when I run this, I get the error —
internal/modules/cjs/loader.js:1160
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /my-app/node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/esm/asyncToGenerator.js
require() of ES modules is not supported.
require() of /my-app/node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/esm/asyncToGenerator.js from /my-app/server/controllers/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename asyncToGenerator.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /my-app/node_modules/babel-preset-react-app/node_modules/#babel/runtime/helpers/esm/package.json.
I'm guessing this is because preset-env is using modules support as it is detecting it in my version of Node (v13.6.0). If that's how I can fix this issue, how do I force it to use the es2015 preset? They've long been deprecated in favor of preset-env.
I stumbled upon this comment on the Babel project's issue tracker that says BABEL_ENV should be set to test to transpile modules.
The relevant code from the linked comment is here —
[
isEnvTest && [
// ES features necessary for user's Node version
require('#babel/preset-env').default,
{
targets: {
node: 'current',
},
},
],
(isEnvProduction || isEnvDevelopment) && [
// Latest stable ECMAScript features
require('#babel/preset-env').default,
{
// Allow importing core-js in entrypoint and use browserlist to select polyfills
useBuiltIns: 'entry',
// Set the corejs version we are using to avoid warnings in console
// This will need to change once we upgrade to corejs#3
corejs: 3,
// Do not transform modules to CJS
modules: false,
// Exclude transforms that make all code slower
exclude: ['transform-typeof-symbol'],
},
]
]
Setting BABEL_ENV to test fixes my issue.
You can either downgrade to Node v10 or add this to the existing one
"start": "node --experimental-modules src/index.mjs "
If you are using geolib library. Please try upgrading your geolib dependency to 3.2.x. The "type": "module" flag has been removed from 3.1.x -> 3.2.x
or try changing he node version to 12.11.1, 12.12.0
Refer the discussion here https://github.com/manuelbieh/geolib/issues/208
When running my tests with jest, I had the above error;
Error: Uncaught [TypeError: array.map(...).flat is not a function]
Following the solution from that issue, https://github.com/kulshekhar/ts-jest/issues/828
I've installed core-js on dependencies and putting this in jest.config.js
setupFiles: ['core-js'],
I'd receive that another error;
Error: Uncaught [Error: Not supported]
And this is occurring only with jest, I'm using babel and webpack on my application and storybook without errors on flat.
My jest.config.js
const PATH = require('./path')
module.exports = {
setupFilesAfterEnv: ['./rtl.setup.js'],
moduleFileExtensions: ['js'],
verbose: true,
moduleNameMapper: {
'#components(.*)$': `${PATH.source}/components/$1`
},
transform: {
'^.+\\.js$': 'babel-jest'
}
}
per https://github.com/kulshekhar/ts-jest/issues/828#issuecomment-433976880
this problem can be solved by running
npm install --save-dev core-js
and adding core-js to your jest config's setupFiles
"setupFiles": ["core-js"]
I installed core-js (#3.4.1) and it worked for me.
Also had to add import 'core-js'; at the top of my test file's imports.
Edit: Using it in a create-react-app project that is not ejected, so I don't access webpack files and I don't have a custom config for jest (nor jest-ts).
This error happens if your node version is old. Try to update it to the latest version.
Searching more about core-js, since it's substituting #babel/polyfill, that config has worked to me.
[
"#babel/preset-env",
{
"targets": {
"node": 4
},
"useBuiltIns": "usage",
"corejs": 3
}
]
And core-js#3 being installed as a dependency.
I'm currently migrating a codebase from Babel 6 to 7. The code is made up of multiple individual projects with their own configs.
The main project imports files from external however the scripts being imported from external by main aren't being transpiled and fails on "Unexpected token import". Scripts located directly in main do transpile correctly.
I'm using the following command within the main project to transpile the scripts:
babel-node ./index.js
Another project uses Webpack to do the same thing and handles everything correctly.
This setup also worked fine with Babel 6.
.babelrc for main
{
"ignore": [
"node_modules"
],
"presets": [
["#babel/preset-env", {
"targets": {
"node": "current"
},
"useBuiltIns": "entry"
}]
],
"plugins": [
[
"module-resolver", {
"alias": {
"External": "../external"
}
}
],
"#babel/plugin-proposal-decorators",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-proposal-export-default-from",
"#babel/plugin-proposal-export-namespace-from",
"#babel/plugin-proposal-class-properties"
]}
.babelrc for external
{
"presets": [
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
"#babel/plugin-proposal-object-rest-spread",
"#babel/plugin-transform-runtime"
]}
I've created an example to detail my problem at:
https://gitlab.com/nerdyman/babel-7-external-import-broken
TL;DR I'm trying to import scripts from outside of a project's root directory but they don't get transpiled by Babel, the scripts from within the project do transpile.
I've managed to fix this by following this comment.
The solution is:
Move .babelrc in the main project to babel.config.js and make it a CommonJS module
Add --ignore=node_modules when running babel-node from the main project
This still seems pretty hacky and Babel doesn't seem to acknowledge the ignore property within babel.config.js it must be specified as a flag.
Babel 7 appears to only allow imports within the directory the babel config is in, however explicitly setting the --ignore flag overrides this.
You can view my working demo and the diff of what I changed to get it working.
The issue is still open on GitHub so there may be a better solution in the future.
current directory's .babelrc won't be loaded while import files in external directory, you may place a .babelrc in that directory and set its presets by relative path(instead of short name):
{ "presets": ["..\pad\node_modules\babel-preset-env"],
"retainLines": true }