我已经使用 PHP 模板和反应前端模板创建了一个 Shopify 应用程序，它在本地与所有代码一起工作正常。但是，当我将应用程序环境更改为“生产”时，问题就出现了。据我所知，在将环境更改为生产时，入口点更改为 public 并访问 public/index.html 。在其中我找到以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Ensures that the UI is properly scaled in the Shopify Mobile app -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" crossorigin src="/assets/index-c9af863b.js"></script>
<link rel="stylesheet" href="/assets/index-f14d2172.css">
</head>
<body>
<div id="app"><!--index.jsx injects App.jsx here--></div>
</body>
</html>
在 npm run build 上，vite 构建了 js 文件，这就是问题发生的时候。当访问index.html时，它会在以下行抛出“Uncaught ReferenceError：require is not Defined”错误：
var wb = require(“反应”)
尽管我没有在任何地方使用过 require，而且它是一个新的 PHP Shopify 模板。似乎是其他一些依赖项导致了该问题，或者 vite 构建存在一些问题。
Package.json 文件：
{
"name": "shopify-frontend-template-react",
"version": "1.0.0",
"private": true,
"license": "UNLICENSED",
"scripts": {
"build": "vite build",
"dev": "vite",
"coverage": "vitest run --coverage"
},
"type": "module",
"engines": {
"node": ">= 12.16"
},
"stylelint": {
"extends": "@shopify/stylelint-polaris"
},
"dependencies": {
"@formatjs/intl-locale": "^3.3.2",
"@formatjs/intl-localematcher": "^0.4.0",
"@formatjs/intl-pluralrules": "^5.2.4",
"@shopify/app-bridge": "^3.7.7",
"@shopify/app-bridge-react": "^3.7.7",
"@shopify/i18next-shopify": "^0.2.3",
"@shopify/polaris": "^10.49.1",
"@vitejs/plugin-react": "1.2.0",
"i18next": "^23.1.0",
"i18next-resources-to-backend": "^1.1.4",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^13.0.0",
"react-query": "^3.34.19",
"react-router-dom": "^6.3.0",
"vite": "^4.3.9"
},
"devDependencies": {
"@shopify/stylelint-polaris": "^12.0.0",
"history": "^5.3.0",
"jsdom": "^19.0.0",
"prettier": "^2.6.0",
"stylelint": "^15.6.1",
"vi-fetch": "^0.6.1"
}
}
我已经尝试过以下事情：
我尝试过的模板：
但是，我还没有找到解决这个问题的方法。
我能够解决这个问题：
除了 require() 方法之外，JavaScript 中还有其他方法可以进行依赖调用。事实上，我们可以指示 Vite 在资产构建过程中将 require 这样不浏览器友好的语句“转换”为浏览器友好的声明。
为此，我们可以修改 vite.config.js（在 shopify-php 模板的情况下，位于 web/frontend/vite.config.js 中）以通过“transformMixedEsModules”添加此“build”指令。请参阅下面的更新功能
export default defineConfig({
root: dirname(fileURLToPath(import.meta.url)),
plugins: [react()],
define: {
"process.env.SHOPIFY_API_KEY": JSON.stringify(process.env.SHOPIFY_API_KEY),
},
resolve: {
preserveSymlinks: true,
},
server: {
host: "localhost",
port: process.env.FRONTEND_PORT,
hmr: hmrConfig,
proxy: {
"^/(\\?.*)?$": proxyOptions,
"^/api(/|(\\?.*)?$)": proxyOptions,
},
},
build: {
commonjsOptions: {
transformMixedEsModules: true
}
},
});
我遇到了同样的错误：我有一个在线应用程序，但它使用的是早于引入 i18n 翻译包的旧模板。我最近在我的暂存环境中将应用程序更新为最新的国际化模板，并且出现了此错误。
这是我迄今为止尝试过但没有成功的方法：
后来，我尝试删除国际化包，因为我有预感它们可能是问题的根源（出于测试目的，我什至编写了一个自定义翻译“t”函数来替换“useTranslation”函数）。令人惊讶的是，该应用程序再次开始工作。这清楚地表明问题出在其中一个包中。以下是可疑软件包的列表：
"@formatjs/intl-locale": "^3.3.2"
"@formatjs/intl-localematcher": "^0.4.0"
"@formatjs/intl-pluralrules": "^5.2.4"
"@shopify/i18next-shopify": "^0.2.3"
"i18next": "^23.1.0"
"i18next-resources-to-backend": "^1.1.4"
"react-i18next": "^13.0.0"
我仍在确定导致问题的特定软件包！ :/
希望这有帮助，我会在获得更多信息后立即更新您。