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

Picking a module system: import vs require

Just like picking Team Captain America or Team Iron Man, you should choose a module system—either require for CommonJS or import for ES6 modules. Mixing them is like bringing a lightsaber to a Quidditch match, so stick to one system!

Example of CommonJS syntax:

const myFunction = require('./myModule'); // Old school but reliable - like a Nokia 3310!
myFunction();


Are you importing and exporting the right way?

Think of import and export statements like airport arrivals and departures. Is your 'flight' listed there? Check your library's documents and make sure your syntax is accurate. Or use a bundled dist version that's ready to go!

Example:

// Exporting a function in ES6
export function myFunction() { /* Just chilling here waiting to be exported */ }

// Importing in another file
import { myFunction } from './myModule.js'; 


Getting help from Mr. Bundler

Rollup or Webpack? Both bundlers can help you traverse between ES6 and non-ES6 environments smoothly. They'll pack your code into a single JS file that's ready for any module system.

npx rollup main.js --file bundle.js --format iife
// ^^ packaging your code like an Amazon Prime delivery! ^^


Are your modules within scope?

Remember, variables in module systems have specific scope. If a variable is undefined, it might just be out of scope. It's like expecting to find your car keys in the kitchen when you left them in the bedroom!

Example:

// Globally accessible variable in a module
export const myGlobalVar = 'Hello, world!';

// Another file
import { myGlobalVar } from './myModule.js';
console.log(myGlobalVar); // 'Hello, world!' pops out, like toast! 🍞


Is "type=module" not your cup of tea?

If type="module" sounds like a complicated recipe, you can still eat your cake too! Just use the bundled version of your required library, typically found in the dist directory.

Troubleshooting errors like a pro

When an error appears, don't just apply Band-Aids. Get to the root cause. It might be syntax issues, a game of hide-and-seek with file references, or misconfigured project settings. A restart after config changes might just work!

Don't forget to update configurations

Just like refreshing your social media feed, don't forget to update relevant configurations and restart your application. Make changes, test rigorously, and apply!

The art of experimentation

Sometimes, solving import issues is like unraveling the mystery in an escape room. Try different approaches: use script tags, CDNs, or local modules, and see what works best for your project needs.