Webpack Error React & ES6 之前在 Babelify 下工作

Posted 2023-02-18

【中文标题】Webpack Error React & ES6 之前在 Babelify 下工作

【英文标题】：Webpack Error React & ES6 Previously working under Babelify

【发布时间】：2017-04-28 19:50:43

【问题描述】：

我尝试过从 babelify、watchify、browserify 迁移到 webpack、webpack server 和 babel。

我记得 6 个月前离开 webpack，因为尝试使用 aws-sdk 时它给了我类似的问题。

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

哈希：396f0bfb9d565b6f60f0 版本：webpack 1.14.0 时间：61ms [0] ./src/index.js 0 字节 [已构建] [失败]

./src/index.js 中的错误模块解析失败： C:\Users\james\Documents\hyre\src\index.js 意外令牌 (9:8) 你 可能需要适当的加载器来处理这种文件类型。语法错误： 意外令牌 (9:8) 在 Parser.pp$4.raise (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15) 在 Parser.pp.unexpected (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:603:10) 在 Parser.pp$3.parseExprAtom (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1822:12) 在 Parser.pp$3.parseExprSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1715:21) 在 Parser.pp$3.parseMaybeUnary (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) 在 Parser.pp$3.parseExprOps (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) 在 Parser.pp$3.parseMaybeConditional (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) 在 Parser.pp$3.parseMaybeAssign (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) 在 Parser.pp$3.parseExprList (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:2165:22) 在 Parser.pp$3.parseSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1741:35) 在 Parser.pp$3.parseExprSubscripts (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1718:17) 在 Parser.pp$3.parseMaybeUnary (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1692:19) 在 Parser.pp$3.parseExprOps (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1637:21) 在 Parser.pp$3.parseMaybeConditional (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1620:21) 在 Parser.pp$3.parseMaybeAssign (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1597:21) 在 Parser.pp$3.parseExpression (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:1573:21) 在 Parser.pp$1.parseStatement (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:727:47) 在 Parser.pp$1.parseTopLevel (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:638:25) 在 Parser.parse (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:516:17) 在 Object.parse (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\acorn\dist\acorn.js:3098:39) 在 Parser.parse (C:\Users\james\Documents\hyre\node_modules\webpack\lib\Parser.js:902:15) 在依赖项块。 (C:\Users\james\Documents\hyre\node_modules\webpack\lib\NormalModule.js:104:16) 在 DependenciesBlock.onModuleBuild (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10) 在 nextLoader (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25) 在 C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5 在 Storage.finished (C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16) 在 C:\Users\james\Documents\hyre\node_modules\webpack\node_modules\enhanced-resolve\node_modules\graceful-fs\graceful-fs.js:78:16 在 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'));

【参考方案1】：

你的 webpack 配置有误。 resolve、module 和 loaders 属性不应嵌套在 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']
        
      
    ]
  

【讨论】：

没错，但没有运气。

同样的错误？您是否重新启动了 wepback？仅手表重新加载是不够的。

是的，同样的错误。我在设置时正在手动构建。

尝试删除cacheDirectory选项

将您的预设顺序更改为['es2015', 'react']。检查这个***.com/questions/36392826/…