React + Redux開発「webpack4」「babel」に関してのエラー
受付中
回答 0
投稿
- 評価
- クリップ 1
- VIEW 1,011
前提・実現したいこと
React + Reduxで開発をしているのですが、エラーが出て先に進まなくなりました。
他の記事を見ておそらくbabelが関係しているだろうと言うのは突き止めましたが、似たようなエラーはなく、手詰まりになっています。
言語：ES2015(ES6)
ビルドツール：webpack4
フレームワーク：React + Redux
テンプレートエンジン：JSX
パッケージマネージャー：npm
ーーーー
React (npm ・node.js・gulp)使用
node v8.12.0
npm v6.4.1
$ gulp -v
[22:30:16] CLI version 3.9.1
[22:30:16] Local version 3.9.1
ーーーー
ローカル環境
Homebrew 1.7.6
ーーーー
browsersync使用
発生している問題・エラーメッセージ
[Browsersync] Serving files from: ./
[21:48:35] gulp-notify: [Error running Gulp] ./src/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users//Desktop/React/react_sample3/node_modules/babel-preset-es2015/lib/index.js
[21:48:36] Version: webpack 4.20.2
Built at: 2018-10-11 21:48:35
Asset Size Chunks Chunk Names
bundle.js 5.23 KiB main [emitted] main
Entrypoint main = bundle.js
ERROR in ./src/js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users//Desktop/React/react_sample3/node_modules/babel-preset-es2015/lib/index.js該当のソースコード
◾️[webpack.config.js]
const MODE = 'development';
const enableSourceMap = (MODE === 'development');
module.exports = {
mode: MODE,
entry: './src/js/app.js',
output: {
path: '/js', // 出力先のパス
filename: 'bundle.js' // 出力先のファイル名
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
◾️[package.json]
{
"name": "react_redux",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production"
},
"babel": {
"presets": [
"react",
"es2015"
]
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.0-beta.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"browser-sync": "^2.26.0",
"gulp": "^3.9.1",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.0",
"gulp-watch": "^5.0.1",
"webpack": "^4.20.2",
"webpack-stream": "^5.1.1"
},
"dependencies": {
"react": "^16.5.2",
"react-dom": "^16.5.2"
}
}
◾️[index.html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>react+redux</title>
<link rel="stylesheet" href="/css/index.css">
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="./js/bundle.js"></script>
</body>
</html>試したこと
[package.json]に
"babel": {
"presets": [
"react",
"es2015"
]
},
を追加。
お手数ではございますが、何卒アドバイスをお願い致します・
補足
ディレクトリ構成
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.34%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる