找不到模块“ reactcomponent”

Question

请卡住

我是用于从后端生成html的Web开发人员

只是转而做出反应，似乎在痛苦中...

bower.json

{
  "name": "ps-full-stack",
  "description": "",
  "main": "index.js",
  "authors": [
    "radu.hulubas <razorflashmedia>"
  ],
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "react": "^16.1.0"
  }
}

package.json

{
  "name": "ps-full-stack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babelify": "^8.0.0",
    "browser-sync": "^2.24.7",
    "browserify": "^16.2.2",
    "ejs": "^2.6.1",
    "express": "^4.16.3",
    "gulp": "^3.9.1",
    "gulp-live-server": "0.0.31",
    "path": "^0.12.7",
    "react": "^16.4.2",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "cross-env": "^5.2.0"
  }
}

main.jsx

var itemlist = require('./components/itemlist');
React.render(<itemlist/>, app);

我得到的错误是-

错误：找不到模块“ ./components/itemlist”-

这是没有意义的，因为路径是正确的

Answer 1

main.js

var express = require('express');
var app = new express();

const PORT = 7777;
app.get('/',function(req,res){
  res.render('./../app/index.ejs',{});
})
  .use(express.static(__dirname + '/../.tmp'))
  .listen(PORT);

itemlist.jsx

var React = require('react/addons');

module.exports = React.createClass({
  render: function(){
    return (
      <div>
        <h1>Grocery Listify</h1>
      </div>
    )
  }
});

gulp.js

var gulp = require('gulp');
var LiveServer = require('gulp-live-server');
var browserSync = require('browser-sync');
var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream');
let path = require('path');

gulp.task('live-server',function(){
  var server = new LiveServer('server/main.js');
  server.start();
});

gulp.task('bundle',function(){

  return browserify({
    entries: 'app/main.jsx',
    debug: true,
  })
    .transform(reactify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./.tmp'))
    ;
});

gulp.task('serve',['bundle','live-server'], function(){
  browserSync.init(null,{
    proxy:"http://localhost:7777",
    port: 9001,
  })
});

Answer 2

将您的itemList组件更改为：

import React, { Component } from 'react'

export default class ItemList extends Component {
  render() {
     return (
        <div> <h1>Grocery Listify</h1> </div>
     )
  }
}

然后在您的主文件中导入它，如下所示：

import ItemList from './components/itemlist'

Answer 3

问题出在写得不好的需求声明上。

这个：

var itemlist = require('./components/itemlist');

应该通过以下方式更改：

var itemlist = require('./components/itemlist.jsx');