ESNext build kan niet worden gebruikt met Next.js serverside

[martinbroos]

Error: SyntaxError: Cannot use import statement outside a module

Geimporteerde modules in Next dienen ofwel commonJS te zijn of een ES module maar dan moet er wel in de package.json "type": "module" staan. Anders wordt dit niet als ES module opgepikt.

Na een snelle test werkt dit wel maar vervolgens heb je problemen in andere projecten die dan tijdens builden deze error geven:

Module not found: Error: Can't resolve './browserStorage' in '/Users/martin/projects/freshheads-javascript-essentials/build/storage'
Did you mean 'browserStorage.js'?
BREAKING CHANGE: The request './browserStorage' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.`

Wellicht is het meest handig om meerdere builds te maken UMD, ES en CommonJS bv. Maar dat gaat niet met alleen Typescript wat we hier gebruiken dus dan zouden we bv naar RollUp moeten kijken. Maar wie weet is er ook wel een andere oplossing aan de kant van Next.JS.

[martinbroos]

Voor nu heb ik het in Next.Js opgelost door de module om te zetten naar CommonJS.
https://github.com/freshheads/repay/pull/163

Maar je wil eigenlijk wel de overstap maar naar ESM omdat die builds kleiner zijn en getreeshaked kunnen worden.

Edit:
We gebruiken eigenlijk als ESM alleen niet pure-esm wat met name een voordeel heeft dat je geen bundler nodig hebt om de modules te importeren. Maar de builds worden in ons geval niet kleiner en we hebben al tree shaking doordat we alleen het bestand importeren wat je nodig hebt en niet via een index.js werken die alles exporteert. Vooralsnog lijkt me het dus niet nodig om naar pure esm te gaan omdat dit nog de nodige complexiteit met zich mee brengt in het gebruik van de library.

[martinbroos]

Na release 1.10 werkt dit toch nog niet in NextJs zonder dat de lib eerst door babel omgezet moet worden.