[英]Cannot find module 'react'
我正在嘗試將 React 集成到現有的 web 頁面中。 目前,我無法加載我的 React 應用程序。 我的 React 應用程序有兩個文件。 此時,它們看起來像這樣:
myApp.js
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './components/myComponent';
ReactDOM.render(<MyComponent />, document.getElementById('root'));
我的組件.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/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 應用程序沒有加載。 我可以在控制台 window 中看到以下錯誤消息:
Uncaught Error: Cannot find module 'react'
我不明白為什么反應沒有被加載。
您打算在打字稿中使用 react。 嘗試這個
npm install --save react react-dom @types/react @types/react-dom
您的 package.json 中沒有 React。 您的項目很難使用您尚未安裝的軟件包。
只需將: "react": "^15.3.1"
到您的 package.json 並執行新的 npm 安裝,您應該沒問題。
在本地目錄中執行npm install react
。 它對我有用。
我正在使用 Gatsby,React 在我的package.json 中,內容如下:
"react": "^16.7.0",
"react-dom": "^16.7.0",
當我運行gatsby develop
時,它以前是有效的。 但是,當我安裝了幾個插件( npm install --save less gatsby-plugin-less
)時,每當我執行gatsby develop
時,“錯誤:找不到模塊'react'”就會開始彈出。
奇怪的是,我只是在package.json文件夾上npm install
了npm install
並解決了這個問題。
我遇到了這個問題,就我而言,我指的是一個 .env 文件,但它在我的倉庫中丟失了。 帶回文件,它可以工作。 確保檢查您在項目中使用的這些類型的文件。 沒有明確的錯誤信息。
yarn add react react-redux
為我修復了它
項目的父目錄中還有另一個package.json
文件導致此問題。 一旦我刪除了這些並重新安裝了軟件包,它對我來說效果很好。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.