Shopify应用路由切换会话重置及Vite Wasm兼容问题求助

问题1：Vite控制台Wasm相关错误 #

未直接使用WebAssembly，但控制台抛出以下错误：

"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)

问题2：路由切换时会话重置并跳转到首页 #

应用内切换路由时，会触发新会话加载并强制跳转到首页，不符合预期行为。

针对Wasm错误的解决方案 #

该错误源于Firebase Admin SDK的依赖包含Wasm模块，而Vite默认不支持ESM格式的Wasm加载，需通过插件处理：

1. 安装必要插件：

npm install vite-plugin-wasm vite-plugin-top-level-await --save-dev

2. 修改vite.config.js，添加插件配置：

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import wasm from "vite-plugin-wasm";
import topLevelAwait from "vite-plugin-top-level-await";

// 保留原有环境变量处理代码
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: [
    wasm(),
    topLevelAwait(),
    remix({
      ignoredRouteFiles: ["**/.*"],
    }),
    tsconfigPaths(),
  ],
  build: {
    assetsInlineLimit: 0,
  },
});

3. 重启开发服务器，错误即可消除。

针对路由会话重置的解决方案 #

该问题与Remix路由处理、Shopify App Bridge会话管理直接相关，检查并修复以下几点：

1. 使用Shopify App Bridge路由组件 #

禁止使用原生a标签或React Router的Link，改用Shopify提供的Link组件，确保路由切换在iframe内保持会话：

import { Link } from "@shopify/app-bridge-react";

// 示例用法
<Link to="/your-target-route">跳转至目标页面</Link>

2. 确认会话存储配置正确性 #

在app/root.jsx或入口文件中，确保Shopify会话存储与Firebase集成正确：

import { shopifyApp } from "@shopify/shopify-app-remix";
import { FirebaseSessionStorage } from "@shopify/shopify-app-session-storage-firebase";
import firebaseAdmin from "./path-to-your-firebase-admin-config";

const sessionStorage = new FirebaseSessionStorage(firebaseAdmin.firestore());

const shopify = shopifyApp({
  sessionStorage,
  // 其他Shopify配置项
});

3. 避免全页刷新触发会话重置 #

检查所有路由跳转逻辑，确保内部路由仅使用Remix的<Link>或Shopify App Bridge的<Link>，避免手动触发window.location.href等导致全页刷新的操作。

4. 确保Firebase Admin仅初始化一次 #

修改Firebase Admin初始化代码，避免重复初始化引发会话异常：

// firebase-admin.js
import firebase from "firebase-admin";

let app;

if (!firebase.apps.length) {
  app = firebase.initializeApp({
    credential: firebase.credential.cert(firebaseConfig),
  });
} else {
  app = firebase.app();
}

export default app;

额外优化建议 #

• 统一Remix依赖版本：当前package.json中@remix-run/node为2.11.1，其余Remix包为2.7.1，版本不一致易引发兼容性问题，建议统一升级至最新稳定版。
• 清理依赖缓存：若问题仍存在，尝试删除node_modules和package-lock.json后重新安装：

rm -rf node_modules package-lock.json
npm install

内容的提问来源于stack exchange，提问作者Sanket