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

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

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

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

Q&A

1回答

842閲覧

Reactで「Uncaught ReferenceError: React is not defined」と表示される

ttktt

総合スコア12

React.js

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

0グッド

0クリップ

投稿2017/06/27 09:45

編集2022/01/12 10:55

Rails上でreactを動かすのに、こちらの記事を参考に/client以下にwebpack環境を置いて、webpackでビルドした結果を/app/assets/javascripts/webpack/に配置したのですが、componentを描画しようとすると、Uncaught ReferenceError: React is not definedと表示されてしまいます。以下が各ファイルの中身になっています。どこが間違っているのか教えていただけると幸いです。どうぞよろしくお願いいたします。

ファイル構成

client ├─ src │ ├ components │ │ └─ favorite_box.js.jsx │ └─index.js ├─ node_modules ├─ package.json └─ webpack.config.js

各ファイル

javascript

1// favorite_box.js.jsx 2class FavoriteBox extends React.Component { 3 // (中略) 4 5 render() { 6 return ( 7 <div className="FavoriteBox"> 8 </div> 9 ) 10 } 11}

javascript

1// index.js 2import React from 'react' 3import ReactDOM from 'react-dom' 4 5import FavoriteBox from './components/favorite_box.js.jsx' 6 7ReactDOM.render( 8 <FavoriteBox/>, 9 document.getElementById('favorite_box') 10) 11

javascript

1// webpack.config.js 2module.exports = { 3 entry: { 4 app: './src/index.js', 5 }, 6 7 output: { 8 path: '../app/assets/javascripts/webpack', 9 filename: '[name].js', 10 }, 11 12 module: { 13 loaders: [ 14 { test: /\.(js|jsx)$/, 15 loader: "babel", 16 exclude: /node_modules/, 17 query: { 18 presets: ["es2015", "react"], 19 } 20 }, 21 ] 22 }, 23}

json

1// package.json 2{ 3 "private": true, 4 "scripts": { 5 "webpack-watch": "webpack -w", 6 "webpack-build": "webpack -p" 7 }, 8 "devDependencies": { 9 "babel-core": "^6.25.0", 10 "babel-loader": "^6.2.4", 11 "babel-preset-es2015": "^6.9.0", 12 "babel-preset-react": "^6.11.1", 13 "webpack": "^1.13.1" 14 }, 15 "dependencies": { 16 "react": "^15.2.1", 17 "react-dom": "^15.2.1" 18 } 19} 20

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

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

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

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

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

guest

回答1

0

favorite_box.js
で、Reactをimportしていないです。

投稿2017/06/27 13:00

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

ttktt

2017/06/28 00:35

ありがとうございます!importしたらエラーなくなりました!ただ今度は `Uncaught Error: Cannot find module "./components/favorite_box.js.jsx"` と出てしまったのですが、パスの指定の仕方間違ってますでしょうか...??
退会済みユーザー

退会済みユーザー

2017/06/28 01:19 編集

favorite_box.js.jsxとfavorite_box.jsが混在してるのではないでしょうか?実際のファイルの拡張子と、パス指定している箇所のファイル名の拡張子が合致してるか確認してみてください。
ttktt

2017/06/28 02:26

ご指摘ありがとうございます!すみません、拡張子書き間違えておりました???? 再度確認してみましたが、favorite_box.js.jsxでファイル名は統一できていますね。他に何かきになる点はございますでしょうか...?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問