Webpack-Babel-JSXの解析:SyntaxError:予期しないトークン

Sanket Meghani

webpackを使用してReactアプリケーションを作成しようとしています。私はbabelを使用して.jsxファイルをトランスパイルしています。しかし、.jsxファイルをロードするためにbabelローダーを使用していないようです。次のエラーが発生します:

ERROR in ./app.jsx
Module parse failed: C:\codebase\react-demo/app\app.jsx Unexpected token (7:15)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:15)
    at Parser.pp$4.raise (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1597:21)
    at Parser.pp$3.parseExpression (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1573:21)
    at Parser.pp$1.parseReturnStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:839:33)
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:699:34)
    at Parser.pp$1.parseBlock (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:981:25)
    at Parser.pp$3.parseFunctionBody (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2105:24)
    at Parser.pp$3.parseMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:2075:10)
    at Parser.pp$1.parseClassMethod (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1137:25)
    at Parser.pp$1.parseClass (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:1118:14)
    at Parser.pp$1.parseStatement (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:697:19)
    at Parser.pp$1.parseTopLevel (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:638:25)
    at Parser.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:516:17)
    at Object.parse (C:\codebase\react-demo\node_modules\acorn\dist\acorn.js:3098:39)
    at Parser.parse (C:\codebase\react-demo\node_modules\webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\codebase\react-demo\node_modules\webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\codebase\react-demo\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\codebase\react-demo\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\codebase\react-demo\node_modules\graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3)

私のwebpack.config.jsように見えます:

var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var __dirname = path.resolve();

module.exports = {
    context: __dirname + "/app",
    entry: "./app.jsx",
    output: {
        path: __dirname + "/dist/",
        filename: "bundle.min.js"
    },
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
    }],
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ],
};

私のapp.jsx(./ app / app / jsxにあります)は次のとおりです。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {

    render() {
        return <div > Test < /div>;
    }
}

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

私は以下を持っています.babelrc

{
    "presets": ["es2015", "stage-0", "react"]
}

次のノード依存関係がインストールされています:

"devDependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "html-webpack-plugin": "^2.22.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
}

何が欠けているのでしょうか?

WHO

問題はローダー構成にあります。

プロパティloadersはオブジェクト内にある必要がありますmodule

module.exports = {
    …
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }],
    },
    …
};

https://webpack.github.io/docs/loaders.htmlを参照してください

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Webpack、React、JSX、Babel-予期しないトークン<

分類Dev

Gulp、Vue、Webpack、Babel、Uncaught SyntaxError:予期しないトークンのインポート

分類Dev

SyntaxError:予期しないトークンのインポートWebpack 2 Babel 6 Reactjs

分類Dev

React、Babel、Webpackがjsxを解析しない、予期しないトークンエラー

分類Dev

Django + Babel + Webpackの予期しないトークン

分類Dev

babel-loader jsx SyntaxError:予期しないトークン

分類Dev

webpack + babel-反応、予期しないトークン「インポート」

分類Dev

Webpack、React JSX、Babel: モジュールのビルドに失敗しました。「予期しないトークン」が空ですか?

分類Dev

React、Babel、Webpackがjsxコードを解析しない

分類Dev

Karma + Webpack(babel-loader)+ ES6「予期しないトークンのインポート」

分類Dev

Jestが予期しないトークンに遭遇しました(React、Typescript、Babel、Jest、Webpackのセットアップ)

分類Dev

Webpack SyntaxError:予期しないトークン=>

分類Dev

Babelとwebpackローダー

分類Dev

Babel / webpackの依存関係

分類Dev

予期しないトークン 'const' webpack、babel、およびkarmaを実行している場合

分類Dev

Webpack&Babel:Reactコンポーネントのサーバー側レンダリング「予期しないトークン '<'」

分類Dev

Webpack Babel 6

分類Dev

vue babel-loader SyntaxError:「:click」構文の予期しないトークン

分類Dev

WebpackなしでBabelを使用する方法

分類Dev

Grunt / Webpack / Babelのパスエラー

分類Dev

モジュールのビルドに失敗しました:SyntaxError:laravel(gulp + webpack + babel)でreact-dndを使用するときに予期しない文字 '@'

分類Dev

TypeScript + Babel + Webpackの設定方法は?

分類Dev

webpack、babel、mithril.jsの設定

分類Dev

Webpackの予期しないトークン ';'

分類Dev

Webpack-SyntaxError:予期しないトークン{

分類Dev

Webpack environment.plugins.prepend SyntaxError:予期しないトークン)

分類Dev

Webpackのbabel-loaderにはbabel.config.jsが必要ですか?

分類Dev

SyntaxError:koaでasyncとbabelを使用した予期しないトークン

分類Dev

webpack / react / babelはJSXをコンパイルしません

Related 関連記事

  1. 1

    Webpack、React、JSX、Babel-予期しないトークン<

  2. 2

    Gulp、Vue、Webpack、Babel、Uncaught SyntaxError:予期しないトークンのインポート

  3. 3

    SyntaxError:予期しないトークンのインポートWebpack 2 Babel 6 Reactjs

  4. 4

    React、Babel、Webpackがjsxを解析しない、予期しないトークンエラー

  5. 5

    Django + Babel + Webpackの予期しないトークン

  6. 6

    babel-loader jsx SyntaxError:予期しないトークン

  7. 7

    webpack + babel-反応、予期しないトークン「インポート」

  8. 8

    Webpack、React JSX、Babel: モジュールのビルドに失敗しました。「予期しないトークン」が空ですか?

  9. 9

    React、Babel、Webpackがjsxコードを解析しない

  10. 10

    Karma + Webpack(babel-loader)+ ES6「予期しないトークンのインポート」

  11. 11

    Jestが予期しないトークンに遭遇しました(React、Typescript、Babel、Jest、Webpackのセットアップ)

  12. 12

    Webpack SyntaxError:予期しないトークン=>

  13. 13

    Babelとwebpackローダー

  14. 14

    Babel / webpackの依存関係

  15. 15

    予期しないトークン 'const' webpack、babel、およびkarmaを実行している場合

  16. 16

    Webpack&Babel:Reactコンポーネントのサーバー側レンダリング「予期しないトークン '<'」

  17. 17

    Webpack Babel 6

  18. 18

    vue babel-loader SyntaxError:「:click」構文の予期しないトークン

  19. 19

    WebpackなしでBabelを使用する方法

  20. 20

    Grunt / Webpack / Babelのパスエラー

  21. 21

    モジュールのビルドに失敗しました:SyntaxError:laravel(gulp + webpack + babel)でreact-dndを使用するときに予期しない文字 '@'

  22. 22

    TypeScript + Babel + Webpackの設定方法は?

  23. 23

    webpack、babel、mithril.jsの設定

  24. 24

    Webpackの予期しないトークン ';'

  25. 25

    Webpack-SyntaxError:予期しないトークン{

  26. 26

    Webpack environment.plugins.prepend SyntaxError:予期しないトークン)

  27. 27

    Webpackのbabel-loaderにはbabel.config.jsが必要ですか?

  28. 28

    SyntaxError:koaでasyncとbabelを使用した予期しないトークン

  29. 29

    webpack / react / babelはJSXをコンパイルしません

ホットタグ

アーカイブ