SyntaxError: Cannot use import statement outside a module

[oleh-kazban-gl]

Hi there. Trying to use your module in my project (Angular 18, Nx, Jest etc), everything is working but I can't create unit tests because they fail everywhere I try to use my component that utilizes ngx-quill.

So, the problem is like this:
`
Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

C:\Users\myuser\Projects\myproject\node_modules\quill\quill.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import Quill, { Parchment, Range } from './core.js';
                                                                                  ^^^^^^

SyntaxError: Cannot use import statement outside a module

  13 |
  14 | import { EditorChangeContent, EditorChangeSelection, QuillEditorComponent } from 'ngx-quill';
> 15 | import Quill from 'quill';
     | ^
  16 | import Delta, { Op } from 'quill-delta';
  17 |
  18 | import { EditorService } from './editor.service';

  at Runtime.createScriptFromCode (../../../node_modules/jest-runtime/build/index.js:1505:14)
  at Object.<anonymous> (../ui/src/lib/editor/editor.component.ts:15:1)
  at Object.<anonymous> (../ui/src/lib/editor/index.ts:1:1)
  at Object.<anonymous> (src/lib/feature/feature.component.ts:21:1)
  at Object.<anonymous> (src/lib/feature/feature.component.spec.ts:18:1)

`

Tried to dug the proposed links:

• https://jestjs.io/docs/ecmascript-modules
• https://jestjs.io/docs/getting-started#using-typescript
  and googling the problem "SyntaxError: Cannot use import statement outside a module" - but without any success. What's wrong with my setup? Thanks.

[KillerCodeMonkey]

quilljs is released as esm and with jest it could be a little bit hard to get things working.

But you can try to use something like this in your jest.config

transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)', 'node_modules/quill/*'],

or you could create a default mock for quill module that is loaded in each test, or mock it manually by using jest.mock('quill', () => ({ ... }))

PS: Same question at quilljs repo: slab/quill#4338

[robinalexandre]

Hello there,

I got the same issue and it does not seem to work even with
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)', 'node_modules/quill/*']

Any idea why ?

[oleh-kazban-gl]

jest.mock('quill', () => ({ ... })) works fine, thanks

[luin]

transformIgnorePatterns: ['node_modules/(?!quill)'] should do the trick. By default jest/babel-jest ignores files in node_module but we need to enable it for esm packages.

[robinalexandre]

transformIgnorePatterns: ['node_modules/(?!quill)'] should do the trick. By default jest/babel-jest ignores files in node_module but we need to enable it for esm packages.

@luin not working on my side

[KillerCodeMonkey]

Then just mock the module ;-) or the whole quill-editor component Am 30. Juli 2024 17:21:01 MESZ schrieb Alexandre Robin ***@***.***>:

…

> `transformIgnorePatterns: ['node_modules/(?!quill)']` should do the trick. By default jest/babel-jest ignores files in node_module but we need to enable it for esm packages. @luin not working on my side -- Reply to this email directly or view it on GitHub: #1907 (comment) You are receiving this because you commented. Message ID: ***@***.***>

[daiscog]

The problem is actually in quill itself rather than ngx-quill so there's not much we can do about it here.

See slab/quill#4338

In particular, this workaround seemed to fix it for us.