[Question] ESM import issues when moving to Angular 13

[liamdocherty10]

We are moving to Angular 13 and are now finding that out existing E2E tests (stored in an e2e folder) are failing because we use imports from other Angular 13 packages and from the src folder within the same repo.

We have seen some similar issues and realised that one of our issues is because Angular 13 no longer compiles to CommonJS e.g.

• [Question] ESM Angular issues #16417
• [BUG] Extension required when importing other files with type="module" #13078

I have put together a simple repo to demonstrate the issue: https://github.com/liam-docherty/angular-13-playwright-demo-consumer.

In our company's use case we use an internal package but the issues can be easily replicated by using @angular/common as an import.

The tests will fail to run because I have included an import from @angular/common in https://github.com/liam-docherty/angular-13-playwright-demo-consumer/blob/master/e2e/specs/example.spec.ts.

/Users/liam.docherty/CodeRepos/angular-13-playwright-demo-consumer/node_modules/@angular/common/fesm2015/common.mjs:7
import * as i0 from '@angular/core';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I have then created a follow up branch where I changed to "type": "module" in package.json: https://github.com/liam-docherty/angular-13-playwright-demo-consumer/compare/module-type

However I then get the following error:

Error: Directory import '/Users/liam.docherty/CodeRepos/angular-13-playwright-demo-consumer/src/constants' is not supported resolving ES modules imported from /Users/liam.docherty/CodeRepos/angular-13-playwright-demo-consumer/e2e/specs/example.spec.ts

I can resolve this by changing that import to use the full path and add the a file extension. E.g.

import { title } from '../../src/constants';

to

import { title } from '../../src/constants/title.js';

However this then causes another issue:

Error: Directory import '/Users/liam.docherty/CodeRepos/angular-13-playwright-demo-consumer/src/mocks' is not supported resolving ES modules imported from /Users/liam.docherty/CodeRepos/angular-13-playwright-demo-consumer/src/constants/title.ts

Which is caused by us using imports from from index.ts files within the src code. We have many instances of this within our real use case.

We are looking for some advice on our options?

[dgozman]

@liamdocherty10 Unfortunately, there are no good options here. The reason is:

• To import an ESM-only package, you have to use an import statement, because require does not load ES modules. Since angular is only shipping an ESM package, you must import.
• import statements are only permitted in ES modules, so your test code must be a module as well.

Therefore the only option is to convert your project to "type": "module". Unfortunately, this means following ESM conventions like explicitly specifying directory indexes and file extensions.

[dgozman]

Closing as per above. If you still have questions, please file a new issue and link to this one.