Impossible de trouver le module de 'réagir'

Je suis d'essayer d'intégrer Réagir dans une page web existante. En ce moment, je n'arrive pas à obtenir mon Réagir app chargé. Mon Réagir app dispose de deux fichiers. À ce moment, ils ressemblent à ceci:

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;

Comme vous pouvez le voir, je suis en utilisant ES6. Je suis déterminé à utiliser ES6 sur ce projet. Pour cette raison, je suis l'aide de Babel dans mon Gulp fichier bundle mon Réagir app. Je suis l'aide de Gulp au lieu de Webpack parce que mon site est déjà à l'aide de Gulp. Encore, les détails pertinents dans mon colis.fichier json ressembler à ceci:

paquet.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"
}

Je puis bundle mon Réagir application à l'aide de la tâche suivante:

gulpfile.js

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'))        
    ;
});

Lorsque la tâche ci-dessus est exécuté, le bundle.js le fichier est généré. Il ressemble à ceci:

(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]);

Puis, dans la page web que je suis en train de charger cette application, j'ai le texte suivant:

...
<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>
...

Lorsque je charge tenter de le charger dans le navigateur, mon Réagir application ne prend pas en charge. Je peux voir dans la fenêtre de la console le message d'erreur suivant:

Uncaught Error: Cannot find module 'react'

Je ne comprends pas pourquoi réagir n'est pas chargé.

OriginalL'auteur user687554 | 2016-09-18