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

スティーブンラスト

これは、ExpressJSを使用して私が持っているものです:

|-- app
|   |-- index.js
|-- node_modules
|   |-- babel-core
|   |-- babel-loader
|   |-- babel-preset-react
|   |-- express
|   |-- react
|   |-- react-dom
|   |-- webpack
|-- public
|   |-- js
|   |   |-- app.js
|   |-- index.html
|-- .babelrc
|-- index.js
|-- package.json
|-- webpack.config.js

/webpack.config.js

module.exports = {
    entry: [
        './app/index.js'
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            include: __dirname + '/app',
            loader: "babel-loader",
            query: {
                presets:['react']
            }
        }]
    },
    output: {
        filename: "app.js",
        path: __dirname + '/public/js'
    }
};

/app/index.js

var React = require("react");
var ReactDOM = require("react-dom");
var People = React.createClass({
    ...
});
ReactDOM.render(<People />, document.getElementById('app'));

/.babelrc

{
  "presets": [
    "react"
  ]
}

webpackを実行すると、次のようになります。

モジュールの解析に失敗しました:/app/index.js予期しないトークン<このファイルタイプを処理するには、適切なローダーが必要な場合があります。

交換する<People />と問題React.createElement(People, {})なく動作します。

私はbabel-preset-reactモジュールを持っています。私はローダーを持っpresets:['react']ていbabel-loaderます。私は.babelrcファイルを持っています。

webpack / babelが<People />JSXを解析できないのはなぜですか。

スティーブンラスト

これは私のinclude道の問題であることが判明しました私が持っていた:

include: __dirname + '/app'

私は今使っていpathます:

include: path.join(__dirname, '/app')

どちらが機能しますか?私はWindowsを使用していますが、それが違いを生むかどうかはわかりません。pathこれから普段使い始めると思います

webpackエラーがのようなものであったら良かったでしょうCan't find include folder/files

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

Reactサーバーサイドレンダリング予期しないトークン、JSXおよびBabel

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

React Native:予期しないトークン

分類Dev

JSXエラー:予期しないトークン、予期される "、"

分類Dev

JSXエラー:予期しないトークン、予期される "、"

分類Dev

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

分類Dev

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

分類Dev

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

分類Dev

JSXで予期しないトークン、予期される「、」

分類Dev

WebpackとReactで予期しないトークン

分類Dev

React-予期しないトークン、予期された;

分類Dev

React-予期しないトークン、予期される}

分類Dev

React Redux予期しないトークン、予期される "、"

分類Dev

React Native:予期しないトークン、予期される "、"

分類Dev

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

分類Dev

reactjsxとbabelを使用した予期しないトークン

分類Dev

JSXを使用したReactjs:予期しないトークン '<'

分類Dev

予期しないトークンのインポート-Electron / React

分類Dev

eslint「解析エラー:JSXで予期しないトークン{」

分類Dev

webpackの異常な予期しないトークン

Related 関連記事

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

    Reactサーバーサイドレンダリング予期しないトークン、JSXおよびBabel

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

  11. 11

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

  12. 12

    React Native:予期しないトークン

  13. 13

    JSXエラー:予期しないトークン、予期される "、"

  14. 14

    JSXエラー:予期しないトークン、予期される "、"

  15. 15

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

  16. 16

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

  17. 17

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

  18. 18

    JSXで予期しないトークン、予期される「、」

  19. 19

    WebpackとReactで予期しないトークン

  20. 20

    React-予期しないトークン、予期された;

  21. 21

    React-予期しないトークン、予期される}

  22. 22

    React Redux予期しないトークン、予期される "、"

  23. 23

    React Native:予期しないトークン、予期される "、"

  24. 24

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

  25. 25

    reactjsxとbabelを使用した予期しないトークン

  26. 26

    JSXを使用したReactjs:予期しないトークン '<'

  27. 27

    予期しないトークンのインポート-Electron / React

  28. 28

    eslint「解析エラー:JSXで予期しないトークン{」

  29. 29

    webpackの異常な予期しないトークン

ホットタグ

アーカイブ