找不到模块'reactcomponent'答案

【问题标题】：Cannot find module 'reactcomponent'找不到模块'reactcomponent'
【发布时间】：2018-09-07 07:27:38
【问题描述】：

请让我卡住

我是 web 开发人员，习惯于从后端生成 html

只是切换到反应，似乎很痛苦......

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' -

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

【问题讨论】：

请给我们显示ItemList
var React = require('react/addons'); module.exports = React.createClass({ render: function(){ return ( <div> <h1>Grocery Listify</h1> </div> ) } });
试试var itemlist = require('./components/itemlist.jsx');怎么样
非常感谢@Leo Odishvili - 非常感谢！

标签： javascript reactjs gulp

【解决方案1】：

问题在于写得不好的 require 语句。

这个：

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

应该这样改变：

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

【讨论】：

【解决方案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'

【讨论】：

我认为需要使用 babelify - 我使用了 reactify。查找 gulp.js 但即便如此它也不起作用

【解决方案3】：

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

【讨论】：