27

I am trying to build a docker image of a Next.js/React application which uses Typescript.

Typescript is installed, and I am able to run a build locally without docker.

However, as the docker image is building, I get to the following point:

Step 8/10 : RUN npm run build
 ---> Running in ee577c719739

> project@0.0.5 build /app
> next build

Creating an optimized production build...
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
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:
https://nextjs.org/telemetry

It looks like you're trying to use TypeScript but do not have the required package(s) installed.

Please install typescript by running:

        npm install --save-dev typescript

If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files).

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project@0.0.5 build: `next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the project@0.0.5 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I have installed Typescript already. This is very confusing for me.

The Docker image I am using looks like this:

FROM gcr.io/companyX/companyX-node-base:12-alpine

# Copy in the project files
COPY . .

# Clean
USER root
RUN rm -fr node_modules

ENV NODE_ENV=production

COPY package*.json ./

RUN npm install && \
    npm cache clean --force

RUN npm run build

EXPOSE 3000

# Running the app
CMD [ "npm", "start" ]
BURGERFLIPPER101
  • 1,231
  • 4
  • 24
  • 41
  • 1
    it's mentionned in your package.json file ? – Rebai Ahmed Jan 10 '20 at 14:07
  • 1
    I kept trying npm install typescript --save, which I assumed would have added it to my normal dependencies but I was wrong and it was only on dev dependencies. So thank you bro. Added it manually to the normal dependencies and it ran. :) – BURGERFLIPPER101 Jan 10 '20 at 14:53
  • @RebaiAhmed in my case it is, yes. But I still got that error message. See https://stackoverflow.com/questions/65831617/unable-to-start-react-with-typescript-in-docker-container – winklerrr Jan 21 '21 at 16:44

4 Answers4

19

When you run (even outside Docker)

export NODE_ENV=production
npm install

it only installs the dependencies from your package.json and not the devDependencies. On the other hand, you probably need the devDependencies to get tools like typescript.

The good solution here is to use a multi-stage build. The first stage installs all of the dependencies; the second stage copies out only what’s needed to run the application.

FROM gcr.io/companyX/companyX-node-base:12-alpine AS build

# Copy in only the parts needed to install dependencies
# (This avoids rebuilds if the package.json hasn’t changed)
COPY package.json package.lock .

# Install dependencies (including dev dependencies)
RUN npm install

# Copy in the rest of the project
# (include node_modules in a .dockerignore file)
COPY . .

# Build the project
RUN npm run build

# Second stage: runtime
FROM gcr.io/companyX/companyX-node-base:12-alpine

ENV NODE_ENV=production

# Again get dependencies, but this time only install
# runtime dependencies
COPY package.json package.lock .
RUN npm install

# Get the built application from the first stage
COPY --from=build /app/dist dist

# Set runtime metadata
EXPOSE 3000
CMD [ "npm", "start" ]
# CMD ["node", "dist/index.js"]

Note that this approach isn’t compatible with setups that overwrite the application content with arbitrary content from the host, or that try to store libraries in Docker volumes. The final image is self-contained and doesn’t require any host content, and can be run as-is on other systems without separately copying the source code.

David Maze
  • 130,717
  • 29
  • 175
  • 215
  • What about hot reloading? When copying over the src files and compiling them, the hot reload feature does not work anymore – winklerrr Jan 21 '21 at 15:02
  • It should still work fine in your host-Node development environment, even if you're using Docker for deployment. – David Maze Jan 21 '21 at 19:30
  • But if you are using the build files to display the web app, then the code changes won't be reflected directly. It would need another build to show the changes. (See my problem here: https://stackoverflow.com/questions/65831617/unable-to-start-react-with-typescript-in-docker-container) – winklerrr Jan 22 '21 at 13:24
4

I got the same error on deploying Next.js app on AWS Amplify and I didn't want to move typescript from devdependencies to dependencies.

My solution was to change the build setting from npm install
to npm install --dev typescript && npm install

There must be same places for build settings in docker.

This will remove the error.

byyoung
  • 327
  • 3
  • 10
0

In production environment it does not install devDependencies. So you can set your NODE_ENV after npm install

FROM gcr.io/companyX/companyX-node-base:12-alpine

# Copy in the project files
COPY . .

# Clean
USER root
RUN rm -fr node_modules

COPY package*.json ./

RUN npm install && \
    npm cache clean --force

ENV NODE_ENV=production

RUN npm run build

EXPOSE 3000

# Running the app
CMD [ "npm", "start" ]
CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182
-3

Credit to @Ahmed Rebai

Had to add typescript manually to dependencies in Package.json file. Normal npm install would only add it to dev.

BURGERFLIPPER101
  • 1,231
  • 4
  • 24
  • 41
  • This doesn't work for me. I still got the same error message. See https://stackoverflow.com/questions/65831617/unable-to-start-react-with-typescript-in-docker-container – winklerrr Jan 21 '21 at 16:43
  • 3
    Typescript should only be in `devDependencies`. Adding it to `dependencies` implies that you are using typescript in production, which you are not (at least, should not). Typescript compiles your code, and **then** you run the outputted JavaScript code in production. – advaiyalad Feb 15 '21 at 22:06