node.js - 引入node-fetch后,使用webpack的時(shí)候報(bào)錯(cuò)!
問題描述
在項(xiàng)目代碼中加入下面這句代碼的時(shí)候會(huì)報(bào)錯(cuò)
var fetch = require(’node-fetch’);
錯(cuò)誤代碼:
ERROR in ./~/.0.4.15@iconv-lite/encodings/tables/gb18030-ranges.jsonModule 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/7803new 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' }}
問題解答
回答1:需要添加 json loader
如果你的代碼同時(shí)需要在瀏覽器端和node端運(yùn)行,建議使用 isomorphic-fetch,兼容兩個(gè)平臺(tái)
回答2:搬運(yùn)個(gè)答案
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 --saveThen, you need to add this loader to your webpack.config.js
module: {
loaders: [ { test: /.json$/, loader: 'json-loader'}]
}
