问模块解析失败: JSON中位于0位置的意外令牌m
EN

Stack Overflow用户

提问于 2018-03-22 11:34:40

回答 6查看 31.6K关注 0票数 27

我正在学习林达的React.js基本培训教程，并且遇到了第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>
        )

Index.js

import React from 'react'
import { render } from 'react-dom'
import { hello, goodbye } from './lib'

render(
    <div>
       { hello }
        { goodbye }
    </div>,
     document.getElementById('react-container')
     )