2016-09-18 36 views
4

Reactを既存のWebページに統合しようとしています。現時点では、Reactアプリを読み込むことができません。 My Reactアプリには2つのファイルがあります。この時、彼らは次のようになります。モジュール 'react'が見つかりません

myApp.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

import MyComponent from './components/myComponent'; 

ReactDOM.render(<MyComponent />, document.getElementById('root')); 

myComponent.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 

class MyComponent extends React.Component { 
    render() { 
    console.log('here'); 
    return (
     <div> 
     <h2>Hello (from React)</h2> 
     <br />   
     </div> 
    ); 
    } 
} 

export default MyComponent; 

あなたが見ることができるように、私はES6を使用しています。私はこのプロジェクトでES6を使うことに決めました。その理由から、私はReelアプリケーションをバンドルするためにGulpファイルにBabelを使用しています。私のサイトは既にGulpを使用しているので、私はWebpackの代わりにGulpを使用しています。それでも、私のpackage.jsonファイル内の関連する詳細は、次のようになります。

gulpfile.js:

package.json

... 
"devDependencies": { 
    "babel-preset-es2015": "^6.14.0", 
    "babel-preset-react": "^6.11.1", 
    "babelify": "^7.3.0", 
    "browserify": "^13.1.0", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "gulp-clean-css": "^2.0.11", 
    "gulp-uglify": "^1.5.4", 
    "vinyl-source-stream": "^1.1.0" 
} 

私は、次のタスクを使用して、私のリアクトアプリをバンドル上記のタスクが実行され

gulp.task('buildApp', function() { 
    return browserify({ entries: ['./app/myApp.js', './app/components/myComponent.js'] }) 
     .transform("babelify", {presets: ['es2015', 'react']}) 
     .bundle() 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest('./app'))   
    ; 
}); 

、bundle.jsファイルが生成取得しますd。それは次のようになります。

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){ 
'use strict'; 

var _react = require('react'); 

var _react2 = _interopRequireDefault(_react); 

var _reactDom = require('react-dom'); 

var _reactDom2 = _interopRequireDefault(_reactDom); 

var _myComponent = require('./components/myComponent'); 

var _myComponent2 = _interopRequireDefault(_myComponent); 

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

_reactDom2.default.render(_react2.default.createElement(NyComponent, null), document.getElementById('root')); 

},{"./components/myComponent":2,"react":"react","react-dom":"react-dom"}],2:[function(require,module,exports){ 
'use strict'; 

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 

var _react = require('react'); 

var _react2 = _interopRequireDefault(_react); 

var _reactDom = require('react-dom'); 

var _reactDom2 = _interopRequireDefault(_reactDom); 

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 

var MyComponent = function (_React$Component) { 
    _inherits(MyComponent, _React$Component); 

    function MyComponent() { 
    _classCallCheck(this, MyComponent); 

    return _possibleConstructorReturn(this, (MyComponent.__proto__ || Object.getPrototypeOf(MyComponent)).apply(this, arguments)); 
    } 

    _createClass(MyComponent, [{ 
    key: 'render', 
    value: function render() { 
     console.log('here'); 
     return _react2.default.createElement(
     'div', 
     null, 
     _react2.default.createElement(
      'h2', 
      null, 
      'Hello (from React)' 
     ), 
     _react2.default.createElement('br', null) 
    ); 
    } 
    }]); 

    return MyComponent; 
}(_react2.default.Component); 

exports.default = MyComponent; 

},{"react":"react","react-dom":"react-dom"}]},{},[1]); 

をその後、私はにこのアプリをロードしようとしているWebページでは、私は次のようしている:

... 
<div id="root"></div> 

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.js"></script> 
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
<script type="text/javascript" src="/app/bundle.js"></script> 
... 

私はこれをロードしようとする試みをロードすると私のReactアプリケーションは読み込まれません。コンソールウィンドウに次のエラーメッセージが表示されます。

Uncaught Error: Cannot find module 'react' 

なぜ反応がロードされないのかわかりません。

+0

@AndrewL。 - このコードサンプルはありました。しかし、私の実際のコードは正しくタイプされています。私のところでフォーマットを間違えた。私はその問題を解決しました。これを指摘していただきありがとうございます。 – user687554

答えて

1

あなたのpackage.jsonにはReactがありません。プロジェクトでは、インストールしていないパッケージを使用するのはかなり難しいです。

あなたのpackage.jsonに"react": "^15.3.1"を追加して新しいnpmをインストールすれば、うまくいくはずです。

+0

私はそれを試みましたが、それは問題を解決しませんでした。 – user687554

+0

これは同じエラーですか、それともReactDomについて不平を言っていますか(あなたのpackage.jsonにもありません)? – gravityplanx

+0

同じエラーです。 – user687554

0

ローカルディレクトリにnpm install reactを入力してください。 それは私のために働いた。

関連する問題