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

reactjs-tiptap-editor/src/extensions/ExportWord/ExportWord.ts

Line 2 in 5b0b4aa

import { saveAs } from 'file-saver'

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

So here

reactjs-tiptap-editor/src/extensions/ExportWord/ExportWord.ts

Lines 65 to 67 in 5b0b4aa

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

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

reactjs-tiptap-editor/src/extensions/ExportWord/ExportWord.ts

Line 2 in 5b0b4aa

import { saveAs } from 'file-saver'

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

So here

reactjs-tiptap-editor/src/extensions/ExportWord/ExportWord.ts

Lines 65 to 67 in 5b0b4aa

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

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?