找不到模块 'react'

17 浏览
0 Comments

找不到模块 'react'

我正在尝试将React集成到现有的网页中。目前，我无法加载我的React应用程序。我的React应用程序有两个文件，目前它们的内容如下：

myApp.js

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './components/myComponent';
ReactDOM.render(, document.getElementById('root'));

myComponent.js

import React from 'react';
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
  render() {
    console.log('here');
    return (
        
Hello (from React)

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



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




...



...





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




Uncaught Error: Cannot find module 'react'





我不明白为什么没有加载react。
0