質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

1619閲覧

React + Redux開発「webpack4」「babel」に関してのエラー

monok

総合スコア10

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

1クリップ

投稿2018/10/11 13:35

前提・実現したいこと

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" ] }, を追加。

お手数ではございますが、何卒アドバイスをお願い致します・

補足

ディレクトリ構成
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問