web-dev-qa-db-ja.com

モジュール 'react'が見つかりません

Reactを既存のWebページに統合しようとしています。現時点では、Reactアプリをロードしました。MyReact appには2つのファイルがあります。現時点では、次のようになっています。

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を使用することにしました。そのため、GulpファイルでBabelを使用してReactアプリをバンドルしています。サイトではすでにGulpを使用しているため、WebpackではなくGulpを使用しています。 package.jsonファイルは次のようになります。

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

次に、次のタスクを使用してReactアプリをバンドルします。

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

上記のタスクが実行されると、bundle.jsファイルが生成されます。次のようになります。

(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'

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

javascriptreactjsgulp
12
user687554

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

追加するだけ："react": "^15.3.1"をpackage.jsonに追加し、新しいnpmインストールを実行します。これで問題ありません。

6
Jake Roby

TypeScript内でreactを使用する予定です。これを試して

npm install --save react react-dom @types/react @types/react-dom
3
Kurkula

行う npm install reactローカルディレクトリに。それは私のために働いた。

1
Atul Kumar

私はGatsbyを使用しており、Reactは私のpackage.jsonにあり、次のように：

"react": "^16.7.0",
"react-dom": "^16.7.0",

以前、gatsby develop。ただし、いくつかのプラグイン（npm install --save less gatsby-plugin-less）、「エラー：モジュール 'react'が見つかりません」がポップアップを開始しましたgatsby develop。

奇妙なことに、私はnpm installpackage.jsonフォルダーで問題を修正しました。

0
CPHPython