Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
gersur opened this issue Jun 4, 2024 · 4 comments
Closed

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

gersur opened this issue Jun 4, 2024 · 4 comments
Labels
bug Something isn't working

Comments

@gersur
Copy link

gersur commented Jun 4, 2024

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

image

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

@gersur gersur added the bug Something isn't working label Jun 4, 2024
@personalizedrefrigerator
Copy link
Owner

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
Copy link
Author

gersur commented Jun 4, 2024

Thanks for the support and quick response!

./node_modules/js-draw/dist/mjs/lib.mjs
/**
 * 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

image

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

image


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

@personalizedrefrigerator
Copy link
Owner

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

@personalizedrefrigerator
Copy link
Owner

personalizedrefrigerator commented Jun 4, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants