导入json文件反应，webpack配置错误

我想导入一个json文件到我的代码。对于相同的JS文件是导入json文件反应，webpack配置错误

import React from 'react'; 
import ReactDom from 'react-dom' ; 
import $ from 'jquery' ; 
import data from './data.json'; 

class ExpenseApp extends React.Component{ 
    render(){ 
    return(
     <div>{data.Author}</div> 
    ) 
    } 
} 


ReactDom.render(<ExpenseApp/>,document.getElementById('container'));

我已经安装了JSON装载机的WebPack配置文件就像是this--

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

var node_dir = __dirname + '/node_modules', 
    lib_dir = __dirname + '/public/libraries'; 

var config = { 
    // The resolve.alias object takes require expressions 
    // (require('react')) as keys and filepath to actual 
    // module as values 
    resolve: { 
     alias: { 
      react: lib_dir + '/react', 
      "react-dom": lib_dir + '/react-dom', 
      "jquery": lib_dir + '/jquery-3.2.1.js' 
     }, 
     extensions:['','.js','.jsx','.json'] 
    }, 
    plugins: [ 

     new webpack.optimize.CommonsChunkPlugin({ // 
      name: 'vendors', 
      filename: 'build/vendors.bundle.js', 
      minChunks: 2, 
     }), 

     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoEmitOnErrorsPlugin() 
    ], 

    entry: { 
     musicApp: ['./public/js/expense-app.js', 'webpack/hot/only-dev-server'], 
     vendors: ['react', 'react-dom', 'jquery', 'webpack/hot/only-dev-server'] 
    }, 

    output: { 
     path: path.join(__dirname, "public"), 
     filename: 'build/[name].bundle.js', 
     libraryTarget: "umd" 
    }, 

    module: { 

     noParse: [ 
      new RegExp(lib_dir + './react.js'), 
      new RegExp(lib_dir + './react-dom.js') 
     ], 
     rules: [ 
      { 
       test: /\.js?$/, 

       loaders: ['react-hot-loader/webpack', 'babel-loader'], 
       include: path.join(__dirname, 'public') 

      }, 
      { 
       loader: 'babel-loader', 
       query: { 
        presets: ['react', 'es2015'] 
       }, 
       include: path.join(__dirname, 'public') 
      } 
     ] 
    } 
} 

module.exports = config;

的data.json文件is--

var data={ 
    "Author":"Dan Brown", 
    "Book":"Inferno", 
} 
module.exports=data;

我刚开始'无法解析data.json'错误，所以我在webpack的解析中添加了扩展。现在也是，我收到相同

而且，我试着在里面的模块装载机[]添加JSON-装载机，后来还我得到的错误。而文件夹结构是这样的

我该如何解决这个问题？

来源

2017-07-16 Aayushi

你可以试试下面的事情

1）增加 “JSON - 服务器”：在你的package.json 2 “^ 0.8.8”）开始与下面的命令

节点json的服务器。 /node_modules/json-server/bin/index.js --watch ./data/data.json--port 3001

3）使用任何ajax调用访问您的json文件。

你可以检查我的样本项目如下这里我实现了这个代码，因为你已经指定了不正确的路径

https://github.com/johibkhan2/react-redux-singlePageApp

来源

2017-07-16 11:50:46

这可以做到这一点，但我的代码有什么问题吗？ – Aayushi

的WebPack没有找到你的data.json。 import data from './data.json'将从与您的ExpenseApp组件相同的目录中查找data.json，但根据您的屏幕截图，它是上面的一个级别。因此，进口声明应该是import data from '../data.json'

您的data.json文件也有可能导致您的其他问题的问题。 JSON是不是JavaScript，因此它不具有无功的或模块出口等..

{ "Author":"Dan Brown", "Book":"Inferno", }

是JSON的，一切有多余的，将可能使JSON装载机BARF因为它期待JSON，不是JavaScript。

来源

2017-07-16 16:06:59 Matti

即使在做了上述提及的事情之后，我也遇到了同样的错误'无法解析../data.json – Aayushi

导入json文件反应，webpack配置错误

回答

相关问题