反応中のjsonファイルのインポート、webpack設定エラー

Question

jsonファイルを自分のコードにインポートしようとしています。そのためのJSファイルは、私はすでに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; 

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

is-- data.jsonファイルのようなものです

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')); 

です

最初に 'data.jsonを解決できません'というエラーが表示されていたので、webpackの解決で拡張機能を追加しました。 今も、私も同じ

を取得しています、私は、モジュール内部のローダー[]でJSON-ローダーを追加しようとしたが、その後も、私はエラーを得ていました。 フォルダ構造は次のとおりです

どうすれば解決できますか？ ）あなたのpackage.json 2に "^ 0.8.8"、コマンド以下

ノードとJSONサーバを起動します。

Answer 1

あなたは物事

1）を追加し、 "JSON-server" を次試すことができます。 /node_modules/json-server/bin/index.js --watch ./data/data.json--port 3001

3）ajax呼び出しを使用してjsonファイルにアクセスします。私はあなたが間違ったパスを指定しているので、

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

Answer 2

WebPACKのは、あなたのdata.jsonを見つけることができません。このコードを実装どこ

あなたは以下のように私のサンプルプロジェクトを確認することができます。 import data from './data.json'は、ExpenseAppコンポーネントと同じディレクトリからdata.jsonを検索しますが、スクリーンショットに基づいて1つ上のレベルです。したがって、インポートステートメントはimport data from '../data.json'

である必要があります。あなたのdata.jsonファイルにも問題が発生している可能性があります。 JSONはJavaScriptのではない、それはVARのか、モジュールの輸出などを持っていないので...

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

はJSONです、他のすべては、余分な存在であり、それはJSONを期待しているようおそらく、JSONローダーBARFを行いますジャバスクリプトではありません。