javascript - 使用 Node 和 Webpack 在 Heroku 上托管 -- 未找到模块，无法解析 './Navbar'

Question

编辑:事实证明，Git 不区分大小写，我构建的样板有一个 navbar.js，我将其重命名为 Navbar.js (因为它是一个 React 组件)。在 bash 中全局修复它:git config core.ignorecase false(如 here 所示)。

<小时/>

好的，几周前为我编译并运行了同一页面的一个非常简单的版本；然后我只添加了一些非常基本的 CSS 和 React，Heroku 很生气!我终于让它部署一个空白页面或运行我的构建脚本(没有完成)，但我无法让它同时执行这两个操作，也无法实际加载我的两个组件。

Heroku 抛出此错误:

webpack is watching the files…

       Hash: ab702c072913a23f1d64
       Version: webpack 4.16.4
       Time: 4912ms
       Built at: 03/09/2019 4:19:00 AM
                        Asset      Size  Chunks             Chunk Names
           ./public/bundle.js  1.72 MiB    main  [emitted]  main
       ./public/bundle.js.map  1.65 MiB    main  [emitted]  main
       Entrypoint main = ./public/bundle.js ./public/bundle.js.map
       [0] multi @babel/polyfill ./client/index.js 40 bytes {main} [built]
       [./client/app.js] 750 bytes {main} [built]
       [./client/history.js] 565 bytes {main} [built]
       [./client/index.js] 830 bytes {main} [built]
       [./client/routes.js] 3.57 KiB {main} [built]
       [./client/socket.js] 449 bytes {main} [built]
       [./client/store/index.js] 927 bytes {main} [built]
       [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {main} [built]
       [./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
       [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {main} [built]
       [1] ws (ignored) 15 bytes {main} [optional] [built]
           + 491 hidden modules

       ERROR in ./client/components/index.js
       Module not found: Error: Can't resolve './Navbar' in '/tmp/build_b232611899d2d986bee399a971bd84b4/client/components'
       @ ./client/components/index.js 21:37-56
       @ ./client/app.js
       @ ./client/index.js
       @ multi @babel/polyfill ./client/index.js

client/components/index.js 仅包含:

export {default as Landing} from './Landing'
export {default as Navbar} from './Navbar'

client/app.js 也很简单:

import React from 'react'
import {Navbar, Landing} from './components'
import Routes from './routes'

const App = () => {
  return (
    <div>
      <Navbar />
      <Landing />
      <Routes />
    </div>
  )
}

export default App

client/index.js 甚至不直接触及它无法解析的导航栏:

import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {Router} from 'react-router-dom'
import history from './history'
import store from './store'
import App from './app'

import './socket'

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('app')
)

Navbar.js 似乎也很相关:

import React from 'react'
import {connect} from 'react-redux'

const Navbar = () => (
  <nav id="navbar">
    <p>MY FULL NAME</p>
  </nav>
)

export default connect(Navbar)

还有什么用处？相关的package.json脚本？

"start": "NODE_ENV='development' npm run start-server",
"build-client-watch": "webpack -w",
"start-server": "nodemon server -e html,js,scss --ignore public --ignore client",
"postinstall": "NODE_ENV='development' npm run build-client-watch"

我已经没有想法了。任何事物？非常感谢!

Answer 1

您对 app.js 中“./Navbar”目录路径的调用可能是错误的。发生此问题的原因是目录本身不匹配。只需将您的整个目录路径粘贴到此处即可准确找到解决方案吗？