Question

我在http://localhost:3000上使用webpack运行多页反应应用。当我运行webpack-dev-server --hot --inline并转到http://localhost:3000/movies时，我的组件无法呈现，控制台显示

bundle.js:17 SyntaxError: Unexpected token < in JSON at position 0
    at Object.<anonymous> (http://localhost:3000/bundle.js:1:47124)
    at w (http://localhost:3000/bundle.js:33:9889)
    at Generator._invoke (http://localhost:3000/bundle.js:33:9677)
    at Generator.e.(anonymous function) [as next] (http://localhost:3000/bundle.js:33:10068)
    at i (http://localhost:3000/bundle.js:1:47400)
    at a (http://localhost:3000/bundle.js:1:47495)
    at <anonymous>

当我使用react-scripts start（纱线）运行应用时，我不会收到错误。
应用程序使用react-router并在页面加载时对后面的节点表达json api调用。 Express在端口5000上运行

我的webpack配置是

const path = require('path');

const package = require('./package.json');

const PATHS = {
    src: path.join(__dirname, './src'),
    public: path.join(__dirname, './public')
};

var config = {
    entry: { 
        app: [ 'babel-polyfill', path.resolve(PATHS.src, 'index.js') ] 
    },
    output: {
        path: path.resolve(PATHS.public),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devServer: {
        contentBase: path.resolve(PATHS.public),
        port: 3000,
        historyApiFallback: true
    },
    module: {
        rules: [
        {
            test: /\.json$/,
            use: [
                { 
                    loader: 'json-loader'
                }
                ]
        },
        {
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
                { 
                    loader: 'babel-loader'
                }
                ]
        },
        {
            test: /\.css$/,
            use: [
                {
                    loader: "style-loader",
                    options: { singleton: true }
                },
                {
                    loader: "css-loader",
                    options: { 
                        modules: true,
                        camelCase: 'dashes',
                        localIdentName: '[path][name]__[local]' 
                    }
                }
            ]
        }
        ]
    }
};
module.exports = config;

我不知道它是否只是一个json问题，反应应用程序不直接'要求'.json文件，它正在从节点请求json响应。

Answer 1

我想出来了做fetch的反应实际上得到了html回复JSON.parse('<...')。

webpack-dev-server中的中间件覆盖了我在package.json中的代理

"proxy": "http://localhost:5000/"

我将此代理添加到devServer配置

proxy: {
   '/api/**': {
   target: 'http://localhost:5000',
   changeOrigin: true
}

它仍然没有工作，所以我也从package.json中删除了代理行。修好了。

Webpack-dev-server SyntaxError：意外的令牌＆lt;在位置0的JSON中

1 个答案: