Javascript 找不到模块“反应”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39557999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot find module 'react'
提问by user687554
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:
我正在尝试将 React 集成到现有网页中。目前，我无法加载我的 React 应用程序。我的 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
我的组件.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;
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:
如您所见，我使用的是 ES6。我决定在这个项目中使用 ES6。出于这个原因，我在我的 Gulp 文件中使用 Babel 来捆绑我的 React 应用程序。我使用 Gulp 而不是 Webpack，因为我的网站已经在使用 Gulp。不过，我的 package.json 文件中的相关详细信息如下所示：
package.json
包.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"
}
I then bundle my React app using the following task:
然后我使用以下任务捆绑我的 React 应用程序：
gulpfile.js
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'))
;
});
When the above task is ran, the bundle.js file gets generated. It looks like this:
运行上述任务时，会生成 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]);
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/[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>
...
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:
当我加载尝试在浏览器中加载它时，我的 React 应用程序没有加载。我可以在控制台窗口中看到以下错误消息：
Uncaught Error: Cannot find module 'react'
I don't understand why react isn't getting loaded.
我不明白为什么反应没有被加载。
采纳答案by Jake Roby
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。您的项目很难使用您尚未安装的软件包。
Just add: "react": "^15.3.1"to your package.json and do a new npm install, and you should be fine.
只需将：添加"react": "^15.3.1"到您的 package.json 并执行新的 npm 安装，您应该没问题。
回答by Kurkula
You are planning to use react inside typescript. Try this
您打算在打字稿中使用 react。尝试这个
npm install --save react react-dom @types/react @types/react-dom
回答by Atul Kumar
Do npm install reactin your local directory.
It worked for me.
不要npm install react在你的本地目录。它对我有用。
回答by CPHPython
I am using Gatsby and React was in my package.jsonwith the following:
我正在使用 Gatsby，React 在我的package.json 中，内容如下：
"react": "^16.7.0",
"react-dom": "^16.7.0",
It was previously working when I ran gatsby develop. However, when I installed a couple of plugins (npm install --save less gatsby-plugin-less), the "Error: Cannot find module 'react'" started popping up whenever whenever I did gatsby develop.
它以前在我运行时工作gatsby develop。但是，当我安装了几个插件 ( npm install --save less gatsby-plugin-less)时，每当我安装时，“错误：找不到模块‘react’”就会开始弹出gatsby develop。
Weirdly, I just did npm installon the package.jsonfolder and it fixed the issue.
奇怪的是，我只是npm install在package.json文件夹上做了，它解决了这个问题。
回答by Jeevan
I Was facing this issue and in my case, I was referring a .env file and it was missing from my repo. Bring back the file and it works. Make sure to check these types of files that you are using in your project. There is no clear error message.
我遇到了这个问题，就我而言，我指的是一个 .env 文件，但它在我的仓库中丢失了。带回文件，它可以工作。确保检查您在项目中使用的这些类型的文件。没有明确的错误信息。
