Fixing “SyntaxError: Unexpected token” from Incorrect Import/Export

This error typically occurs when JavaScript encounters improper module syntax. Here are the solutions based on different scenarios:

Common Causes and Fixes

1. Missing or Incorrect Import Statements

Error Example:

import  MyComponent from './MyComponent'
// Missing curly braces for named imports

Solution:

// For default exports
import MyComponent from './MyComponent';

// For named exports
import { MyComponent } from './MyComponent';

2. Mixing ES Modules and CommonJS

Error Example:

const module = require('./module');
import { something } from './another-module';

Solution (choose one consistent style):

// Either use all ES modules
import module from './module';
import { something } from './another-module';

// Or use all CommonJS
const module = require('./module');
const { something } = require('./another-module');

3. Incorrect Export Syntax

Error Example:

// Incorrect named export
export MyComponent;

// Incorrect default export
export default const MyComponent = () => {};

Solution:

// Correct named export
export const MyComponent = () => {};

// Correct default export
const MyComponent = () => {};
export default MyComponent;

Configuration Solutions

1. Update Babel Configuration

Ensure your .babelrc or babel.config.js includes:

{
  "presets": [
    "@babel/preset-env"
  ]
}

Install required packages:

npm install --save-dev @babel/core @babel/preset-env

2. Set Proper Module System in package.json

{
  "type": "module"
}

or for CommonJS:

{
  "type": "commonjs"
}

3. Webpack Configuration

Add this to your webpack.config.js:

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

File Extension Solutions

1. Use Proper File Extensions

• .mjs for ES modules
• .cjs for CommonJS modules
• .js with "type": "module" in package.json

2. Configure ESLint for Modules

Update .eslintrc.js:

module.exports = {
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 2020
  }
};

React-Specific Solutions

1. Correct React Component Exports

Incorrect:

export default function() {
  return <div>Hello</div>;
}

Correct:

function MyComponent() {
  return <div>Hello</div>;
}
export default MyComponent;

2. Proper Hooks Import

Error Example:

import useState from 'react';

Solution:

import { useState } from 'react';

Debugging Tips

1. Check for:

• Missing semicolons
• Unmatched curly braces
• Improper line breaks in imports/exports

1. Verify Node.js version supports your module system:

   node -v

(ES modules fully supported since Node 12+)

3. Look for syntax highlighting errors in your IDE that might indicate the problem area