Incorrect import/export causing SyntaxError: Unexpected token

The “SyntaxError: Unexpected token” related to import/export usually occurs when the JavaScript runtime or build tool does not recognize or properly handle the import/export syntax, especially if you are using ES6 modules (import/export) in environments that do not support them natively (such as older versions of Node.js, or incorrectly configured Babel/Webpack setups).

This error commonly happens when there’s a mismatch between how modules are imported/exported and how the environment is configured to handle those imports.

Common Causes of the Error:

1. Using ES6 import/export in Node.js Without Babel or Proper Setup: Node.js, by default, does not support import/export syntax unless using a version that supports ES modules or if it’s explicitly transpiled with Babel.
2. Incorrect Babel or Webpack Configuration: If Babel or Webpack is not set up to handle ES6 imports/exports, this can lead to parsing errors when trying to import/export modules.
3. Mixing CommonJS and ES6 Module Syntax: Mixing require/module.exports (CommonJS) and import/export (ES6) in the same project or file can result in syntax errors.
4. Incorrect File Extensions: If you try to import a .js or .jsx file that does not contain valid ES6 module code, you could encounter a parsing error.
5. React/JSX Imports in Older React Versions: React 17 introduced the JSX Transform, which means you no longer need to import React explicitly in every file using JSX. However, in older React versions, you must import React manually.

How to Fix the Error:

1. Configure Babel Properly

If you’re using modern JavaScript (import/export), you need Babel to transpile your code so that older environments (like Node.js or older browsers) can understand it.

1. Install Babel and Required Packages: Make sure you have the necessary Babel packages installed: npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
2. Create/Update Babel Configuration: Add a .babelrc file or babel.config.js with the following content: .babelrc: { "presets": [ "@babel/preset-env", "@babel/preset-react" ] } Or babel.config.js: module.exports = { presets: [ "@babel/preset-env", "@babel/preset-react" ], };
3. Ensure Webpack Is Configured with Babel: If you’re using Webpack, make sure the Webpack configuration is set up to use Babel: webpack.config.js: module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader', }, ], }, resolve: { extensions: ['.js', '.jsx'], }, };

2. Use ES6 Import/Export Correctly

Make sure you’re using the correct ES6 module syntax:

1. Correct Syntax for Export: // Named export export const myFunction = () => { ... }; // Default export export default MyComponent;
2. Correct Syntax for Import: // Importing named exports import { myFunction } from './myFile'; // Importing default export import MyComponent from './MyComponent';

3. Use the Correct File Extensions

Make sure that:

• Files containing ES6 module code (i.e., using import/export) have the correct .js or .jsx extensions.
• You don’t try to import non-JavaScript files like .txt, .json, etc., without proper loaders or parsers set up in Webpack (if applicable).

4. Ensure Compatibility with Node.js (If Using Node)

If you’re running the code in Node.js, ensure that:

1. You are using Node.js 12 or later, as ES Modules (import/export) were fully supported starting from Node.js 12.
2. If you’re on an older version, you can use Babel to transpile your code. Additionally, make sure to enable ES module support by either:
   • Renaming your JavaScript files to .mjs or
   • Adding "type": "module" in your package.json.
3. Example in package.json: { "type": "module" } With this, you can use import/export in Node.js without needing Babel.

5. Ensure React Compatibility (If Using React)

If you’re using React 17 or later, you don’t need to explicitly import React in every file that uses JSX. However, if you’re using React 16 or earlier, ensure you import React like this:

import React from 'react';  // React 16 and earlier

React 17 and later versions automatically import React into every JSX file when JSX is used, thanks to the new JSX Transform.

Examples of Correct Import/Export Syntax:

ES6 Import/Export Example (Correct)

File: utils.js

// Named exports
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

File: main.js

// Importing named exports
import { add, subtract } from './utils';

console.log(add(2, 3));  // 5
console.log(subtract(5, 3));  // 2

Default Export/Import Example

File: Component.js

// Default export
const MyComponent = () => {
  return <div>Hello, world!</div>;
};

export default MyComponent;

File: App.js

// Default import
import MyComponent from './Component';

const App = () => {
  return <MyComponent />;
};