ES2015的错误发生了变化;静态proptypes，显示名称;配置webpack，babel
JS newb here：
我花了几天时间研究这个bug，我看了很多答案并练习了我最认真的Google-Fu，并尝试了许多不同的babel插件和预设配置，以及尝试迁移我的webpack 1项目进入一个webpack 2化身，最后我还在打同一面墙。请给我一个帮助。
当我尝试构建我的项目时，所有开源的here，以及最近在webpack2migration分支中活动且与此问题相关的内容，我一直无法为生产构建（甚至在创建之后甚至不开发）通过非生产性调试越来越多地使用它）
这是我没有理解的错误，当然是因为我不理解webpack中的一些（可能很多）复杂性以及如何正确配置babel以适应我正在努力的事情。
以下是错误：
ERROR in ../~/react-google-maps/src/lib/async/withScriptjs.js
Module parse failed: /Users/sg/Desktop/blog-home/node_modules/react-google-maps/src/lib/async/withScriptjs.js Unexpected token (19:23)
You may need an appropriate loader to handle this file type.
| export default function withScriptjs(WrappedComponent) {
| return class Container extends Component {
| static displayName = `withScriptjs(${getDisplayName(WrappedComponent)})`;
|
| static propTypes = {
最初，我认为这是react-google-maps的错误，但我怀疑它现在有所不同。几个月之前我曾经在一个不同的项目中遇到过这种错误，我知道我一直在搞乱我的package.json。
是的，我知道那里有很多愚蠢的问题，比如包装重复，未使用的包装，不必要的依赖......我一直在想着我能想到的每个角度，太难以及对清理的关注不够;我在睡觉前请求帮助，然后在早上再次尝试。
该项目是为了整合一个有效的small frontend game我的原型，我想将它整合到我的主页中，我也开始另外扫描清理和重构，以获得更好的演示和代码质量
我谦卑地请求正确配置构建的一些支持性帮助，显然我遇到了很多麻烦。
当我开始将小游戏集成到我的主页时，构建在开发和生产构建配置中完全在我的本地机器上运行，但当我推动我的更改并触发构建到我的heroku主机站点时，它仍然失败在同一个文件中，我想因为它无法解析它。
我希望这已经足够了，我很乐意根据需要帮助缩小范围。 ：）
致以最诚挚的问候，感谢您的时间！
的package.json
{
"name": "react-sg-home-page",
"version": "0.0.9",
"description": "My home page and portfolio site",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/sgoldens/home.git"
},
"jest": {
"verbose": true,
"collectCoverage": true,
"setupTestFrameworkScriptFile": "mock-local-storage"
},
"config": {
"blanket": {
"pattern": [
""
],
"data-cover-never": [
"node_modules",
"__tests__",
"*.spec.*"
]
}
},
"engines": {
"node": "7.7.4"
},
"scripts": {
"buildcolors": "NODE_ENV=production webpack --config ./webpack.config.js --progress --colors",
"start_nf": "nf start",
"istanbul": "istanbul cover ./node_modules/mocha/bin/_mocha -- --reporter dot --full-trace __tests__",
"lint:watch": "npm run lint -- --watch",
"mochatest": "babel-node ./node_modules/.bin/isparta cover _mocha --require blanket -- --reporter dot --full-trace __tests__",
"postinstall": "webpack -p --config ./webpack.config.js",
"remove-public": "rm -rf ./public",
"test": "jest --coverage",
"test:watch": "npm test -- --watch",
"start_prod": "node server.js",
"start": "webpack-dev-server",
"dev": "webpack-dashboard -t 'Marvin' -- webpack-dev-server",
"build": "babel-node tools/build.js && babel-node tools/buildHtml.js",
"lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
"lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
"preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - Marvin' -- webpack-dev-server",
"hook-add": "prepush install",
"hook-remove": "prepush remove",
"heroku-prebuild": "npm run remove-public && mkdir public",
"heroku-postinstall": "node server.js"
},
"author": "Sasha Goldenson",
"license": "MIT",
"devDependencies": {
"autoprefixer": "^6.5.3",
"babel-core": "^6.7.2",
"babel-eslint": "^7.1.0",
"babel-jest": "^19.0.0",
"babel-loader": "^6.2.4",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",
"babel-runtime": "^6.6.1",
"chai": "3.5.0",
"chai-jquery": "^2.0.0",
"css-loader": "^0.28.0",
"enzyme": "2.6.0",
"eslint": "^3.10.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-config-google": "^0.7.1",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-node": "^4.2.2",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-watch": "2.1.11",
"expect": "^1.19.0",
"factory-girl": "^4.2.2",
"isparta": "^4.0.0",
"istanbul": "^1.0.0-alpha.2",
"jasmine-core": "^2.6.1",
"jest": "17.0.3",
"jest-cli": "*",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-safari-launcher": "^1.0.0",
"mocha": "3.1.2",
"mocha-lcov-reporter": "^1.3.0",
"mock-local-storage": "^1.0.2",
"nock": "^8.0.0",
"react-addons-test-utils": "^15.4.0",
"redux-mock-store": "^1.2.3",
"standard": "^10.0.2",
"webpack-dev-middleware": "1.6.1",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"axios": "^0.15.3",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-es6-polyfill": "^1.1.0",
"babel-loader": "^6.4.1",
"babel-plugin-class-display-name": "^2.1.0",
"babel-plugin-lodash": "^3.2.11",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-syntax-decorators": "^6.13.0",
"babel-plugin-transform-async-to-generator": "^6.22.0",
"babel-plugin-transform-class-display-name": "^0.0.3",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-es2015-classes": "6.18.0",
"babel-plugin-transform-es2015-template-literals": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-plugin-transform-react-constant-elements": "^6.23.0",
"babel-plugin-transform-react-display-name": "^6.25.0",
"babel-plugin-transform-react-remove-prop-types": "^0.3.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-babili": "0.0.12",
"babel-preset-env": "^1.2.2",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-latest": "^6.24.0",
"babel-preset-modern-async": "^1.0.0-alpha.3",
"babel-preset-modern-browsers": "^9.0.2",
"babel-preset-react": "^6.1.18",
"babel-preset-stage-0": "^6.22.0",
"babel-preset-stage-1": "^6.1.18",
"babel-register": "^6.24.1",
"babel-relay-plugin-loader": "^0.10.0",
"babili-webpack-plugin": "0.0.11",
"blanket": "^1.2.3",
"bluebird": "^3.1.2",
"bootstrap": "^3.3.7",
"cheerio": "^0.20.0",
"colors": "1.1.2",
"compression": "^1.6.1",
"coveralls": "^2.12.0",
"css-loader": "^0.28.4",
"es6-promise": "^3.3.1",
"eventsource-polyfill": "0.9.6",
"express": "~4.9.8",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"font-awesome": "^4.7.0",
"foreman": "2.0.0",
"get-env": "^0.5.10",
"history": "^4.6.3",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.24.1",
"image-webpack-loader": "^3.3.0",
"immutability-helper": "^2.2.2",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.2.1",
"json-loader": "^0.5.4",
"lodash-webpack-plugin": "^0.11.2",
"lodash.debounce": "^4.0.8",
"material-ui": "^0.16.0-rc2",
"node-sass": "^3.13.0",
"npm-run-all": "^1.8.0",
"open": "0.0.5",
"postcss-loader": "^1.1.1",
"prepush": "^3.1.11",
"prop-types": "^15.5.10",
"react": "^15.6.0",
"react-addons-css-transition-group": "^15.6.0",
"react-addons-update": "^15.6.0",
"react-bootstrap": "^0.30.7",
"react-display-name": "^0.2.0",
"react-dom": "15.6.1",
"react-google-maps": "^7.0.0",
"react-icons": "^2.2.5",
"react-lazy-cache": "^3.0.1",
"react-logo": "^1.0.8",
"react-modal": "1.5.2",
"react-mui-speeddial": "0.0.6",
"react-pure-render": "^1.0.2",
"react-redux": "^4.4.6",
"react-router-bootstrap": "^0.23.1",
"react-router-dom": "next",
"react-rte": "^0.11.0",
"react-rte-image": "^0.11.1",
"react-rte-material": "^0.12.5",
"react-tap-event-plugin": "*",
"react-tooltip": "3.2.2",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.4",
"redux": "^3.0.4",
"redux-devtools": "^3.3.2",
"redux-devtools-dock-monitor": "^1.1.1",
"redux-devtools-extension": "^2.13.0",
"redux-devtools-log-monitor": "^1.2.0",
"redux-form": "6.6.1",
"redux-form-material-ui": "^4.1.3",
"redux-logger": "^3.0.0",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"regenerator-runtime": "^0.10.3",
"reinstall": "^1.1.1",
"reselect": "^3.0.0",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"serve-favicon": "^2.3.0",
"sinon": "1.17.6",
"style-loader": "0.13.1",
"svg-react-loader": "^0.3.7",
"svg-sprite-loader": "^2.1.0",
"svgo": "^0.7.2",
"svgo-loader": "^1.2.1",
"transform-runtime": "0.0.0",
"url-loader": "0.5.7",
"webpack": "^2.2.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.2.1",
"webpack-hot-middleware": "2.10.0",
"youtube-api-search": "0.0.5"
},
"bugs": {
"url": "https://github.com/sgoldens/home/issues"
},
"homepage": "https://github.com/sgoldens/home#readme",
"keywords": [
"home"
],
"prepush": [
"npm run lint-break-on-errors --silent"
]
}
.babelrc
{
"plugins": [
["transform-class-properties", { "spec": true }],
"transform-class-display-name",
"class-display-name",
"transform-react-display-name",
"syntax-decorators",
"transform-decorators-legacy",
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
],
"presets": [
"react",
"es2015",
"stage-0"
],
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
webpack.config.js
const webpack = require('webpack');
const path = require('path');
const DashboardPlugin = require('webpack-dashboard/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritePlugin = require('svg-sprite-loader/plugin');
const autoprefixer = require('autoprefixer');
const nodeEnv = process.env.NODE_ENV || 'development';
const isProduction = nodeEnv === 'production';
const jsSourcePath = path.join(__dirname, './src');
const buildPath = path.join(__dirname, './build');
const imgPath = path.join(__dirname, './images');
const iconPath = path.join(__dirname, './images');
const sourcePath = path.join(__dirname, './src');
// Common plugins
const plugins = [
new SpritePlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'build',
filename: 'build.js',
minChunks(module) {
const context = module.context;
return context && context.indexOf('node_modules') >= 0;
},
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(nodeEnv),
'API_HOST': JSON.stringify('https://posts-sgoldens.herokuapp.com'),
'API_PORT': JSON.stringify(process.env.PORT || 5000)
},
}),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
'last 3 version',
'ie >= 10',
],
}),
],
context: sourcePath,
},
}),
];
// Common rules
const rules = [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
'babel-loader',
],
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-sprite-loader',
options: {
extract: true,
spriteFilename: 'icons-sprite.svg',
},
},
'svgo-loader',
],
include: iconPath,
},
{
test: /\.(png|gif|jpg|svg)$/,
include: imgPath,
use: 'url-loader?limit=20480&name=assets/[name]-[hash].[ext]',
},
];
if (isProduction) {
// Production plugins
plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
},
output: {
comments: false,
},
}),
new ExtractTextPlugin('style-[hash].css')
);
// Production rules
rules.push(
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader!postcss-loader!sass-loader',
}),
}
);
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new DashboardPlugin()
);
// Development rules
rules.push(
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
'style-loader',
// Using source maps breaks urls in the CSS loader
// https://github.com/webpack/css-loader/issues/232
// This comment solves it, but breaks testing from a local network
// https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
// 'css-loader?sourceMap',
'css-loader',
'postcss-loader',
'sass-loader?sourceMap',
],
}
);
}
module.exports = {
devtool: isProduction ? false : 'source-map',
context: jsSourcePath,
entry: {
js: './index.js',
},
output: {
path: buildPath,
publicPath: '/',
filename: 'bundle.js',
},
module: {
rules,
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
modules: [
path.resolve(__dirname, 'node_modules'),
jsSourcePath,
],
},
plugins,
devServer: {
contentBase: isProduction ? buildPath : sourcePath,
historyApiFallback: true,
port: 3000,
compress: isProduction,
inline: !isProduction,
hot: !isProduction,
host: '0.0.0.0',
disableHostCheck: true,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m',
},
},
},
};
1 个答案:
答案 0 :(得分：1)
您的代码正在从node_modules文件夹react-google-maps/*src*/lib/async/withScriptjs.js
但是你的webpack规则从babel编译过程中排除了node_modules中的文件
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // NB!
use: [
'babel-loader',
],
}
您可以导入已编译的版本/react-google-maps/**lib**/async/withScriptjs.js
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？