How to fix SyntaxError: Unexpected identifier in import statement in React

// Correct
import React from 'react';
import App from './App';

// Wrong - includes curly braces
import { React } from 'react'; // SyntaxError!

// Correct
import { useState, useEffect } from 'react';
import { Button, Card } from './components/ui';

// Wrong - missing curly braces
import useState from 'react'; // SyntaxError!

// Correct
import React, { useState, useEffect } from 'react';

// Wrong - curly braces in wrong order
import { useState }, React from 'react'; // SyntaxError!

import { useState } from 'react';
import { Button } from './ui';

export function MyComponent() {
  // Code here
}

export function MyComponent() {
  import { useState } from 'react'; // SyntaxError!
  // Code here
}

if (someCondition) {
  import { useState } from 'react'; // SyntaxError!
}

// Dynamic import - loads at runtime
if (someCondition) {
  import('react').then(({ useState }) => {
    // Use useState here
  });
}

// Or with async/await
async function loadStuff() {
  const { useState } = await import('react');
  // Use useState here
}

<!-- Without type="module" - import won't work -->
<script src="index.js"></script>

<!-- Correct - tells browser this is an ES module -->
<script type="module" src="index.js"></script>

{
  "type": "module",
  "name": "my-project",
  "version": "1.0.0"
}

{
  "presets": [
    "@babel/preset-react",
    ["@babel/preset-env", { "modules": "auto" }]
  ]
}

module.exports = {
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
  testEnvironment: 'jsdom',
};

impor { useState } from 'react';     // Wrong - typo in keyword
import { useState } form 'react';    // Wrong - 'form' instead of 'from'
import { useState } from 'rreact';   // Wrong - extra 'r' in module name

import  { useState }  from  'react'; // Might be treated as error in some parsers