Issue when I want dockerize my nextjs project
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!
javascript reactjs docker docker-compose next.js
edited Nov 14 '18 at 12:16
steadweb
5,20511223
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
|
show 3 more comments
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!
javascript reactjs docker docker-compose next.js
edited Nov 14 '18 at 12:16
steadweb
5,20511223
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
1
can you add screenshot of your directory structure to have a look at the directory hierarchy you are using ?
– Pranay Tripathi
Nov 13 '18 at 10:10
2
Can you share yourpackage.jsonfile - as you're runningRUN yarn install --production=trueI suspect the@babel/plugin-transform-flow-strip-typesis declared withindevDependencies.
– steadweb
Nov 13 '18 at 10:28
@PranayTripathi Thanks for you answer, here my directory hierarchy: joxi.ru/ZrJlPPoi9dWL82
– JonGiamp
Nov 13 '18 at 13:44
1
If@babel/plugin-transform-flow-strip-typesis declared withindevDependenciescan you try adding it todependenciesto see if it resolves the issue? Ideally you shouldn't do this, but hopefully this should hopefully install the required dependency.
– steadweb
Nov 13 '18 at 14:12
1
@JonGiamp can you add you package.json as well ?
– Pranay Tripathi
Nov 14 '18 at 11:31
|
show 3 more comments
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!
javascript reactjs docker docker-compose next.js
edited Nov 14 '18 at 12:16
steadweb
5,20511223
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
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!
javascript reactjs docker docker-compose next.js
javascript reactjs docker docker-compose next.js
edited Nov 14 '18 at 12:16
steadweb
5,20511223
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
edited Nov 14 '18 at 12:16
steadweb
5,20511223
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
edited Nov 14 '18 at 12:16
steadweb
5,20511223
edited Nov 14 '18 at 12:16
steadweb
5,20511223
edited Nov 14 '18 at 12:16
steadweb
5,20511223
5,20511223
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
asked Nov 13 '18 at 10:03
JonGiampJonGiamp
559
559
1
can you add screenshot of your directory structure to have a look at the directory hierarchy you are using ?
– Pranay Tripathi
Nov 13 '18 at 10:10
2
Can you share yourpackage.jsonfile - as you're runningRUN yarn install --production=trueI suspect the@babel/plugin-transform-flow-strip-typesis declared withindevDependencies.
– steadweb
Nov 13 '18 at 10:28
@PranayTripathi Thanks for you answer, here my directory hierarchy: joxi.ru/ZrJlPPoi9dWL82
– JonGiamp
Nov 13 '18 at 13:44
1
If@babel/plugin-transform-flow-strip-typesis declared withindevDependenciescan you try adding it todependenciesto see if it resolves the issue? Ideally you shouldn't do this, but hopefully this should hopefully install the required dependency.
– steadweb
Nov 13 '18 at 14:12
1
@JonGiamp can you add you package.json as well ?
– Pranay Tripathi
Nov 14 '18 at 11:31
|
show 3 more comments
1
can you add screenshot of your directory structure to have a look at the directory hierarchy you are using ?
– Pranay Tripathi
Nov 13 '18 at 10:10
2
Can you share yourpackage.jsonfile - as you're runningRUN yarn install --production=trueI suspect the@babel/plugin-transform-flow-strip-typesis declared withindevDependencies.
– steadweb
Nov 13 '18 at 10:28
@PranayTripathi Thanks for you answer, here my directory hierarchy: joxi.ru/ZrJlPPoi9dWL82
– JonGiamp
Nov 13 '18 at 13:44
1
If@babel/plugin-transform-flow-strip-typesis declared withindevDependenciescan you try adding it todependenciesto see if it resolves the issue? Ideally you shouldn't do this, but hopefully this should hopefully install the required dependency.
– steadweb
Nov 13 '18 at 14:12
1
@JonGiamp can you add you package.json as well ?
– Pranay Tripathi
Nov 14 '18 at 11:31
1
1
can you add screenshot of your directory structure to have a look at the directory hierarchy you are using ?
– Pranay Tripathi
Nov 13 '18 at 10:10
can you add screenshot of your directory structure to have a look at the directory hierarchy you are using ?
– Pranay Tripathi
Nov 13 '18 at 10:10
2
2
Can you share your
package.json file - as you're running RUN yarn install --production=true I suspect the @babel/plugin-transform-flow-strip-types is declared within devDependencies.– steadweb
Nov 13 '18 at 10:28
Can you share your
package.json file - as you're running RUN yarn install --production=true I suspect the @babel/plugin-transform-flow-strip-types is declared within devDependencies.– steadweb
Nov 13 '18 at 10:28
@PranayTripathi Thanks for you answer, here my directory hierarchy: joxi.ru/ZrJlPPoi9dWL82
– JonGiamp
Nov 13 '18 at 13:44
@PranayTripathi Thanks for you answer, here my directory hierarchy: joxi.ru/ZrJlPPoi9dWL82
– JonGiamp
Nov 13 '18 at 13:44
1
1
If
@babel/plugin-transform-flow-strip-types is declared within devDependencies can you try adding it to dependencies to see if it resolves the issue? Ideally you shouldn't do this, but hopefully this should hopefully install the required dependency.– steadweb
Nov 13 '18 at 14:12
If
@babel/plugin-transform-flow-strip-types is declared within devDependencies can you try adding it to dependencies to see if it resolves the issue? Ideally you shouldn't do this, but hopefully this should hopefully install the required dependency.– steadweb
Nov 13 '18 at 14:12
1
1
@JonGiamp can you add you package.json as well ?
– Pranay Tripathi
Nov 14 '18 at 11:31
@JonGiamp can you add you package.json as well ?
– Pranay Tripathi
Nov 14 '18 at 11:31
|
show 3 more comments
1 Answer
1
active
oldest
votes
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
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
Thanks you very much, is the great solution for my problem!
– JonGiamp
Nov 15 '18 at 17:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278443%2fissue-when-i-want-dockerize-my-nextjs-project%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
Thanks you very much, is the great solution for my problem!
– JonGiamp
Nov 15 '18 at 17:00
add a comment |
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
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
Thanks you very much, is the great solution for my problem!
– JonGiamp
Nov 15 '18 at 17:00
add a comment |
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
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
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
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
answered Nov 14 '18 at 12:20
steadwebsteadweb
5,20511223
5,20511223
Thanks you very much, is the great solution for my problem!
– JonGiamp
Nov 15 '18 at 17:00
add a comment |
Thanks you very much, is the great solution for my problem!
– JonGiamp
Nov 15 '18 at 17:00
Thanks you very much, is the great solution for my problem!
– JonGiamp
Nov 15 '18 at 17:00
Thanks you very much, is the great solution for my problem!
– JonGiamp
Nov 15 '18 at 17:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278443%2fissue-when-i-want-dockerize-my-nextjs-project%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
can you add screenshot of your directory structure to have a look at the directory hierarchy you are using ?
– Pranay Tripathi
Nov 13 '18 at 10:10
2
Can you share your
package.jsonfile - as you're runningRUN yarn install --production=trueI suspect the@babel/plugin-transform-flow-strip-typesis declared withindevDependencies.– steadweb
Nov 13 '18 at 10:28
@PranayTripathi Thanks for you answer, here my directory hierarchy: joxi.ru/ZrJlPPoi9dWL82
– JonGiamp
Nov 13 '18 at 13:44
1
If
@babel/plugin-transform-flow-strip-typesis declared withindevDependenciescan you try adding it todependenciesto see if it resolves the issue? Ideally you shouldn't do this, but hopefully this should hopefully install the required dependency.– steadweb
Nov 13 '18 at 14:12
1
@JonGiamp can you add you package.json as well ?
– Pranay Tripathi
Nov 14 '18 at 11:31