Question

我正在完成React.js Essential培训的Lynda教程，并遇到第13章的问题 - 使用webpack加载JSON。

当我尝试编译并启动服务器时，我收到以下错误：

lat

我的titles.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

我做错了什么？

编辑添加我的webpack.config：

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

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

lib.js

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"       
            }

            ]
        }
    }

Index.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>
        )

Answer 1

我有同样的问题，但是当我查看json-loader文档here时，我发现在webpack版本大于v.2.0时，json-loader不再需要了。所以你可以从你的webpack配置文件中删除json-loader，假设你正确导入你的json文件，一切都应该工作import text from './titles.json'

Answer 2

解决此问题的另一种方法是修改package.json文件以添加browser部分：

"browser": {
  "colors": false,
  "events": "eventemitter3",
  "checkForModuleDuplicates": false,
  "url": "./shims/url",      
  "tracer": false
}

Webpack将遵守此部分，并忽略设置为: false的任何内容，否则将从key：value对的值加载相应的模块。

Answer 3

json-loader不再不需要了：

⚠️由于webpack> = v2.0.0，默认情况下将导入JSON文件。如果您使用自定义文件扩展名，则可能仍要使用它。

文档：https://webpack.js.org/migrate/3/#json-loader-is-not-required-anymore

Answer 4

我建议使用 fetch()：

fetch('./myJsonFile.json')
  .then(res => res.json())
  .then(data => {
    console.log(data);
  });

模块解析失败：位于0的JSON中出现意外的令牌m

4 个答案: