node.js - 引入node-fetch后,使用webpack的时候报错!

Question

在项目代码中加入下面这句代码的时候会报错

var fetch = require('node-fetch');

错误代码:

ERROR in ./~/.0.4.15@iconv-lite/encodings/tables/gb18030-ranges.json
Module parse failed: /home/zhang/temp/web-im/node_modules/.0.4.15@iconv-lite/encodings/tables/gb18030-ranges.json Unexpected token (1:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:9)
    at Parser.pp$4.raise (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp.semicolon (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:581:61)
    at Parser.pp$1.parseExpressionStatement (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:966:10)
    at Parser.pp$1.parseStatement (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:730:24)
    at Parser.pp$1.parseBlock (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:981:25)
    at Parser.pp$1.parseStatement (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:709:33)
    at Parser.pp$1.parseTopLevel (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:638:25)
    at Parser.parse (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:516:17)
    at Object.parse (/home/zhang/temp/web-im/node_modules/acorn/dist/acorn.js:3098:39)
 @ ./~/.0.4.15@iconv-lite/encodings/dbcs-data.js 106:37-76

webpack.config.js配置

var webpack = require('webpack');
path = require('path');

module.exports = {
    entry: {
        './sdk/dist/websdk-1.1.3': './sdk/src/connection',
        './demo/javascript/dist/demo': './demo/javascript/src/entry',
        './webrtc/dist/webrtc-1.0.0': './webrtc/src/webrtc',
    },
    output: {
        path: './',
        publicPath: './',
        filename: '[name].js'
    },
    // devtool: '#eval-cheap-module-source-map',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel',
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            },
            {
                test: /\.svg|woff|eot|ttf$/,
                loader: require.resolve('file-loader') + '?name=[path][name].[ext]'
            },
            {
                test: /\.json$/,
                loader: "json-loader"
            }
        ]
    },
    plugins: [
        // new webpack.NoErrorsPlugin(),
        // production must be with `UglifyJsPlugin` or ie9 crash
        // faster your app better use
        // https://github.com/facebook/react/issues/7803
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        })
    ],
}
;

package.json:

{
  "name": "webim",
  "version": "1.1.3",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "babel-core": "*",
    "babel-loader": "*",
    "babel-plugin-react-transform": "^2.0.2",
    "babel-plugin-transform-react-jsx-source": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.1.18",
    "babel-preset-stage-1": "^6.1.18",
    "babel-preset-stage-2": "^6.1.18",
    "babel-preset-stage-3": "^6.1.18",
    "cross-env": "^3.1.3",
    "css-loader": "*",
    "file-loader": "*",
    "gulp": "latest",
    "gulp-babel": "^6.1.2",
    "gulp-envify": "^1.0.0",
    "gulp-mocha": "*",
    "gulp-uglify": "^2.0.0",
    "immutable": "*",
    "json-loader": "^0.5.4",
    "line-numbers": "*",
    "node-sass": "*",
    "open-browser-webpack-plugin": "0.0.2",
    "react": "^15.3.2",
    "react-addons-css-transition-group": "^15.3.2",
    "react-dom": "^15.3.1",
    "react-transform-hmr": "^1.0.4",
    "sass-loader": "*",
    "style-loader": "*",
    "webpack": "*",
    "webpack-dev-server": "^1.16.2"
  },
  "scripts": {
    "test": "gulp test",
    "start": "node server.js",
    "dev": "cross-env NODE_ENV=develop node build/dev-server.js",
    "prod": "cross-env NODE_ENV=production webpack --config build/webpack.prod.js"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "antd": "^2.1.0",
    "node-fetch": "^1.6.3",
    "underscore": "^1.8.3"
  }
}

Answer 1

需要添加 json loader

如果你的代码同时需要在浏览器端和node端运行，建议使用 isomorphic-fetch，兼容两个平台

Answer 2

搬运个答案

http://stackoverflow.com/a/36...

I received this same exact error. You'll want to install a JSON loader module. I'm using json-loader in this example.

npm install json-loader --save
Then, you need to add this loader to your webpack.config.js

module: {

loaders: [
  { test: /\.json$/, loader: "json-loader"}
]

}