前提・実現したいこと
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" ] }, を追加。
お手数ではございますが、何卒アドバイスをお願い致します・
補足
あなたの回答
tips
プレビュー