当我想要 dockerize 我的 nextjs 项目时出现问题答案

【问题标题】：Issue when I want dockerize my nextjs project当我想要 dockerize 我的 nextjs 项目时出现问题
【发布时间】：2018-11-13 10:03:39
【问题描述】：

我遇到了将我的 nextjs（它是 SSR ReactJS 的库）项目 dockerize 的问题。当我尝试 docker-compose up 我的应用程序时，它在第 6/8 步失败。显然，我的 flowtype 插件 plugin-transform-flow-strip-types 不是由构建过程管理的。该插件已添加到我的 package.json 和我的 .babelrc 文件中。但是，当我使用 node start 启动我的项目或 node build 使用 nextjs 构建我的项目时，一切都很好。问题与docker有关。

这是我的 Dockerfile ????

FROM node:10.13.0
RUN mkdir -p /website
COPY . /website
WORKDIR /website
RUN yarn install --production=true
RUN yarn run build
EXPOSE 3000 9229
CMD [ "yarn", "run", "start" ]

这里是我的 docker-compose.yml ????

version: "3"
services:
    app:
        container_name: website
        build: .
        ports:
            - "3000:3000"
            - "9229:9229"

这是我的 .babelrc 文件？？？？

{
    "presets": [
      "next/babel"
    ],
    "plugins": [
      "@babel/plugin-transform-flow-strip-types"
    ]
}

这里是我运行 docker-compose 时的 cli 输出？？？？

{ 
   Error: (client) ./pages/index.jsx
   Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
   Error: Cannot find module '@babel/plugin-transform-flow-strip-types' from '/website'
}

这是我的 package.json ????

{
  "name": "XXXXXXXX",
  "description": "XXXXXXXX",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "XXXXXXXXXXXXXXXX.git"
  },
  "scripts": {
    "dev": "next -p 3000",
    "build": "next build",
    "start": "next start  -p 3000",
    "lint": "eslint . --ext .js --ext .jsx",
    "lint-fix": "eslint . --ext .js --ext .jsx --fix",
    "test": "jest --notify",
    "flow": "flow"
  },
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-apollo": "^2.2.4",
    "apollo-boost": "^0.1.20",
    "graphql": "^14.0.2"
  },
  "devDependencies": {
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.11.0",
    "flow-bin": "^0.85.0",
    "jest": "^23.6.0"
  }
}

您有解决问题的想法吗？

谢谢！

【问题讨论】：

您可以添加目录结构的屏幕截图以查看您正在使用的目录层次结构吗？
你能分享你的package.json 文件吗？当你正在运行RUN yarn install --production=true 我怀疑@babel/plugin-transform-flow-strip-types 是在devDependencies 中声明的。
@PranayTripathi 感谢您的回答，这里是我的目录层次结构：joxi.ru/ZrJlPPoi9dWL82
如果@babel/plugin-transform-flow-strip-types 在devDependencies 中声明，您可以尝试将其添加到dependencies 以查看它是否可以解决问题？理想情况下，您不应该这样做，但希望这应该安装 required 依赖项。
@JonGiamp 你也可以添加你的 package.json 吗？

标签： javascript reactjs docker docker-compose next.js

【解决方案1】：

看起来你依赖于错误的包，你依赖于 plugin-transform-flow-strip-types 的 babel 6.x 版本，而在代码中，你需要 babel 7.x 版本。

运行以下命令依赖 babel 7.x 版本：

npm install --save-dev @babel/plugin-transform-flow-strip-types

最后，使用以下命令从依赖项中删除旧版本：

npm uninstall babel-plugin-transform-flow-strip-types

【讨论】：

非常感谢，这是解决我问题的好方法！