導入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配置錯誤

回答

相關問題