简单的Webpack + React + ES6 + babel示例不起作用。意外的令牌错误

帕里特

运行webpack编译jsx语法时出现解析错误。如果有人可以指出我的错误,将不胜感激。我看到一个类似的问题问Webpack,React,JSX,Babel-意外令牌<,但是建议的解决方案对我不起作用。

这是我的配置文件的样子:

package.json

 {
  "name": "dropdowns",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "babel-core": "^6.11.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1"
  },
  "devDependencies": {
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "author": "",
  "license": "ISC"
}

我的webpack.config.js文件是

    module.exports = {
    context: __dirname + "/app",
    entry: "./main.js",

    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }


};

在本地应用程序文件夹中,我具有main.js和IdMappingOptions.js,如下所示:

// in IdMappingOptions.js
import React from 'react';
class IdMappingOptions extends React.Component {
    render () {
        return <span>Hello!</span>
    }
}
export default IdMappingOptions;
// in main.js
    import React from 'react';
import { render } from 'react-dom';
import IdMappingOptions from './IdMappingOptions';

render(
    <IdMappingOptions/>, document.body
);

运行node_modules / .bin / webpack时,出现以下错误跟踪:

Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 37ms
  [0] ./main.js 0 bytes [built] [failed]
ERROR in ./main.js
Module parse failed: /scratch/parallel/repository/dropdowns/app/main.js    Unexpected token (6:4)
You may need an appropriate loader to handle this file type.
 SyntaxError: Unexpected token (6:4)
 at Parser.pp.raise (/scratch/parallel/repository/dropdowns/node_module/acorn/dist/acorn.js:923:13)

编辑:按照下面的注释修复测试模式,并在webpack.config.js中添加babel-core。这是我的目录结构

罗伯特克莱普

您的测试似乎有问题:

test: "/.js$"

试试这个:

test: /\.js$/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

简单的 Webpack 4 + Babel 7 + ES6 语法中的 React ClickHandler

来自分类Dev

React - ES6 - 意外令牌

来自分类Dev

意外的令牌导入(webpack es6)

来自分类Dev

Webpack babel es6给我React-Router 1.0错误“找不到模块”?

来自分类Dev

react-dnd简单可排序的示例ES6代替ES7

来自分类Dev

ES6(traceur)+ Webpack + React

来自分类Dev

ES6模块,babel / webpack。导入/导出语句不起作用

来自分类Dev

React ES6中的PropTypes不起作用

来自分类Dev

React + Webpack + babel7 解析 es6 风格的函数赋值失败

来自分类Dev

业力+ Webpack(babel-loader)+ ES6“意外的令牌导入”

来自分类Dev

React + Webpack + ES6中的动态组件名称

来自分类Dev

React + Webpack + ES6中的动态组件名称

来自分类Dev

React,Babel,Webpack无法解析jsx,意外的令牌错误

来自分类Dev

React,Babel,Webpack无法解析jsx,意外的令牌错误

来自分类Dev

Babel、Webpack、ES6、React:导入模块然后将导入的模块作为道具传递给孩子

来自分类Dev

将React ES6迁移到TypeScript:导入语句不起作用

来自分类Dev

为什么用 ES6 方式定义 React 组件构造函数不起作用?

来自分类Dev

Webpack,React,JSX,Babel-意外令牌<

来自分类Dev

Webpack,React,JSX,Babel-意外令牌<

来自分类Dev

如何为 ES6 类创建“字段”(React 示例)

来自分类Dev

Webpack,Babel:ES6导入与Fabric.js的需求

来自分类Dev

简单的解构程序 - ES6 (JavaScript) 抛出错误

来自分类Dev

Angular 2 / Typescript / Webpack的Prerender es6错误

来自分类Dev

_Symbol.for:实际上是有效的ES6吗?Webpack是从React源码构建的

来自分类Dev

Webpack / Babel / React-“未捕获的SyntaxError:意外令牌:”

来自分类Dev

如何快速学习jslib?React.js,AngularJS,Node,ES6,Babel

来自分类Dev

使用ES6 / Babel创建React组件时,“ ReferenceError:require未定义”

来自分类Dev

webpack / babel / es6导入问题-(0,_whatwgFetch2.default)不是函数

来自分类Dev

NodeJS(ES6):SyntaxError:意外令牌{

Related 相关文章

  1. 1

    简单的 Webpack 4 + Babel 7 + ES6 语法中的 React ClickHandler

  2. 2

    React - ES6 - 意外令牌

  3. 3

    意外的令牌导入(webpack es6)

  4. 4

    Webpack babel es6给我React-Router 1.0错误“找不到模块”?

  5. 5

    react-dnd简单可排序的示例ES6代替ES7

  6. 6

    ES6(traceur)+ Webpack + React

  7. 7

    ES6模块,babel / webpack。导入/导出语句不起作用

  8. 8

    React ES6中的PropTypes不起作用

  9. 9

    React + Webpack + babel7 解析 es6 风格的函数赋值失败

  10. 10

    业力+ Webpack(babel-loader)+ ES6“意外的令牌导入”

  11. 11

    React + Webpack + ES6中的动态组件名称

  12. 12

    React + Webpack + ES6中的动态组件名称

  13. 13

    React,Babel,Webpack无法解析jsx,意外的令牌错误

  14. 14

    React,Babel,Webpack无法解析jsx,意外的令牌错误

  15. 15

    Babel、Webpack、ES6、React:导入模块然后将导入的模块作为道具传递给孩子

  16. 16

    将React ES6迁移到TypeScript:导入语句不起作用

  17. 17

    为什么用 ES6 方式定义 React 组件构造函数不起作用?

  18. 18

    Webpack,React,JSX,Babel-意外令牌<

  19. 19

    Webpack,React,JSX,Babel-意外令牌<

  20. 20

    如何为 ES6 类创建“字段”(React 示例)

  21. 21

    Webpack,Babel:ES6导入与Fabric.js的需求

  22. 22

    简单的解构程序 - ES6 (JavaScript) 抛出错误

  23. 23

    Angular 2 / Typescript / Webpack的Prerender es6错误

  24. 24

    _Symbol.for:实际上是有效的ES6吗?Webpack是从React源码构建的

  25. 25

    Webpack / Babel / React-“未捕获的SyntaxError:意外令牌:”

  26. 26

    如何快速学习jslib?React.js,AngularJS,Node,ES6,Babel

  27. 27

    使用ES6 / Babel创建React组件时,“ ReferenceError:require未定义”

  28. 28

    webpack / babel / es6导入问题-(0,_whatwgFetch2.default)不是函数

  29. 29

    NodeJS(ES6):SyntaxError:意外令牌{

热门标签

归档