Bug: Build Error on Next.js 14 on v1.20.2, works on v1.18.0

[gersur]

Describe the issue

Module not found: Can't resolve './SVGLoader.mjs' Module not found: Can't resolve './widgets/InsertImageWidget.mjs'

Steps to reproduce the issue

1. Install js-draw@v1.20.2 in Next.js Project
2. Import in project
3. Run next build

Expected behavior

Build Successful

Observed behavior

js-draw works on v1.18.0

What I suspect from the changes v1.18.0 to v1.19.0 is SVGLoader.ts is moved to SVGLoader/index.ts. But in the js-draw/dist/mjs/lib.mjs, SVGLoader.ts import doesn't changed

packages/js-draw/src/SVGLoader.ts → packages/js-draw/src/SVGLoader/index.ts

Version information

1.20.2

Platform

No response

Logs

> next build

  ▲ Next.js 14.2.3
  - Experiments (use with caution):
    · instrumentationHook

   Creating an optimized production build ...
Failed to compile.

./node_modules/js-draw/dist/mjs/Editor.mjs:10:1
Module not found: Can't resolve './SVGLoader.mjs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/js-draw/dist/mjs/lib.mjs
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/document-sign/Dialog.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/ProcessActionDocumentSign.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/ApplicantPreview.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/ApplicantPage.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/page.tsx

./node_modules/js-draw/dist/mjs/image/export/editorImageToSVG.mjs:3:1
Module not found: Can't resolve '../../SVGLoader.mjs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/js-draw/dist/mjs/Editor.mjs
./node_modules/js-draw/dist/mjs/lib.mjs
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/document-sign/Dialog.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/ProcessActionDocumentSign.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/ApplicantPreview.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/ApplicantPage.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/page.tsx

./node_modules/js-draw/dist/mjs/lib.mjs:23:1
Module not found: Can't resolve './SVGLoader.mjs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/document-sign/Dialog.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/ProcessActionDocumentSign.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/ApplicantPreview.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/ApplicantPage.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/page.tsx

./node_modules/js-draw/dist/mjs/rendering/renderers/SVGRenderer.mjs:2:1
Module not found: Can't resolve '../../SVGLoader.mjs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/js-draw/dist/mjs/rendering/lib.mjs
./node_modules/js-draw/dist/mjs/lib.mjs
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/document-sign/Dialog.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/ProcessActionDocumentSign.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/ApplicantPreview.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/ApplicantPage.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/page.tsx

./node_modules/js-draw/dist/mjs/toolbar/AbstractToolbar.mjs:28:1
Module not found: Can't resolve './widgets/InsertImageWidget.mjs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/js-draw/dist/mjs/lib.mjs
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/document-sign/Dialog.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/process-action/ProcessActionDocumentSign.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/preview/ApplicantPreview.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/_components/ApplicantPage.tsx
./src/app/admin/(menu)/(shell)/job-schedule/applicant/[id]/page.tsx

> Build failed because of webpack errors

Additional information

No response

[personalizedrefrigerator]

Directory imports don't seem to be supported by ES modules. I'm now updating js-draw to avoid directory imports.

Thank you for reporting this!

Related StackOverflow post: https://stackoverflow.com/questions/64453859/directory-import-is-not-supported-resolving-es-modules-with-node-js

[gersur]

Thanks for the support and quick response!

./node_modules/js-draw/dist/mjs/lib.mjs

```javascript /** * The main entrypoint for the NPM package. Everything exported by this file * is available through the [`js-draw` package](https://www.npmjs.com/package/js-draw). * * ## Example * * [[include:doc-pages/inline-examples/main-js-draw-example.md]] * * @see * - {@link Editor} * - {@link Editor.loadFromSVG} * - {@link AbstractToolbar.addActionButton } * - {@link EditorSettings} * * @packageDocumentation */ import Editor from './Editor.mjs'; export * from './image/lib.mjs'; export * from './types.mjs'; export * from './inputEvents.mjs'; export { default as getLocalizationTable, matchingLocalizationTable } from './localizations/getLocalizationTable.mjs'; export * from './localization.mjs'; export { default as SVGLoader } from './SVGLoader.mjs'; export { default as Viewport } from './Viewport.mjs'; export * from '@js-draw/math'; export * from './components/lib.mjs'; export * from './commands/lib.mjs'; export * from './tools/lib.mjs'; export * from './toolbar/lib.mjs'; export * from './rendering/lib.mjs'; export * from './testing/lib.mjs'; export * from './shortcuts/lib.mjs'; export { default as EventDispatcher } from './EventDispatcher.mjs'; export { default as Pointer, PointerDevice } from './Pointer.mjs'; export { default as UndoRedoHistory } from './UndoRedoHistory.mjs'; export * from './util/lib.mjs'; // @internal export { default as __js_draw__version } from './version.mjs'; import AbstractToolbar from './toolbar/AbstractToolbar.mjs'; export { Editor, AbstractToolbar, }; /** * Using the HTMLToolbar alias is deprecated. Use * `AbstractToolbar` instead. * @deprecated */ export { AbstractToolbar as HTMLToolbar }; export default Editor; ```

I think this import is invalid because it's pointing to .mjs file, which doesn't exist

export  { default as SVGLoader }  from './SVGLoader.mjs';

Directory of node_modules\js-draw\dist\mjs


Directory of node_modules\js-draw\dist\mjs\SVGLoader


---

Yeah, I guess you're right, mjs doesn't support directory import

[personalizedrefrigerator]

I'm re-opening this until the new version has been released.

[personalizedrefrigerator]

This should be fixed in v1.20.3. Please let me know if this is still an issue.

For future reference, the .mjs extension is added by the build script on this line. A regression test for this issue can be found here.