SyntaxError: Cannot use import statement outside a module

[gitneeraj]

Please describe the a concise description and fill out the details below. It will help others efficiently understand your request and get to an answer instead of repeated back and forth. Providing a minimal, complete and verifiable example will further increase your chances that someone can help.

Steps for Reproduction

created a basic CRA app. Visit the bare minimum reproducible repo at https://github.com/gitneeraj/test-quill-rte

Expected behavior: when running the tests yarn test should mount the component and test should pass

Actual behavior: Throws below error -

/home/xx/personal/test-quill/node_modules/quill/quill.js:1 ({"Object.":function(module,exports,require,dirname,filename,jest){import Quill, { Parchment, Range } from './core.js'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

> 1 | import RickTextEditor from "quill";
    | ^
  2 | import React, { forwardRef, useEffect, useLayoutEffect, useRef } from "react";
  3 | import "quill/dist/quill.snow.css";
  4 |

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
  at Object.<anonymous> (src/Editor.js:1:1)
  at Object.<anonymous> (src/App.js:2:1)
  at Object.<anonymous> (src/App.test.js:2:1)
  at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
  at runJest (node_modules/@jest/core/build/runJest.js:404:19)

Platforms: node - 19 & 20 Include browser, operating system and respective versions

Version:

I have looked at issue https://github.com/slab/quill/issues/4038 but this does not work anymore

[cjnoname]

Same errror here

[luin]

I believe this is a duplicate of https://github.com/facebook/create-react-app/issues/9938.

[chrishoage]

@luin Not really - the issue appears to be that quill is defined as type: module but doesn't define a module

See: https://nodejs.org/api/packages.html#dual-commonjses-module-packages

main should still point to a commonJS build module should point to an ESM build

Subpath exports can be used to define both require and module exports, and have types for them https://nodejs.org/api/packages.html#subpath-exports

As it stands today this package doesn't appear to fully support dual packages which makes integration with tools like jest challenging.

Please consider using one of the dual package approaches outlined in the link

[gitneeraj]

@chrishoage - thank you for the input. Do you think there is any workaround getting the unit tests running with this package? I tried to mock the entire package but it leads to whole lot of issues.

@luin - do you have any tentative date to fix this?

[chrishoage]

We used jest moduleNameMapper to point to the dist/quill.js file that is still in the package but not otherwise exposed via package.json

This allowed jest to use the "ADM" build of quill which jest can use with out any extra compilation on quill

[daiscog]

@chrishoage thanks for the hint, that's worked for us!

Specifically, in our jest.config.ts, we've added:

export default {
  //...
  moduleNameMapper: {
    '^quill$': 'node_modules/quill/dist/quill.js'
  },
}

For those using an nx monorepo with a root jest.preset.js file which all projects' jest configs inherit from, you can just pop the above config in that preset file instead of the individual jest.config.ts files.