导入JSON到JavaScript报Unexpected token ':'错误如何解决

错误产生原因 #

该错误和JSON本身格式无关，是JSON内容被错误当作JavaScript语法解析导致的：
JSON中以{开头的结构，在JavaScript解析时会被默认识别为代码块的起始标记，而非对象字面量的开头，后续紧跟的"breakfast":键值对语法不符合原生JS代码块的语法规则，就会抛出Unexpected token ':'的语法错误。

常见的触发场景包括：

• 直接把JSON内容复制到JS文件中，没有赋值给变量
• 单独的JSON文件被作为普通JS模块导入，未做对应配置或格式声明
• 低版本构建工具未配置JSON解析loader，直接导入JSON文件

解决方法 #

根据你的使用场景选择对应方案即可：

场景1：JSON内容直接写在JS文件中 #

给JSON对象添加变量声明即可：

const recipeData = {
  // 你现有的全部JSON内容放在此处即可
}

后续直接通过recipeData变量访问对应数据。

场景2：JSON单独存为文件，在Node.js环境使用 #

Node.js原生支持JSON文件导入，直接用CommonJS语法导入即可：

const recipeData = require('./你的JSON文件名.json')

场景3：JSON单独存为文件，在浏览器原生ES模块环境使用 #

二选一即可：

1. 导入时添加JSON类型声明：

import recipeData from './你的JSON文件名.json' assert {type: 'json'}

2. 通过fetch请求加载并解析JSON：

fetch('./你的JSON文件名.json')
  .then(response => response.json())
  .then(recipeData => {
    // 在此处处理加载完成的菜谱数据
  })

场景4：在Vite/webpack等构建工具环境使用 #

现代构建工具（Vite、webpack 5+）默认支持JSON文件直接导入，直接使用如下语句即可：

import recipeData from './你的JSON文件名.json'

如果是webpack 4及更低版本，需要先在webpack配置中添加json-loader解析规则。

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