React（Vite）项目导入PGN文件报错，如何无需重命名解决？

问题场景 #

使用npm create vite@latest创建的React项目中，导入.pgn格式文件时触发语法错误，但将文件重命名为.txt后即可正常导入。希望无需重命名，直接使用PGN格式。

代码示例 #

// React app created with Vite: npm create vite@latest
// import pgn from "./pgn.txt"; // 导入正常
import pgn from "./pgn.pgn"; // 报错：Uncaught SyntaxError: Unexpected string (at pgn.pgn?t=1720874180505&import:1:8)

// pgn.txt 和 pgn.pgn 内容完全一致

let games = await fetch(pgn).then((data) => data.text().then((data) => data));

function App() {
  return <>
    <h4>{games}</h4>
  </>;
}

export default App;

PGN文件内容 #

[Event "Troll Masters"]
[Site "Gausdal NOR"]
[Date "2001.01.05"]
[Round "1"]
[White "Edvardsen,R"]
[Black "Carlsen,Magnus"]
[Result "1/2-1/2"]
[WhiteElo "2055"]
[BlackElo "0"]
[ECO "D12"]

1.d4 Nf6 2.Nf3 d5 1/2-1/2

报错信息 #

Uncaught SyntaxError: Unexpected string (at pgn.pgn?t=1720874180505&import:1:8)

解决步骤 #

1. 配置Vite识别PGN文件类型 #

在项目根目录的vite.config.js（或vite.config.ts）中添加assetsInclude配置，将.pgn纳入静态资源处理范围：

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

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.pgn']
})

2. 重启开发服务器 #

修改配置后，关闭当前的Vite开发服务，重新执行npm run dev启动服务，配置即可生效。

原因说明 #

Vite默认仅处理常见的静态资源类型（如txt、png等），对于未识别的.pgn文件，会尝试将其当作JavaScript模块解析，但PGN内容不符合JS语法规范，因此抛出语法错误。通过添加assetsInclude配置，告诉Vite将PGN文件视为静态资源，导入时返回文件URL，与txt文件的处理逻辑一致，即可正常使用。

内容的提问来源于stack exchange，提问作者Lars Kuerten