Polaris Components Not Displaying Using Remix

Topic summary

A developer is experiencing rendering issues with Shopify Polaris components (specifically DropZone and Modal) when adding them to a modified Remix template project.

Key Problems:

  • Modal component: Completely fails to display and triggers a browser warning about preloaded resources not being used within a few seconds of the window’s load event
  • DropZone component: Present in the DOM but hidden; unhiding it doesn’t restore functionality—buttons for opening files or drag-and-drop interactions remain non-functional

Technical Context:

  • Using Node.js v18.19.0 on Ubuntu 22.04
  • Dependencies include @shopify/polaris ^12.0.0, @shopify/polaris-icons ^7.0.0, and various Remix/Shopify packages
  • Components not originally included in the template fail to work when added

The issue appears isolated to Polaris components that weren’t part of the original template. The developer is willing to provide code samples if needed. Status: Unresolved - seeking troubleshooting assistance.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.

I have an issue where, if I take the Remix template project and start modifying it, Polaris components that aren’t used in the template don’t show up. I’m trying to use the DropZone and Modal components, but the DropZone is hidden, and the Modal just doesn’t show at all. For the Modal I get the following warning in browser:

“The resource was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.”

The DropZone is in the DOM, but is hidden. Unhiding it doesn’t make it work - I can’t click a button to open a file, or drag/drop one onto the zone. I can give code samples if needed, but it’s really just taken from the template with the components I wanted to use added.

Version info:

Ubuntu 22.04
Node.js v18.19.0

@prisma/client”: “^4.13.0”,
@remix-run/dev”: “^2.0.0”,
@remix-run/node”: “^2.0.0”,
@remix-run/react”: “^2.0.0”,
@remix-run/serve”: “^2.0.0”,
@shopify/app”: “^3.50.0”,
@shopify/cli”: “^3.50.0”,
@shopify/polaris”: “^12.0.0”,
@shopify/polaris-icons”: “^7.0.0”,
@shopify/shopify-api”: “^8.0.2”,
@shopify/shopify-app-remix”: “^2.1.0”,
@shopify/shopify-app-session-storage-prisma”: “^2.0.0”,