Error while loading config - You appear to be using a native ECMAScript module configuration file

Question

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?

Andersonandert

Don't you have a jest.config.js ? – Encipher

Even more with nodejs I am surprised that you need babel – Encipher

No Julien, please what should I do? – Andersonandert

do you use import or require ? – Encipher

I had to support ES6 styled code like export default and import instead of require and module.exports because it a predetermined style which must be met to pass PR checks. @JulienTASSIN – Andersonandert

@Andersonandert you need to provide the solution as an 'answer', not nested in your question. Please can you fix? – Solace

@Gaz_Edge fixed. – Andersonandert

Try removing "type": "module" from package.json file – Sonde

Answer 1

TL;DR: Changing babel.config.<extension> to babel.config.cjs did the work. Check babel docs if you need a different config.

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.

Andersonandert

Renaming babel.config.js to babel.config.cjs did it for me! Thanks. – Eschar

@Eschar wow how do you explain that ?! Anyway thanks buddy saved me time. – Gawain

@Gawain I read that cjs means commonJS, I've been using node with --experimental-modules so I'm guessing .js defaults to modules (import) instead of commonJS (require). – Eschar

Answer 2

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"
  ]
}

Concoct

this works as well, please note that @babel/preset-typescript needs to be installed – Essie

This helped me resolve the issue on my end, with vite. – Contradistinguish

For me only this solution worked and I also had to add to package.json this jest config: "jest": { "modulePaths": ["<rootDir>"] } – Fireweed

Answer 3

Independent of the elements of the babel.config.js, what worked for me whas just changing the babel.config.js to Babel.config.cjs

However in case you need it, I will add my file:

module.exports = {
presets: [
    '@babel/preset-env',
    ['@babel/preset-react', { runtime: 'automatic' }],
    ],
};

It's also important that you install all required elements. this is the install command: npm install jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

Collen

Thanks, I found a similar solution - renaming it to babel.config.json. – Whacky