Node + Remix + Vite + App Bridge: Constant Errors, Sandbox Issues, No Progress After Days

Partner Discussions
1

Hi everyone, I’ve been trying to build a Shopify app using the official Node + Remix + Vite stack (shopify app create node) and after 4 days I’m honestly stuck.

Stack: Shopify CLI: 3.81.2 Node.js backend Remix + Vite frontend @shopify/app-bridge-react for embedding

Main issues I keep running into:

1 Named exports error: javascript Named export ‘Provider’ not found. The requested module ‘shopify/app-bridge-react’ is a CommonJS module.

Even using this import: javascript Copiar Editar import pkg from ‘@shopify/app-bridge-react’; const { Provider } = pkg; Later, I get similar errors for other components like NavMenu.

2- Random ports every time I run shopify app dev: It assigns a new port each restart (3000, 57491, etc), which messes up redirect URLs and iframes.

3-- Sandbox error in iframe console: swift Copiar Editar Blocked script execution because the document’s frame is sandboxed and the ‘allow-scripts’ permission is not set. I read that it’s harmless, but my app just stays blank.

4-- WebSocket errors: sql Copiar Editar WebSocket closed without opened. And Vite dev server issues.

5 OAuth redirect: I made sure to redirect with host and shop query params after auth, but it doesn’t seem to fix the blank screen.

What I already tried:
Reinstalling node_modules.
Removing Remix and leaving only a minimal index route.
Rewriting root.jsx with the official Provider example.
Switching import styles (CommonJS/ESM).
Checking whitelisted URLs in Partners Dashboard .
Trying different forceRedirect settings.
Changing ports manually (not supported by the CLI).

My main question. Ive seen others report similar problems combining Remix, Vite, and App Bridge.

Would you recommend dropping Remix/Vite altogether and going with a simpler setup like Node + Koa + React without Remix? Or is there any known stable example repo with this stack fully working? Any advice or experience would be really appreciated, I’m losing days without progress and just want a reliable baseline to build from.

Thanks so much!

2

Hey what OS are you on?

3

I’d use the shopify app remix template, and following the guide should just work out of the box: Shopify App package for Remix (GitHub - Shopify/shopify-app-template-remix).

As @jeff mentions, it’d be useful to know what OS and Node version you’re using :slight_smile:

4

Hi Jeff, Hi, thanks for replying.

I’m on Windows 11, Node.js v20.19.3 (LTS).
I did try Node 22 before on another project, but for this Shopify app I’m only using Node 20 to avoid compatibility issues.

5

Hi Bkspace, thanks for replying.

I’m on Windows 11, Node.js v20.19.3 (LTS).
I did try Node 22 before on another project, but for this Shopify app I’m only using Node 20 to avoid compatibility issues. Im actually already using the official Shopify Remix app template (shopify app create node) and following the quick start guide exactly.

Despite that, I’m still seeing:

The named exports errors with @shopify/app-bridge-react (Provider, NavMenu)

The random port assignment every restart

Sandbox and WebSocket errors

Blank screen after OAuth redirect even when shop and host are in the URL

If you have any ideas or have seen this before, I’d really appreciate any help.

Thanks again!

6
  1. It looks like you are trying to import Provider from “@shopify/app-bridge-react” which is not available in the app bridge react package. You don’t need to use Provider from app bridge anymore you can directly use NavMenu as shown here in the official remix app template here
  2. I think you can define fixed port in theshopify.web.toml file as mentioned in the docs
2 Likes
7

Hi there :waving_hand:

Could you clarify which app template you are using? And how you created it?
e.g

shopify app init
> >  Build a Remix app (recommended)

Or did you clone the repo directly?

As others have suggested the Shopify Remix template itself should work as an example repo that is working out of the box. ( I just checked this now, and it worked for me!) If you have modified the starting code, could you provide examples of your modifications?

Another helpful step in debugging is to turn on debug level logging

//shopify.server.js
shopifyApp(
...
logger: {
    level: LogSeverity.Debug
},
...

For learning about building a Shopify app in Remix I would recommend the following documentation.

  1. Scaffold an app (Sets up a brand new app with the template and CLI)
  2. Build a QR code app tutorial
  3. The shopify-app-remix package documentation
8

Hi Liz, thanks so much for your reply. I created the app using: csharp Copiar Editar shopify app init > Build a Remix app (recommended) I followed the quick start guide without cloning any repo. I haven’t modified the starting code except trying to fix the imports (like Provider from @shopify/app-bridge-react) and adjusting the ports manually because every restart was assigning a random port. I’ll turn on debug level logging as you suggest to see more details. If you have any additional tips for running this stack on Windows 11 with Node 20, I’d appreciate them. Thanks again!