Error "ESM integration proposal for Wasm" is not supported currently

[coreway1]

I'm working on a Shopify app built with the latest version of Shopify and using the Firebase Admin SDK for backend operations. I've encountered an issue where, whenever I change routes within the app, it reloads a new session and redirects to the home page. Additionally, I'm seeing the following error in the console: "ESM integration proposal for Wasm" is not supported currently. Use vite-plugin-wasm or other community plugins to handle this. Alternatively, you can use.wasm?initor.wasm?url. See https://vitejs.dev/guide/features.html#webassembly for more details. at LoadPluginContext.load (file:///home/test/test/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:47494:13) at PluginContainer.load (file:///home/test/test/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:48968:17) at process.processTicksAndRejections (node:internal/process/task_queues:105:5) at async loadAndTransform (file:///home/test/test/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51762:22) at async viteTransformMiddleware (file:///home/test/test/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:61776:24)

Relevant Code Snippet: import firebase from "firebase-admin"; const app = firebase.initializeApp({ credential: firebase.credential.cert(firebaseConfig), }); export default app;

I'm using Vite as the build tool. The error mentions WebAssembly (Wasm) integration, but I'm not directly using any Wasm in my project. This issue causes my app to reload the session on every route change, which is not the expected behavior. Has anyone else experienced this issue with Firebase Admin and Vite, particularly in a Shopify app? Any insights or suggestions would be greatly appreciated!

Vite.config.js => import { vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths";

if ( process.env.HOST && (!process.env.SHOPIFY_APP_URL || process.env.SHOPIFY_APP_URL === process.env.HOST) ) { process.env.SHOPIFY_APP_URL = process.env.HOST; delete process.env.HOST; }

const host = new URL(process.env.SHOPIFY_APP_URL || "http://localhost") .hostname; let hmrConfig;

if (host === "localhost") { hmrConfig = { protocol: "ws", host: "localhost", port: 64999, clientPort: 64999, }; } else { hmrConfig = { protocol: "wss", host: host, port: parseInt(process.env.FRONTEND_PORT) || 8002, clientPort: 443, }; }

export default defineConfig({ server: { port: Number(process.env.PORT || 3000), hmr: hmrConfig, fs: { allow: ["app", "node_modules"], }, }, plugins: [ remix({ ignoredRouteFiles: ["*/."], }), tsconfigPaths(), ], build: { assetsInlineLimit: 0, }, });

package.json => { "name": "shopify app", "private": true, "scripts": { "build": "NODE_ENV=production remix vite:build", "dev": "shopify app dev", "config:link": "shopify app config link", "generate": "shopify app generate", "deploy": "shopify app deploy", "config:use": "shopify app config use", "env": "shopify app env", "start": "remix-serve ./build/server/index.js", "docker-start": "npm run setup && npm run start", "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .", "shopify": "shopify", "graphql-codegen": "graphql-codegen", "vite": "vite" }, "type": "module", "engines": { "node": "^18.20 || ^20.10 || >=21.0.0" }, "dependencies": { "@hello-pangea/dnd": "^16.6.0", "@remix-run/dev": "^2.7.1", "@remix-run/node": "^2.11.1", "@remix-run/react": "^2.7.1", "@remix-run/serve": "^2.7.1", "@shopify/app-bridge-react": "^4.1.2", "@shopify/polaris": "^12.0.0", "@shopify/shopify-app-remix": "^3.0.2", "@shopify/shopify-app-session-storage": "^3.0.4", "axios": "^1.7.2", "emailjs-com": "^3.2.0", "firebase": "^10.13.1", "firebase-admin": "^12.4.0", "isbot": "^5.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", "vite-tsconfig-paths": "^4.3.1" }, "devDependencies": { "@remix-run/eslint-config": "^2.7.1", "@shopify/api-codegen-preset": "^1.0.1", "@types/eslint": "^8.40.0", "@types/node": "^20.6.3", "@types/react": "^18.2.31", "@types/react-dom": "^18.2.14", "eslint": "^8.42.0", "eslint-config-prettier": "^9.1.0", "prettier": "^3.2.4", "typescript": "^5.2.2", "vite": "^5.1.3" }, "workspaces": [ "extensions/*" ], "trustedDependencies": [ "@shopify/plugin-cloudflare" ], "resolutions": { "undici": "6.13.0" }, "overrides": { "undici": "6.13.0" }, "author": "coreway" }

[matteodepalo]

Hi @coreway1, thank you for opening this issue. Just to confirm, does removing the lines below remove the issue?

import firebase from "firebase-admin";
const app = firebase.initializeApp({ credential: firebase.credential.cert(firebaseConfig), });

[coreway1]

Hello @matteodepalo Thank you for the response, so i have tried to run the app without firebase admin sdk, But i am still getting the same issue. So i think it is not related to firebase admin sdk. This seems to be related to vite build process as the Wasm is no where used directly in my codebase.

[matteodepalo]

@coreway1 could you check if any of your dependencies use wasm? Maybe you could try looking for *.wasm files in node_modules.

[coreway1]

@matteodepalo, i have checked all the dependencies, none of them having any *.wasm files or anything related to wasm.

[matteodepalo]

It's hard to debug this issue without knowing more about the codebase, but in any case this doesn't really seem an issue with the template itself. May I recommend creating a new app and gradually adding all the dependencies and code from the main one in order to find the culprit? I'm going to close this issue as there is not much that is actionable from our side.