Issue when I want dockerize my nextjs project

Question

I encountering an issue to dockerize my nextjs (it's a library to SSR ReactJS) project. When I tried to docker-compose up my application, it fails on step 6/8. Apparently, my flowtype plugin plugin-transform-flow-strip-types isn't manage by the build process. That plugin was added to my package.json and on my .babelrc file. However, everything was fine when I use node start to launch my project or node build to build my project with nextjs. The problem is linked to docker.

Here my 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" ]

Here my docker-compose.yml 👇

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

Here my .babelrc file 👇

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

Here the cli output when I run docker-compose 👇

{ 
   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'
}

Here my 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"
  }
}

Do you have any idea to fix the problem?

Thanks!

Answer 1

It looks like you're depending on the wrong package, you're depending on the babel 6.x version of plugin-transform-flow-strip-types , whereas in code, you're requiring the babel 7.x version.

Run the following command to depend on babel 7.x version:

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

Lastly, remove the old version from your dependencies with:

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