Nextjs error - SyntaxError: Named export 'saveAs' not found. The requested module 'file-saver' is a CommonJS module

[stefan-krajnik]

Using dynamic import is not a solution, I need to be able to import extentions to generate html from JSON on server.

[hunghg255]

@stefan-krajnik how to can you get this error? can you share a repo?

[stefan-krajnik]

@hunghg255 I don't have it anywhere publicly available, but it's easy to reproduce.

If you import the editor anywhere where it runs on server, e.g. pages/* or pages/api/* it crashes. It only works if I separate it to a component which is then dynamically imported.

next 14.2.13

[stefan-krajnik]

The issue is here https://github.com/hunghg255/reactjs-tiptap-editor/blob/5b0b4aa21ab5539c4c3eb464d7c825f01da05180/src/extensions/ExportWord/ExportWord.ts#L2

I'd recommend either to use another package or import the package asynchronously when save is triggered

So here https://github.com/hunghg255/reactjs-tiptap-editor/blob/5b0b4aa21ab5539c4c3eb464d7c825f01da05180/src/extensions/ExportWord/ExportWord.ts#L65-L67

I'd do something like

const fileSaver = await import('file-saver')
const wordDocument = docxSerializer.serialize(editor.state.doc, opts) 
Packer.toBlob(wordDocument).then(blob => fileSaver.saveAs(new Blob([blob]), 'document.docx')) 
return true 

You can do the same even if you decide to use different library for saving files, it doesn't need to be part of the main bundle

[hunghg255]

The issue is here

https://github.com/hunghg255/reactjs-tiptap-editor/blob/5b0b4aa21ab5539c4c3eb464d7c825f01da05180/src/extensions/ExportWord/ExportWord.ts#L2

I'd recommend either to use another package or import the package asynchronously when save is triggered

So here

https://github.com/hunghg255/reactjs-tiptap-editor/blob/5b0b4aa21ab5539c4c3eb464d7c825f01da05180/src/extensions/ExportWord/ExportWord.ts#L65-L67

I'd do something like

const fileSaver = await import('file-saver')
const wordDocument = docxSerializer.serialize(editor.state.doc, opts) 
Packer.toBlob(wordDocument).then(blob => fileSaver.saveAs(new Blob([blob]), 'document.docx')) 
return true 

You can do the same even if you decide to use different library for saving files, it doesn't need to be part of the main bundle

oke, I got it, I will check late-night

[hunghg255]

@stefan-krajnik FYI: I resolved this bug, the problem now is Shiki package =))) I will re-check

[stefan-krajnik]

@hunghg255 any progress?

[stefan-krajnik]

@hunghg255 any progress?

[hunghg255]

@hunghg255 any progress?

try config next.config.js

const nextConfig = {
  transpilePackages: ['shiki'],
};