import statement in .js file throws a syntax error

[kliehm]

I'm using the polyfill in context with Jest and Vue in a TypeScript environment, and I get this error, because there seems to be an import statement in a JavaScript file. Would it help to rename it .mjs?

node_modules\element-internals-polyfill\dist\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { forceCustomStateSetPolyfill,
forceElementInternalsPolyfill, isElementInternalsSupported, } from "./element-internals.js";
                                                                                      ^^^^^^

SyntaxError: Cannot use import statement outside a module

[jo-hoff]

I am encountering the same issue

[cerenbattal]

I have the same issue on a React app with Jest and React Testing Library.

[georgwittberger-telekom-mms]

This package seems to be ESM-only which does not work well with Jest.

You have to run the package trough a module transform. Dependening on your project setup this can be easier or more complicated to configure.

In our Next.js application we have just added element-internals-polyfill to the transpilePackages array in next.config.mjs file. Then we use Vercel's next/jest.js package to configure Jest, as described here: https://nextjs.org/docs/app/building-your-application/testing/jest

For other project setups you would have to set a proper transform configuration in your Jest config.

And make sure that this package is not excluded because it resides in node_modules. See https://jestjs.io/docs/configuration#transformignorepatterns-arraystring

Maybe something like this:

const config: Config = {
  transformIgnorePatterns: ['/node_modules/(?!element-internals-polyfill/)'],
};