TypeError: (0 , _schemaUtils.default) is not a function

Question

I have a simple React app created with create-react-app that runs fine on localhost. I'm now trying to Dockerify the app. Here's my package.json:

{
  "name": "yeet",
  "version": "0.1.0",
  "engines": {
    "node": "12.x"
  },
  "scripts": {
    "client": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start": "node server.js",
    "production": "npm run build && npm run start"
  },
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-session": "^1.17.1",
    "mongoose": "^5.10.13",
    "mysql": "^2.18.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "devDependencies": {
    "babel-core": "*",
    "babel-loader": "*",
    "babel-preset-es2015": "*",
    "babel-preset-react": "*",
    "babel-preset-stage-0": "*"
  },
  "babel": {
    "presets": [
      "@babel/env",
      "@babel/react",
      "babel-preset-stage-0"
    ],
    "env": {
      "start": {
        "presets": [
          "@babel/env",
          "@babel/react",
          "babel-preset-stage-0"
        ]
      }
    }
  }
}

And here's my Dockerfile:

# Specify base image
FROM node:12.19.0-alpine3.10

# Specify app location in host
WORKDIR /app

# Copy the dependency list
COPY package.json ./

# Install app dependencies
RUN npm install

# Copy app code to host
COPY . .

# Open specified port
EXPOSE 3000:3000

# Start the app
CMD ["npm", "run", "production"]

I build the image with:

docker build --tag yeet .

Then I run the image as a container with:

docker run --publish 3000:3000 yeet

This throws:

$ docker run --publish 3000:3000 yeet

yeet@0.1.0 production /app npm run build && npm run start

yeet@0.1.0 build /app react-scripts build

/app/node_modules/eslint-webpack-plugin/dist/options.js:62 (0, _schemaUtils.default)(_options.default, options, { ^

TypeError: (0 , _schemaUtils.default) is not a function at getOptions (/app/node_modules/eslint-webpack-plugin/dist/options.js:62:28) at new ESLintWebpackPlugin (/app/node_modules/eslint-webpack-plugin/dist/index.js:30:44) at module.exports (/app/node_modules/react-scripts/config/webpack.config.js:749:7) at Object. (/app/node_modules/react-scripts/scripts/build.js:67:16) at Module._compile (internal/modules/cjs/loader.js:1015:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10) at Module.load (internal/modules/cjs/loader.js:879:32) at Function.Module._load (internal/modules/cjs/loader.js:724:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12) at internal/main/run_main_module.js:17:47 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! yeet@0.1.0 build: react-scripts build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the yeet@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
/root/.npm/_logs/2020-11-07T12_47_03_927Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! yeet@0.1.0 production: npm run build && npm run start npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the yeet@0.1.0 production script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR!
/root/.npm/_logs/2020-11-07T12_47_03_923Z-debug.log

Does anyone see what I'm doing wrong? Any pointers would be super helpful!

Answer 1

I had similar problem.

Try to replace npm commands with yarn in your Dockerfile - it solved my problem.

So your Dockerfile should looks like this:

# Specify base image
FROM node:12.19.0-alpine3.10

# Specify app location in host
WORKDIR /app

# Copy the dependency list
COPY package.json ./

# Install app dependencies
RUN yarn install

# Copy app code to host
COPY . .

# Open specified port
EXPOSE 3000:3000

# Start the app
CMD ["yarn", "run", "start", "production"]

Answer 2

I did have the same problem. I'm not sure about other solutions with removing or downgrading libraries if it runs localy.

To solve here, I ran

docker container prune
docker image prune

to be sure that my docker is clean before starting building.

If no success you can try to delete yarn.lock or package-lock.json.

If it can help others, my files are

.dockerignore

.git
.gitignore
node_modules
build

Dockerfile.dev

FROM node:alpine

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . .

CMD ["yarn", "start"]

docker-compose.dev.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - ".:/app"
      - "/app/node_modules"

Dockerfile.prod

FROM node:alpine as build

WORKDIR /app

COPY package.json /app

RUN yarn install

COPY . /app

RUN yarn run build

FROM nginx:stable-alpine
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/build /usr/share/nginx/html

docker-compose.prod.yml

version: "3.8"
services:
  print:
    stdin_open: true
    build:
      context: .
      dockerfile: Dockerfile.prod
    ports:
      - "80:80"

nginx.conf

server {  
  listen 80;
  server_name frontend;
  location / {
    root /usr/share/nginx/html;
    index index.html;
    try_files $uri /index.html;
  }
}

To run

docker-compose.exe -f .\docker-compose.yml up --build

Answer 3

So there are two ways of fixing this issue:

Downgrading From React 17 and react-scripts 4.0

This is what I did since I didn't want to eject from CRA (for obvious reasons). The issue is due to the styling library that I'm using doesn't play nicely with the updated way that CRA handles Eslint.

It could be other problems but it seems to be coming from react-scripts 4.0

This is mentioned in the changelog for react-scripts 4.0

Ejecting Out of CRA

As mentioned in the comments by @duhaime. You can solve this issue directly while still using React 17 and react-scripts 4.0 by ejecting and then removing the ESLintPlugin or updating the loader to fix the issues with whatever library you're using.

I would personally recommend the former since I'm sure the problem will be fixed sooner rather than later. But both options will get you there.

Answer 4

What solved it for me was

1. Downgrading the dependency "styled-components" and
2. removing dependency "redux-devtools-extension" as well as
3. Deleting the Docker cashed files $ docker builder prune -a