Search code examples
reactjsdockerdockerfileparceljs

Parcel build failing with dockerfile on @parcel/resolver-default: Cannot load file


First here is my package.json (trimmed) :

{
  "name": "polk-auction-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    [...]
  },
  "scripts": {
    "start": "cross-env NODE_ENV=local parcel ./src/index.html -p 3000",
    "start:prod": "cross-env NODE_ENV=prod parcel ./src/index.html -p 3000",
    "test": "jest",
    "build:prod": "cross-env NODE_ENV=prod parcel build ./src/index.html"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    [...]
  },
  "jest": {    
    [...]
  }
}

The dockerfile :

# Build step
FROM node:14 as build
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . ./
RUN yarn build:prod

# Run step
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

And finally the .dockerignore :

node_modules
dist
.parcel-cache
.env.local
.gitignore
README.md

When building a react app with parcel locally using

yarn build:prod

It indeed build properly.

But when I run the following command :

docker build -t polk-auction-ui .

it fails on [build 6/6] with the following error (trimmed the warning) :

#12 4.440 @parcel/core: Failed to resolve '../common/ToolTip' from
#12 4.440 './src/components/crowdloan/CrowdloanTable.tsx'
#12 4.440
#12 4.440   /app/src/components/crowdloan/CrowdloanTable.tsx:26:11
#12 4.440     25 |           <th>Lease Periods</th>
#12 4.440   > 26 |           <th>Raised</th>
#12 4.440   >    |           ^
#12 4.440     27 |           <th />
#12 4.440     28 |           <th />
#12 4.440
#12 4.441 @parcel/resolver-default: Cannot load file '../common/ToolTip' in
#12 4.441 './src/components/crowdloan'.
#12 4.441 💡 Did you mean '../common/Tooltip'?
#12 4.442 💡 Did you mean '../common/Common'?

Which is weird because CrowdloanTable.tsx does have the following import : import { Tooltip } from '../common/ToolTip';

Plus it works locally, so why would it fail using docker build ? Any suggestion and help is welcome.


Solution

  • In your last log the 4 last lines it suggests that instead of importing '../common/ToolTip' you import '../common/Tooltip'. Where "tip" has a small letter t.

    What happens if you change the import statement to the one with the small letter t and try to build it in Docker?