gpt4 book ai didi

reactjs - Webpack 错误 React 和 ES6 之前在 Babelify 下工作

转载 作者:行者123 更新时间:2023-12-03 13:44:23 25 4
gpt4 key购买 nike

我尝试从 babelify、watchify、browserify 迁移到 webpack、webpack 服务器和 babel。

我记得 6 个月前放弃了 webpack,因为它在尝试使用 aws-sdk 时给我带来了类似的问题。

由于某种原因,每次构建时都会出现以下错误:

Hash: 396f0bfb9d565b6f60f0 Version: webpack 1.14.0 Time: 61ms [0] ./src/index.js 0 bytes [built] [failed]

ERROR in ./src/index.js Module parse failed: C:\Users\james\Documents\hyre\src\index.js Unexpected token (9:8) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (9:8) at Parser.pp$4.raise (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) at Parser.pp.unexpected (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) at Parser.pp$3.parseExprAtom (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21) at Parser.pp$3.parseMaybeUnary (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExprList (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:2165:22) at Parser.pp$3.parseSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1741:35) at Parser.pp$3.parseExprSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1718:17) at Parser.pp$3.parseMaybeUnary (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) at Parser.pp$3.parseExprOps (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) at Parser.pp$3.parseMaybeConditional (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) at Parser.pp$3.parseMaybeAssign (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) at Parser.pp$3.parseExpression (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21) at Parser.pp$1.parseStatement (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47) at Parser.pp$1.parseTopLevel (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25) at Parser.parse (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17) at Object.parse (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) at Parser.parse (C:\Users\james\Documents\hyre\node_modules\webpack\lib\Parser.js:902:15) at DependenciesBlock. (C:\Users\james\Documents\hyre\node_modules\webpack\lib\NormalModule.js:104:16) at DependenciesBlock.onModuleBuild (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) at nextLoader (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) at C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 at Storage.finished (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) at C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)

我相信我已按要求设置了一切。请查看我的文件:

webpack.config.js

module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public/js',
filename: 'bundle.js',
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
}
}

package.json

{
"name": "hyre",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"aws-sdk": "^2.4.4",
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"is-my-date-valid": "^0.1.0",
"lodash": "^4.17.2",
"moment": "^2.14.1",
"react": "^15.1.0",
"react-date-picker": "^5.3.26",
"react-datepicker": "^0.28.1",
"react-dom": "^15.1.0",
"watchify": "^3.7.0"
},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.11.1",
"react-hot-loader": "^1.3.0",
"transform-loader": "^0.2.3",
"webpack": "^1.14.0"
}
}

index.js

/*let message = 'Loaded----->';
console.log(message);*/

import React from 'react';
import { render } from 'react-dom';
import App from './components/app';

render (<App />, document.getElementById('app'));

最佳答案

您的webpack配置有错误。 resolvemoduleloaders 属性不应嵌套在 output 属性中,它们应该位于同一级别。这是有效的配置:

module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public/js',
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
}
]
}
}

关于reactjs - Webpack 错误 React 和 ES6 之前在 Babelify 下工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41126399/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com