React中动态导入JSON到变量报import仅可在顶层使用错误如何解决

• 你使用的ES模块静态import语句语法要求必须放在模块文件的顶层，不能嵌套在函数、条件分支等代码块内，这是你触发报错的直接原因。
• 静态import不支持模板字符串拼接的动态路径，构建阶段无法识别这类动态依赖。
• 现有前端工程化环境默认会自动将导入的JSON文件解析为JS对象，不需要额外调用JSON.parse()处理。

根据你的需求分两种适配场景：

场景1：加载项目内置的语言包JSON #

使用ES标准的动态import()函数，该语法支持在任意代码块中调用，返回Promise，可直接适配你的异步逻辑，修改后代码如下：

const lang = {
    // 把要加载的语言标识作为入参传入，灵活性更高
    promiseToSetLanguage: function(languageToSet){
        return import(`./languages/${languageToSet}_lang.json`)
            .then(module => {
                // 动态导入返回模块对象，JSON默认导出即为解析完成的对象
                const language = module.default
                if (language.welcome) {
                    console.log('Works fine')
                    // 可将语言对象挂载到lang属性下，方便后续调用
                    this.currentLang = language
                    return true
                }
                throw new Error('语言包格式不符合要求')
            })
    }
}

// 调用示例
lang.promiseToSetLanguage("polish")
    .then(status => {
        // 加载成功后的业务逻辑
    })
    .catch(err => {
        // 加载失败后的容错逻辑
        console.error('语言包加载失败：', err)
    })

vite、create-react-app等主流脚手架环境均已内置支持该写法，无需额外配置。

场景2：加载用户本地设备选中的JSON文件 #

如果是要读取用户通过文件选择器上传的本地JSON文件，使用浏览器原生FileReader API实现即可：

import { useState } from 'react'

function JsonImporter() {
  // 可将导入的JSON数据存在state中供业务使用
  const [importedJson, setImportedJson] = useState(null)

  const handleFileSelect = (e) => {
    const selectedFile = e.target.files[0]
    // 校验文件格式
    if (!selectedFile || !selectedFile.name.endsWith('.json')) {
      alert('请选择JSON格式的文件')
      return
    }

    const reader = new FileReader()
    reader.onload = (loadEvent) => {
      try {
        const parsedData = JSON.parse(loadEvent.target.result)
        setImportedJson(parsedData)
        console.log('JSON导入成功：', parsedData)
      } catch (parseErr) {
        console.error('JSON解析失败：', parseErr)
        alert('文件内容不符合JSON格式规范')
      }
    }
    reader.readAsText(selectedFile)
  }

  return (
    <div>
      <input type="file" accept=".json" onChange={handleFileSelect} />
      {/* 后续可基于importedJson渲染业务内容 */}
    </div>
  )
}

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