Varför kan jag inte använda import statement utanför en m...

Du försöker använda import i din JavaScript-kod och får felmeddelandet "cannot use import statement outside a module". Det är ett frustrande fel, men det beror på något helt enkelt: din kod körs i en miljö som inte vet hur den ska hantera moderna moduler. JavaScript har två olika modulsystem som inte alltid jobbar tillsammans, och det är där problemet uppstår.

Två modulsystem som krockar

JavaScript har två sätt att dela kod mellan filer. Det moderna sättet använder import och export kallas ES Modules eller ESM. Det gamla sättet använder require() och module.exports kallas CommonJS. Webbläsare förstår ESM naturligt sedan 2015. Node.js använde CommonJS från början för att det helt enkelt inte fanns någon standard då. (Skumt att tänka på i dag, va?) Om du försöker använda import i en miljö som förväntar sig CommonJS, brister den direkt.

Var och varför felet dyker upp

Felet kommer från tre vanliga ställen. Först: HTML-filer utan rätt märkning. Om du skriver <script src="app.js"></script> tror webbläsaren att det är vanlig kod, inte en modul. Andra: Node.js-projekt utan rätt konfiguración. Node behöver antingen "type": "module" i package.json eller filer som slutar på .mjs. Tredje: Gulp och andra verktyg som förväntar sig CommonJS som standard. Systemet förstår helt enkelt inte att import är tillåten där.

Snabba lösningar för dina projekt

I HTML lägger du till ett attribut på script-taggen:

• <script type="module" src="app.js"></script>

I Node.js öppnar du package.json och lägger till denna rad:

• "type": "module"

Du kan också döpa dina filer till .mjs istället. För Gulp och liknande verktyg byter du från module.exports till export default. Om du måste blanda systemen använder du dynamiska imports: await import('./module.js'). Var noga med att inkludera .js-tillägget i import-vägar det är lätt att glömma (jag vet från egen erfaring).

Framtiden är ESM

ESM blir standarden överallt. Över 70 procent av nya projekt på npm använder redan ESM. Ramverk som Next.js, Bun och moderna testverktyg prioriterar det framför CommonJS. Node.js version 14 och senare stödjer det fullt ut. Du kan spara tid och frustration genom att lära dig ESM nu istället för senare. Det är inte bara framtiden det är redan här.