Node.js - SyntaxError: Unexpected token import

javascript

babel-transpilation

es-modules

nodejs-configuration

byAnton Shumikhin·Nov 17, 2024

To quickly and effectively fix the SyntaxError: Unexpected token import in Node.js:

Apply require() instead of import:

const myModule = require('./myModule');
// Who needs fancy imports when you have good old require?

Enable ES Modules in Node.js v14+:

Either:

Rename files to .mjs

or add "type": "module" in package.json, enabling use of import:

{
  "type": "module"
  // With "type": "module", Node says 'import away, friend!'
}

Then use import as shown below:

import myModule from './myModule.js';
// importing: The Rolls-Royce of modularization!

Utilize Babel to transpile:

Install Babel:

npm install @babel/core @babel/cli @babel/preset-env --save-dev
// Babel, the TypeScript of JavaScript... wait. 🤔

Create .babelrc:

{
  "presets": ["@babel/preset-env"]
  // Declare in presets: "@babel/preset-env" and let the future be now
}

Run Babel:

npx babel your-file.js --out-file compiled.js
// transpiling.js -> awesome.compiled.js 🚀

Choose the solution that matches your Node.js version and project requirements for an instant fix.

Deep dive into solutions

Leveraging 'esm' for seamless 'import'

If an upgrade to Node.js v14+ is not feasible but import syntax is still desired:

Install the esm package to bridge the syntax gap:

npm install esm
// esm: making ‘import’ a reality since... a while back

Modify your package.json start script to support -r esm:

"scripts": {
  "start": "node -r esm index.js"
  // 'esm' is to Node as spinach is to Popeye 💪
}

Bridging the gap between ES Modules and CommonJS

In scenarios where import and require are mixed or when transitioning between the two:

Swap export default with module.exports when importing a module in the CommonJS style.
Utilize the import() syntax for dynamic interpretations that comply with CommonJS.
Be aware that named imports require deconstruction from module.exports.
In short, bridge the 'import' and 'require' worlds sensibly to avoid syntax hiccups.

Babel: transpilation station for ES syntax in Node.js

To establish a server-side Node.js environment with Babel for an "ES6 today, run anywhere" experience:

Install babel-cli globally for command-line access:

npm install -g @babel/cli
// globally installing babel-cli - because you never know when you might need transpilation

Favor babel-preset-env for targeting specific environments:

npm install @babel/preset-env --save-dev
// preset-env: like having a babel engineer on your team

Update the start script to run Node.js with Babel transpiling:

"scripts": {
  "start": "babel-node index.js"
  // start script now enlists babel-node for the heavy lifting
}

Ensure to regularly review updated Node.js help documents and MDN compatibility tables to stay on top of module import support.

explain-codes / Javascript / Node.js - SyntaxError: Unexpected token import

Linked

How do I include a JavaScript file in another JavaScript file?



Using Node.js require vs. ES6 import/export



"uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6



Nodejs vs node on ubuntu 12.04



What is "export default" in JavaScript?



Eslint Parsing error: Unexpected token



Passing environment-dependent variables in Webpack

