在React组件中导入Json文件

发布时间：2020-12-15 20:14:57 所属栏目：百科来源：网络整理

导读：我正在尝试在React组件中加载languages.json文件.当我想导入json文件时,我在第一步收到以下错误.这是错误： ERROR in ./app/languages.jsonModule parse failed: /.../languages.json Unexpected token (1:12)You may need an appropriate loader to handle

我正在尝试在React组件中加载languages.json文件.当我想导入json文件时,我在第一步收到以下错误.这是错误：

ERROR in ./app/languages.json
Module parse failed: /.../languages.json Unexpected token (1:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:12)
    at Parser.pp.raise (........)

我正在使用webpack,这是配置文件：

var path = require('path');
   var webpack = require('webpack');

   module.exports = {
       entry: ['./app/main.jsx'],devtool: 'cheap-module-eval-source-map',output: { path: __dirname+"/app",filename: 'bundle.js' },module: {
           loaders: [
              {   test: /.jsx?$/,loader: 'babel-loader',query: { presets: ['es2015','react'] },include: path.join(__dirname,'src')
              }
          ]
      }
  };

我安装了这些包：

"babel-core": "^6.2.1","babel-loader": "^6.2.0","babel-preset-es2015": "^6.1.18","babel-preset-react": "^6.1.18"

这就是我要导入文件的方式(ES6格式)：

import lang_code from '../../app/languages.json';

另外,我检查了json文件格式并验证了它！那么,您认为问题在哪里？

解决方法

azium是正确的,需要一个加载器,但这里的配置是好的措施：

npm命令

> npm install json-loader --save-dev

webpack.config.js

module.exports = {
    ....
    resolve: {
        extensions: ['','.js','.jsx','.json']
    },...
   module: {
       ...
            {
                test: /.json$/,loader: 'json'
            }
       ...
   }
}

通过添加要解析的json扩展,您无需在import语句中指定它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!