Dockerizing Create-React-App w/ Typescript Breaks

Question

I'm trying to build a Docker image with a simple Create-React-App template and Typescript, but it's failing. Here are the steps that I'm taking:

1. Use CRA's CLI with Typescript default: npx create-react-app my-app --template typescript

2. Creating a Dockerfile with the following settings in order to dockerize the application

   FROM node:10 AS builder

   WORKDIR /app

   COPY. .

   RUN npm install && npm build

3. Creating a .dockerignore file to ignore the node_modules folder.

4. Running docker build -t tag-name. to build the image...

This produces the following error:

    ------
     > [4/4] RUN npm install && npm build:
    #9 6.122 npm notice
    #9 6.122 npm notice New minor version of npm available! 7.0.15 -> 7.1.2
    #9 6.123 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v7.1.2>
    #9 6.123 npm notice Run `npm install -g npm@7.1.2` to update!
    #9 6.124 npm notice
    #9 6.127 npm ERR! code EISDIR
    #9 6.128 npm ERR! syscall copyfile
    #9 6.128 npm ERR! path /app/node_modules/babel-preset-react-app/node_modules/@babel/parser
    #9 6.128 npm ERR! dest /app/node_modules/babel-preset-react-app/node_modules/@babel/.parser-9B4AkUsJ
    #9 6.129 npm ERR! errno -21
    #9 6.131 npm ERR! EISDIR: illegal operation on a directory, copyfile '/app/node_modules/babel-preset-react-app/node_modules/@babel/parser' -> '/app/node_modules/babel-preset-react-app/node_modules/@babel/.p
    arser-9B4AkUsJ'
    #9 6.142
    #9 6.142 npm ERR! A complete log of this run can be found in:
    #9 6.142 npm ERR!     /root/.npm/_logs/2020-12-13T23_41_12_511Z-debug.log
    ------

I've separated the install and build steps, and the install step produces this error:

 > [4/5] RUN npm install:
#7 4.270 npm notice
#7 4.270 npm notice New minor version of npm available! 7.0.15 -> 7.1.2
#7 4.271 npm notice Changelog: <https://github.com/npm/cli/releases/tag/v7.1.2>
#7 4.271 npm notice Run `npm install -g npm@7.1.2` to update!
#7 4.271 npm notice
#7 4.275 npm ERR! code ERESOLVE
#7 4.280 npm ERR! ERESOLVE unable to resolve dependency tree
#7 4.280 npm ERR!
#7 4.280 npm ERR! Found: typescript@4.1.3
#7 4.280 npm ERR! node_modules/typescript
#7 4.280 npm ERR!   typescript@"^4.0.3" from the root project
#7 4.280 npm ERR!
#7 4.280 npm ERR! Could not resolve dependency:
#7 4.280 npm ERR! peerOptional typescript@"^3.2.1" from react-scripts@4.0.1
#7 4.280 npm ERR! node_modules/react-scripts
#7 4.280 npm ERR!   react-scripts@"4.0.1" from the root project
#7 4.281 npm ERR!
#7 4.281 npm ERR! Fix the upstream dependency conflict, or retry
#7 4.281 npm ERR! this command with --force, or --legacy-peer-deps
#7 4.281 npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
#7 4.281 npm ERR!
#7 4.281 npm ERR! See /root/.npm/eresolve-report.txt for a full report.
#7 4.296
#7 4.296 npm ERR! A complete log of this run can be found in:
#7 4.296 npm ERR!     /root/.npm/_logs/2020-12-13T23_44_19_607Z-debug.log
------

This application works in my current environment. What's going on?

Answer 1

I think this looks like an NPM issue when trying to resolve dependencies. Use yarn instead in the meantime.