Build docker image fails

[oxsmose]

When I tried to build the application using docker file I've got this error:

21.82 > shopify-frontend-template-react@1.0.0 build
21.82 > vite build
21.82 
21.92 vite v4.5.3 building for production...
21.94 transforming...
21.98 ✓ 5 modules transformed.
21.98 ✓ built in 59ms
21.98 [vite]: Rollup failed to resolve import "@shopify/polaris" from "/app/frontend/utils/i18nUtils.js".
21.98 This is most likely unintended because it can break your application at runtime.
21.98 If you do want to externalize this module explicitly add it to
21.98 `build.rollupOptions.external`
21.99 error during build:
21.99 Error: [vite]: Rollup failed to resolve import "@shopify/polaris" from "/app/frontend/utils/i18nUtils.js".
21.99 This is most likely unintended because it can break your application at runtime.
21.99 If you do want to externalize this module explicitly add it to
21.99 `build.rollupOptions.external`
21.99     at viteWarn (file:///app/frontend/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:48216:27)
21.99     at onwarn (file:///app/frontend/node_modules/@vitejs/plugin-react/dist/index.mjs:250:9)
21.99     at onRollupWarning (file:///app/frontend/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:48245:9)
21.99     at onwarn (file:///app/frontend/node_modules/vite/dist/node/chunks/dep-41cf5ffd.js:47976:13)
21.99     at file:///app/frontend/node_modules/rollup/dist/es/shared/node-entry.js:24276:13
21.99     at Object.logger [as onLog] (file:///app/frontend/node_modules/rollup/dist/es/shared/node-entry.js:25950:9)
21.99     at ModuleLoader.handleInvalidResolvedId (file:///app/frontend/node_modules/rollup/dist/es/shared/node-entry.js:24862:26)
21.99     at file:///app/frontend/node_modules/rollup/dist/es/shared/node-entry.js:24822:26
------
Dockerfile:9
--------------------
   7 |     COPY web .
   8 |     RUN npm install
   9 | >>> RUN cd frontend && npm install && npm run build
  10 |     CMD ["npm", "run", "serve"]
  11 | 

• @shopify/shopify-app-express version:
• Node version: v22.2.0
• Operating system: MacOs

My docker file:

FROM node:18-alpine

ARG SHOPIFY_API_KEY
ENV SHOPIFY_API_KEY=$SHOPIFY_API_KEY
EXPOSE 8081
WORKDIR /app
COPY web .
RUN npm install
RUN cd frontend && npm install && npm run build
CMD ["npm", "run", "serve"]

[rameardo]

The error you're encountering is related to Vite and Rollup failing to resolve the @shopify/polaris module during the build process. Here are a few steps you can take to troubleshoot and resolve this issue:

1- Check Dependency Installation: Ensure that @shopify/polaris is correctly listed in your package.json dependencies and is installed. You can do this by running:

in path web/frontend

npm install @shopify/polaris

2- Import Path: Verify that the import path in i18nUtils.js is correct. It should look something like this:

import {
  DEFAULT_LOCALE as DEFAULT_POLARIS_LOCALE,
  SUPPORTED_LOCALES as SUPPORTED_POLARIS_LOCALES,
} from "@shopify/polaris";

3- Externalize the Module: If you want to externalize the module as suggested by the error message, you can modify your Vite configuration. Add @shopify/polaris to the build.rollupOptions.external in your vite.config.js:

in your web/frontend/vite.config.js

// vite.config.js
export default {
  // ...
  build: {
    rollupOptions: {
      external: ['@shopify/polaris']
    }
  }
  // ...
};

By following these steps, you should be able to resolve the issue with the Vite build process in your Docker environment.

[lizkenyon]

Hi there 👋

I was not able to reproduce this on my side. Could you provide a minimal repository for reproduction if you would like me to investigate further?

[oxsmose]

Thanks for your feedback. It helped me to solve the issue by adding the missing modules (some others are impacted) in package.json under web/ folder. then npm run do the job. My container is now working as expected.