• 前端项目打包成docker镜像报错:Module not found: Can't resolve '@/app/components/admin/AdminApp'


    关注 码龄 粉丝数 原力等级 -- 被采纳 被点赞 采纳率 Chanrian7 2024-04-06 18:13 采纳率: 95.4% 浏览 25 首页/ 前端 / 前端项目打包成docker镜像报错:Module not found: Can't resolve '@/app/components/admin/AdminApp' npm前端docker 将前端项目打包成docker镜像,docker安装在云服务器上。运行docker build命令报错:ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1Module not found: Can't resolve '@/app/components/admin/AdminApp' 项目中有Dockerfile,内容如下: #使用Node.js20Alpine作为基础镜像 FROM node:20-alpine as build ENV NEXT_PUBLIC_API_HOST_URL="" #设置工作目录 WORKDIR /app #复制package.json和package-lock.json到容器中 COPY package*.json ./ #安装依赖 RUN npm install #将应用程序代码复制到容器中 COPY . . #构建TypeScript代码 RUN npm run build #使用多阶段构建 FROM node:20-alpine WORKDIR /app #从构建阶段复制构建的产物 COPY --from=build /app ./ #暴露3001端口 EXPOSE 3000 #启动应用程序 CMD["npm","start"] 在Dockerfile同级目录下运行命令:docker build -t chen/chatgpt-web-app:1.7 . 出现报错:ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1Module not found: Can't resolve '@/app/components/admin/AdminApp' 具体如下: => ERROR [build 6/6] RUN npm run build 8.3s ------ > [build 6/6] RUN npm run build: 0.584 0.584 > chatgpt-web@0.1.0 build 0.584 > next build 0.584 1.391 Attention: Next.js now collects completely anonymous telemetry regarding usage. 1.392 This information is used to shape Next.js' roadmap and prioritize features. 1.392 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: 1.392 https://nextjs.org/telemetry 1.392 1.536 ▲ Next.js 14.1.3 1.540 1.702 Creating an optimized production build ... 8.179 Failed to compile. 8.179 8.179 ./src/app/page.tsx 8.179 Module not found: Can't resolve '@/app/components/admin/AdminApp' 8.179 8.179 https://nextjs.org/docs/messages/module-not-found 8.179 8.181 8.181 > Build failed because of webpack errors ------ Dockerfile:19 -------------------- 17 | 18 | #构建TypeScript代码 19 | >>> RUN npm run build 20 | 21 | #使用多阶段构建 -------------------- ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1 但是项目的page.tsx确实配置了正确的@/app/components/admin/AdminApp路径: import { NextPage } from 'next'; import dynamic from 'next/dynamic'; const AdminApp = dynamic(() => import('@/app/components/admin/AdminApp'), { ssr: false, }); const Admin: NextPage = () => ; export default Admin; 为什么还会报错呢?该怎么解决呢? 展开全部 收起 写回答 好问题 0 提建议 追加酬金 关注问题 微信扫一扫 点击复制链接 分享 邀请回答 编辑 收藏 删除 结题 收藏 举报 追加酬金 (90%的用户在追加酬金后获得了解决方案) 当前问题酬金 ¥ 0 (可追加 ¥500) ¥ 15¥ 20¥ 50¥ 100¥ 200 支付方式 扫码支付 二维码出错 点击刷新 支付金额 15 元 提供问题酬金的用户不参与问题酬金结算和分配 支付即为同意 《付费问题酬金结算规则》 结题 再想想 删除 再等等

    3条回答 默认 最新

    • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-06 18:13
      关注

      引自免费微信小程序:皆我百晓生

      好的,我很乐意为你解答这个问题。首先,我们需要解决Module not found: Can't resolve '@/app/components/admin/AdminApp'这个错误。

      我们可以在Dockerfile内,通过修改dockerfile文件中的RUN npm run build这一行来解决这个问题。

      修改后的dockerfile内容如下:

      #使用Node.js20Alpine作为基础镜像
      FROM node:20-alpine as build
      
      ENV NEXT_PUBLIC_API_HOST_URL=""
      
      #设置工作目录
      WORKDIR /app
      
      #复制package.json和package-lock.json到容器中
      COPY package*.json ./
      
      #安装依赖
      RUN npm install
      
      #将应用程序代码复制到容器中
      COPY . .
      
      #构建TypeScript代码
      RUN npm run build
      
      #使用多阶段构建
      FROM node:20-alpine
      WORKDIR /app
      
      #从构建阶段复制构建的产物
      COPY --from=build /app ./
      
      #暴露3001端口
      EXPOSE 3000
      
      #启动应用程序
      CMD ["npm","start"]
      

      接下来,我们需要解决Package.jsonpackage-lock.json文件无法找到的问题。

      可以尝试在Dockerfile内添加一个检查是否存在这两个文件的脚本,并确保在运行npm run build时这些文件确实存在。

      例如,我们可以使用以下代码检查这两个文件是否存在:

      #!/bin/bash
      
      if [ ! -f "$npm_package_root" ]; then
        echo "Package.json file not found at $npm_package_root"
        exit 1
      fi
      
      if [ ! -f "$npm_package_lock_file" ]; then
        echo "Package.lock file not found at $npm_package_lock_file"
        exit 1
      fi
      

      然后,当我们运行npm run build时,上述脚本会检查这两个文件是否存在。如果它们不存在,我们会显示错误消息并退出程序。

      如果你需要我在其他位置提供解决方案,我会非常乐意帮你在那里。

      展开全部

      评论 编辑记录
    • Kwan的解忧杂货铺 Java领域优质创作者 2024-04-06 18:13
      关注

      晚上好🌙🌙🌙
      本答案参考ChatGPT-3.5

      问题描述:

      将前端项目打包成docker镜像,docker安装在云服务器上。运行docker build命令报错:ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1 Module not found: Can't resolve '@/app/components/admin/AdminApp'。

      错误提示显示是module not found。

      解决方案:

      1.检查前端项目代码是否有问题,查看 page.tsx 文件是否正确引用了 '@/app/components/admin/AdminApp'路径。

      2.如果代码没有问题,修改 Dockerfile 文件中的 WORKDIR /app 这句话为:

      WORKDIR /usr/src/chatgpt-web。

      3.修改Dockerfile中的COPY . . /app为:

      COPY . /usr/src/chatgpt-web。

      4.修改 Dockerfile 中的 CMD ["npm", "start"] 语句为CMD ["npm", "run", "start"]

      5.根据现有的node版本找到下面的版本:

      FROM node:14.16.0-alpine

      6.最后的Dockerfile文件内容如下:

      使用Node14.16.0 Alpine做为基础镜像

      FROM node:14.16.0-alpine ENV NODE_ENV=production WORKDIR /usr/src/chatgpt-web COPY package*.json ./ RUN npm install COPY . /usr/src/chatgpt-web/ RUN npm run build EXPOSE 3001 CMD ["npm", "run", "start"]

      7.重新执行启动docker容器命令:

      docker build -t chen/chatgpt-web-app .

      重新运行后,如果没有报错,则可以在本地启动容器,运行:

      docker run -p 3001:3001 chen/chatgpt-web-app:latest
      

      此时再访问 http://localhost:3001 看是否能够正常访问前端页面,如果可以说明问题已经解决。

      参考链接:

      Docker打包Vue项目报错:Module not found: Can’t resolve ‘@/components/Home'(以Vue-cli 3.0为例)

      [Module not found: Can't resolve '@/components/{componentName}' in 'D:\xxxxx\src\pages'] (https://github.com/vercel/next.js/discussions/10922)

      展开全部

      评论 编辑记录
    • IT工程师_二师兄 2024-04-07 13:52
      关注

      这个要看你的项目说明的呀

      评论
    编辑
    预览

    报告相同问题?

  • 相关阅读:
    MySQL——全文检索
    使用SSM为学校医务室开发一套管理系统
    【Python学习】Day-032 Day-033 xpath;xml数据格式、多线程、线程池、常用命令
    R语言——taxize(第一部分)
    2024国际生物发酵展畅想未来-势拓伺服科技
    Chrome浏览器怎么清理单个页面缓存,简单实用
    小米手机线下营销方案设计(毕业作品+任务书+设计方案+成果报告书)
    Radius OTP完成堡垒机登录认证 安当加密
    【程序员面试金典】01.05. 一次编辑
    技术管理进阶——什么Leader值得追随?
  • 原文地址:https://ask.csdn.net/questions/8084181