ReactJS 18与Vite 4运行npm run dev时出现import-analysis错误求助

问题描述 #

使用Vite 4和React 18执行npm run dev时触发vite:import-analysis错误，报错提示因JS语法无效无法解析导入，要求含JSX的文件使用.jsx或.tsx扩展名。但多个结构完全一致的组件中，仅最后一个被导入的组件会报错（新增组件后，报错会转移到新的最后一个组件）。调整代码格式后问题仍存在。

环境版本 #

fox@mustang:~/projects/nazory.sk$ node -v
v18.14.0
fox@mustang:~/projects/nazory.sk$ npm -v
9.3.1

报错详情 #

2:39:47 PM [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /home/fox/projects/nazory.sk/src/components/aside.js:6:30
  2  |  function Aside() {
  3  |    return <aside>
  4  |        <h2>Discussion Panel</h2>
     |                                 ^
  5  |      </aside>;
  6  |  }
      at formatError (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41389:46)
      at TransformContext.error (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41385:19)
      at TransformContext.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39628:22)
      at async Object.transform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41660:30)
      at async loadAndTransform (file:///home/fox/projects/nazory.sk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:39466:29)

相关代码与配置 #

Aside组件（aside.js）

import React from 'react'

function Aside() {
  return (
    <aside>
      <h2>Discussion Panel</h2>
    </aside>
  )
}

export default Aside

Header组件（header.js）

import React from 'react'

function Header() {
  return (
    <header className="header">
      <h1>Názory.sk</h1>
      <div>Žurnalistika ľudí - Články a slobodné diskusie bez reakcií na diskutujúcich</div>
    </header>
  )
}

export default Header

App.jsx中的导入代码

import Header from './components/header'
import Article from './components/Article'
import Aside from './components/aside'

App组件代码

function App() {
  // Render component
  return (
    <main className="container">
      <Header />
      <Article />
      <Aside />
      <footer className="footer">&copy;2023 - Frisky Fox</footer>
    </main>
  )
}

export default App

package.json配置

{
  "name": "nazory.sk",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.0"
  }
}

vite.config.js配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

解决方法 #

方法1：统一JSX组件文件扩展名 #

Vite默认仅对.jsx/.tsx后缀的文件启用JSX语法解析，.js文件会被当作普通JavaScript处理，因此包含JSX的.js文件会触发语法错误。

将所有包含JSX的组件文件后缀从.js改为.jsx，比如：

• aside.js → aside.jsx
• header.js → header.jsx

同时更新App.jsx中的导入语句（可省略扩展名，但显式写出更清晰）：

import Header from './components/header.jsx'
import Article from './components/Article.jsx'
import Aside from './components/aside.jsx'

方法2：配置Vite解析.js文件中的JSX #

如果不想修改文件扩展名，可在vite.config.js中添加esbuild配置，指定对.js文件使用JSX解析器：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  esbuild: {
    loader: {
      '.js': 'jsx'
    }
  }
})

问题原因说明 #

所谓“仅最后一个导入的组件报错”并非Vite Bug，而是模块解析顺序导致的：前面的组件可能在解析时被Vite的缓存机制或预检查逻辑跳过了严格语法校验，而最后一个组件会触发完整的解析流程，从而暴露了.js文件含JSX的语法问题。

内容的提问来源于stack exchange，提问作者Bambi Bunny