[bug] ESM imports cause errors

[thiagodp]

What are you trying to achieve?

Use EcmaScript Modules (ESM) imports in test files. Example:

import { something } from '../src/something.js`

Feature( 'Example' );
// ...

What do you get instead?

import { something } from '../src/something.js`
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at ${APP}\node_modules\mocha\lib\mocha.js:390:36
    at Array.forEach (<anonymous>)
    at Mocha.loadFiles (${APP}\node_modules\mocha\lib\mocha.js:387:14)

Cannot use import statement outside a module

Details

• CodeceptJS version: 3.2.2
• NodeJS Version: 1415.1
• Operating System: Windows 10
• Configuration file: Same problem with configurations files created with npx codeceptjs init for any UI Helper,

[DerZyklop]

I am not sure if this is related, but maybe … here is an esm-issue at the playwright project: https://github.com/cucumber/cucumber-js/issues/1844

If you have a playwright setup that compiles via ts-node, you still can not use esm.

[thiagodp]

@DerZyklop thanks, but unfortunately it doesn't help.

[DavertMik]

that's true, currently it is not supported

[thiagodp]

@DavertMik It would be interesting to accept the same configurations as Mocha.

[kobenguyent]

I can use import in my test without any error.

import { generateCart } from "utils/CommonUtils";

[thiagodp]

@PeterNgTr How is your project configuration?

[kobenguyent]

My tsconfig.json

{
  "ts-node": {
    "files": true
  },
  "compilerOptions": {
    "target": "es2018",
    "lib": ["es2018", "DOM"],
    "esModuleInterop": true,
    "module": "commonjs",
    "strictNullChecks": false,
    "types": ["codeceptjs", "jest", "node"],
    "declaration": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "skipLibCheck": true
  },
  "exclude": ["node_modules"]
}

[kobenguyent]

I think I also use this package which kills the errors

require('import-export');

[thiagodp]

@PeterNgTr As you know, tsconfig.json is for a TypeScript project.

import-export is a workaround that may not work in some cases.

Thanks for the help, anyway.

The needed solution is probably something like Mocha does. Since CodeceptJS uses Mocha internally, I figure out that it can pass along the configuration.

[kobenguyent]

This is working now in test files. Closed for now.

[openmindculture]

@peterngtr @KobeNguyenT thanks for your contribution and sorry to spam a closed issue, but it seems like the right solution that I fail to understand completely.

Where exactly did you add require('import-export'); (and why isn't that import 'import-export'? I presumed:

npm install --save-dev import-export

add to codecept.conf.js : import 'import-export';

Still I get this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /myproject/codecept.conf.js from /myprojectnode_modules/codeceptjs/lib/config.js not supported. Instead change the require of codecept.conf.js in /myproject/node_modules/codeceptjs/lib/config.js to a dynamic import() which is available in all CommonJS modules.

My project uses esbuild, no babel and I had to add "type": "module" in package.json explicitly to make jasmine unit tests run, as the JavaScript (no TypeScript) to be tested already used import and export.

[kobenguyent]

hi @openmindculture isn't it the case you could try to setup the e2e tests with TS?

require('import-export'); is added on top of codecept.conf.js back to the time I still had e2e tests developed with JS. But since CodeceptJS is now moving to TS, I don't really that package anymore.

Hope that answer your concern.

[openmindculture]

Thanks @kobenguyent I will try. In the meantime I found another workaround and added another codecept/package.json setting "type": "commonjs".

[kobenguyent]

a workaround -> https://codecept.discourse.group/t/how-to-dynamically-load-esm-in-cjs/1309