予期しないトークンのインポート、babel-loaderが動作していませんか？ ./app/main.jsモジュールの解析で

ERRORに失敗しました： /Users/dz2048/myapplication/app/main.js 1行目：予期しないトークンあなたはこのファイルタイプを処理するために、適切なローダーが必要な場合があります。 |インポート '反応する'から反応します。予期しないトークンのインポート、babel-loaderが動作していませんか？ ./app/main.jsモジュールの解析で

なぜwebpack-dev-serverを実行するとこのエラーが発生するのか分かりません。多くの人がこのエラーを受けているのを見るのは、さまざまな理由からです。私はbabel-loaderが完全にスキップしていて、main.jsファイルを翻訳していないと思われます。これを初めて自分で設定すると、webpackのドキュメントによく従ったと思っていましたが、そうは思いません。

依存関係：

"dependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "prop-types": "^15.6.0", 
    "react": "^16.2.0", 
    "react-redux": "^5.0.6", 
    "redux": "^3.7.2", 
    "seamless-immutable": "^7.1.2" 
}, 
"devDependencies": { 
    "babel-preset-env": "^1.6.1", 
    "webpack": "^3.10.0" 
}

webpack.config.dev.js：

const path = require('path'); 

module.exports = { 
    entry: { 
    main: './app/main.js' 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, '../public') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['@babel/preset-env'] 
      } 
     } 
     } 
    ] 
    } 
};

スクリプトpackage.json

"scripts": { 
    "web-dev": "webpack-dev-server --config web/webpack/webpack.config.dev.js --colors" 
    },

と最後から、私のファイル構造：

myapplication/ 
    app/ 
    main.js 

    node_modules/ 
    web/ 
    public/ 
    webpack/ 
     webpack.config.dev.js 
    package.json

ウェブ/公共/ index.htmlを：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width"> 
    </head> 
    <body> 
    <div id="root"></div> 
    <script src="bundle.js"></script> 
    </body> 
</html>

出典

2017-12-24 dzny

.babelrcファイルにプリセットし、WebPACKの設定ファイル – monssef

@monssefから削除するには設定してみてください。この部分を逃したと思います- ありがとうございました。私はこれを試した結果は同じでした。 – dzny

あなたはhtmlファイルのコンテンツも追加できますか？ – monssef

私は問題を発見しました。 package.jsonのスクリプトがwebpackの代わりにwebpack-dev-serverを使用していました。私が完全に理解していなかったサンプルプロジェクトのコードをコピーするために私に奉仕します。

出典

2017-12-25 21:44:11 dzny

変更この

 { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/ 
     },

に、ローダ部と、私はuが

resolve: { 
    alias: { 
     'react$': 'your react location', 
     ... 
    } 
}

出典

2017-12-26 02:55:16

予期しないトークンのインポート、babel-loaderが動作していませんか？ ./app/main.jsモジュールの解析で

答えて

関連する問題