模块解析失败：位置 0 处的 JSON 中的意外标记 m答案

【问题标题】：Module parse failed: Unexpected token m in JSON at position 0模块解析失败：位置 0 处的 JSON 中的意外标记 m
【发布时间】：2018-09-01 09:15:53
【问题描述】：

我正在学习关于 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')
     )

【问题讨论】：

你的 webpack 配置是什么样的？
更新了我的 webpack.config 文件。
你能说明你试图在哪里导入这个 json 文件吗？
是的。我确实有 .babelrc 文件。那是较早的视频之一。
在您的lib.js 中添加import Text from '!json!./titles'; 注意额外的!json! 在开头

标签： json reactjs

【解决方案1】：

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

【讨论】：

json-loader 文档 url 不再有效。

【解决方案2】：

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

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

Webpack 将尊重此部分并忽略任何设置为 : false 或以其他方式从 key:value 对的值加载相应的模块。

【讨论】：

【解决方案3】：

json-loader 不再是需要：

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

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

【讨论】：

【解决方案4】：

我建议试试fetch():

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

【讨论】：

【解决方案5】：

我遇到了同样的问题，并通过确保 JSON 文本上的键和值没有间距来解决它

【讨论】：