找不到模块“反应" [英] Cannot find module 'react'

问题描述

我正在尝试将React集成到现有的网页中.目前，我无法加载我的React应用.我的React应用程序有两个文件.此时，它们看起来像这样:

I'm attempting to integrate React into an existing web page. At this time, I'm unable to get my React app loaded. My React app has two files. At this time, they look like this:

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文件中的相关详细信息仍如下所示:

As you can see, I'm using ES6. I'm determined to use ES6 on this project. For that reason, I'm using Babel in my Gulp file to bundle my React app. I'm using Gulp instead of Webpack because my site is already using Gulp. Still, the relevant details in my package.json file look like this:

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应用程序:

I then bundle my React app using the following task:

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文件.看起来像这样:

When the above task is ran, the bundle.js file gets generated. It looks like this:

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

然后，在我试图将该应用程序加载到的网页中，我具有以下内容:

Then, in the web page that I'm trying to load this app into, I have the following:

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

<script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.js"></script>
<script type="text/javascript" src="https://unpkg.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script type="text/javascript" src="/app/bundle.js"></script>
...

当我尝试在浏览器中加载它时，我的React应用程序没有加载.我可以在控制台窗口中看到以下错误消息:

When I load attempt to load this in the browser, my React app does not load. I can see in the console window the following error message:

Uncaught Error: Cannot find module 'react'

我不明白为什么反应没有被加载.

I don't understand why react isn't getting loaded.

推荐答案

您的package.json中没有React.您的项目很难使用尚未安装的软件包.

Your package.json doesn't have React in it. It's pretty hard for your project to use a package you haven't installed.

只需在package.json中添加:"react":"^ 15.3.1" 并进行新的npm安装，就可以了.

Just add: "react": "^15.3.1" to your package.json and do a new npm install, and you should be fine.

这篇关于找不到模块“反应"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！