简体   繁体   English

React - 找不到模块:无法解析组件

[英]React - Module not found: Can't resolve component

I'm trying to deploy a React website using Docker, but when I'm building the docker image I get:我正在尝试使用 Docker 部署 React 网站,但是当我构建 docker 图像时,我得到:

Module not found: Error: Can't resolve './components/Home' in '/app/src'

I'm developping the application in a Windows environment but my docker container is hosted on a Linux machine (in Microsoft Azure).我在 Windows 环境中开发应用程序,但我的 docker 容器托管在 Linux 机器上(在 Microsoft Azure 中)。

My files are organised like this:我的文件是这样组织的:

 ├ src/
 | ├── index.js
 | ├── App.js
 | └── components/
 |     └─── Home.js
 ├ public/
 ├ Dockerfile
 ├ package.json
 └ yarn.lock

My dockerfile:我的 dockerfile:

FROM node:18-alpine

WORKDIR /app

COPY package.json /app/package.json
COPY yarn.lock /app/yarn.lock
COPY src /app/src
COPY public /app/public

RUN yarn
RUN yarn run build

RUN yarn global add serve

EXPOSE 3000

CMD ["serve", "-s", "build"]

My App.js looks like:我的App.js看起来像:

import "./App.css";
import React, { lazy } from "react";
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";

const Home = lazy(() => import("./components/Home"));

const App = () => {
  return (
    <Router>
      <Routes>
        <Route exact path="/home" element={<Home />} />
        <Route path="*" element={<Navigate replace to="/home" />} />
      </Routes>
    </Router>
  );
};

export default App;

My Home.js looks like:我的Home.js看起来像:

import React from "react";

const Home = () => {
  return (
    <h1>Home Page</h1>
  );
};

export default Home;

If I run the website localy only using the following terminal commands:如果我仅使用以下终端命令在本地运行网站:

yarn && yarn start

or或者

yarn && yarn run build
serve -s build

I don't run into the error.我没有遇到错误。

If I move my Home.js file oustide the components/ folder (resulting in it being in the same folder as my App.js I don't have the error message and the application runs, that would be an ok solution if my website only used the Home component but I have multiple files with multiple components and I don't want to just dump them in my src/ folder.如果我将我的Home.js文件移出components/文件夹(导致它与我的App.js在同一个文件夹中,我没有错误消息并且应用程序运行,如果我的网站只有使用了Home组件,但我有多个包含多个组件的文件,我不想只将它们转储到我的src/文件夹中。

I already saw a lot of posts with similar errors but the solution is often to just check for caps errors in file path, and I have done that a million times already.我已经看到很多有类似错误的帖子,但解决方案通常是只检查文件路径中的大写错误,我已经做了一百万次了。

Any help would be appreciated at this point...此时任何帮助将不胜感激......

Changing your file structure for both systems would be a viable option as docker needs a lot of clarification on file paths to create an image.更改两个系统的文件结构将是一个可行的选择,因为 docker 需要对文件路径进行大量说明才能创建图像。 here's somewhat the same problem in Linux for a user对于用户来说,Linux 中存在一些相同的问题

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM