我正在学习 React.js Essential 培训的 Lynda 教程，但在第 13 章 - 使用 webpack 加载 JSON 时遇到了问题。

当我尝试编译并启动服务器时，出现以下错误:

ERROR in ./src/titles.json 
Module parse failed: Unexpected token m in JSON at position 0 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token m in JSON at position 0 
    at JSON.parse (<anonymous>) 
    at JsonParser.parse (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\JsonParser.js:15:21) 
    at doBuild.err (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:367:32) 
    at runLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:264:12) 
    at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:370:3 
    at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:211:10) 
    at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10) 
    at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3 
    at runSyncOrAsync (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:130:11) 
    at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2) 
    at Array.<anonymous> (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:202:4) 
    at Storage.finished (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16) 
    at provider (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9) 
    at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\graceful-fs\graceful-fs.js:78:16 
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:528:3) 
 @ ./src/lib.js 12:14-38 
 @ ./src/index.js 
 @ multi (webpack)-dev-server/client?http://localhost:2000 ./src/index.js 
 
ERROR in chunk main [entry] 
bundle.js 
Cannot read property 'replace' of undefined 

我的titles.json 文件如下所示:

{    
    "hello": "Bonjour", 
    "goodbye": "Au Reviour" 
} 

我做错了什么？

编辑添加我的 webpack.config:

var webpack = require("webpack"); 
 
    module.exports = { 
        entry: __dirname + "/src/index.js", 
        output: { 
            path: __dirname + "/dist/assets", 
            filename: "bundle.js", 
            publicPath: "assets", 
        }, 
        devServer: { 
            inline: true, 
            contentBase: __dirname + '/dist', 
            port: 2000 
        }, 
        module: { 
            rules: [ 
            { 
                test: /\.js$/, 
                exclude: /(node_modules)/, 
                enforce: "pre", 
                loader: "babel-loader", 
                query: { 
                    presets: ["latest", "stage-0", "react"] 
                } 
 
            }, 
 
            { 
                test: /\.json$/, 
                exclude: /(node_modules)/, 
                loader: "json-loader"        
            } 
 
            ] 
        } 
    } 

编辑2添加lib.js文件和index.js文件

lib.js

 import React from 'react' 
    import text from './titles.json' 
 
    export const hello = ( 
        <h1 id='title' 
            className='header' 
            style={{backgroundColor: 'purple', color: 'yellow'}}> 
            {text.hello} 
            </h1> 
            ) 
 
    export const goodbye = ( 
        <h1 id='title' 
            className='header' 
            style={{backgroundColor: 'yellow', color: 'purple'}}> 
            {text.goodbye} 
            </h1> 
        )        

索引.js

import React from 'react' 
import { render } from 'react-dom' 
import { hello, goodbye } from './lib' 
 
render( 
    <div> 
       { hello } 
        { goodbye } 
    </div>, 
     document.getElementById('react-container') 
     ) 

请您参考如下方法:

我遇到了同样的问题，但是当我检查 json-loader 文档 here 时我发现在大于或等于 2.0 的 webpack 版本中不再需要 json-loader 。 因此，您可以从 webpack 配置文件中删除 json-loader ，假设您正确导入 json 文件，一切都应该正常import text from './titles.json'