Question

我正在尝试使用meteor和Heroku开发一个webapp。当我在本地运行我的代码时一切都很好，但是一旦我在Heroku上部署它，我得到：

无法找到模块＆＃39; ./ navbar / NavBar.js＆＃39;

或者如果我在代码中删除了NavBar：

无法找到模块＆＃39; ./ component / App＆＃39;

我的项目文件夹如下：

project
  client
    main.css
    main.html
    main.js
      component
        App.js
        Games.js
        Home.js
        Workbench.js
        navbar
          NavBar.js

  Server
    main.js

这是我的代码：

main.js

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';

import App from './component/App';

Meteor.startup(() => {
  render(<App />, document.getElementById('root'));

});

App.js

import React from 'react';
import {Container} from 'reactstrap';
import {BrowserRouter as Router, Route} from 'react-router-dom';

import Workbench from './Workbench'
import NavBar from './navbar/NavBar.js'

export default class App extends React.Component {
  render(){
    return(
      <Router>
        <div>
        <NavBar/>
          <Container fluid={true}>
            <Route path='/' component={Workbench}/>
          </Container>
        </div>
      </Router>
    )
  }
}

NavBar.js

import React from 'react';
import {nav} from 'react-bootstrap';

export default class NavBar extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      gameList: [{}],
      gamesVisibility: false
    }
  }
  render() {
    const {gameList, gameVisibility} = this.state;

    return (
      <div className="sidenav">
          <h2 className="sidenav-header"><a href="/">Test project</a></h2>
          <ul>
            <li onClick={() => this.setState({gameVisibility: !gameVisibility})}> <a className="SideNavTitle">Games</a> {this.renderArrow(gameVisibility)} </li>
              {this.renderCollection(gameVisibility, gameList)}
            <li className="SideNavItem"><a>Channel</a></li>
            <li className="SideNavItem"><a>About</a></li>
          </ul>
      </div>
    );
  }

  renderCollection(visibility, collection){
      if (visibility){
          return collection.map((game) => <li id = 'test' className="SideNavSubItem"><a>{game.name}</a></li>)
      }
      else{
        return;
      }
  }

  renderArrow(visibility){
    if (visibility){
      return <i className="fa fa-arrow-down" aria-hidden="true" style={{color: 'white'}}/>
    }
    else{
      return <i className="fa fa-arrow-right" aria-hidden="true" style={{color: 'white'}}/>
    }
  }

}

我使用heroku run bash和cat NavBar.js确认我的文件位于this帖子中建议的heroku上。由于代码完全在本地工作，它有点奇怪

编辑：Heroku上的构建成功，当我尝试加载页面时会显示这些错误。

Answer 1

通过一些搜索，我发现在heroku上，我有一个Component文件夹和一个组件文件夹。不知道为什么因为我的流星项目中只有一个文件夹组件。使用heroku run bash查找我的问题。

Answer 2

我假设您的项目文件夹包含三个子文件夹（客户端，组件，服务器）。在main.js文件中使用：

import App from '../component/App'

你正在使用单曲＆＃34;。＆＃34;搜索服务器文件夹中的组件文件夹。你需要用双重＆＃34;。＆＃34;
来追溯

Heroku找不到任何模块

2 个答案: