javascript - Shopify 脚本标签未呈现

Question

问题

我使用 Shopify CLI 创建了一个 Shopify node.js 应用程序，我想使用脚本标签在标题下显示一个简单的栏。我使用脚本标签 API 添加脚本标签

"script_tags": [
    {
        "id": 174240039086,
        "src": "https://xxxxx.ngrok.io/script_tag",
    }
]

我还在<div id="script-app"></div>标题下添加了一个主题。

这是我的 script_tag.js 文件，位于 /pages/script_tag.js

import ReactDOM from 'react-dom';


class TestScriptTag extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <div>
                <p>this is a bar</p>
            </div>
        );
    }
}

 ReactDOM.render(<TestScriptTag />, document.getElementById('script-app'));

export default TestScriptTag;

最后，这是我的 server.js（大部分是 CLI 附带的）：

import "@babel/polyfill";
import dotenv from "dotenv";
import "isomorphic-fetch";
import createShopifyAuth, { verifyRequest } from "@shopify/koa-shopify-auth";
import Shopify, { ApiVersion } from "@shopify/shopify-api";
import Koa from "koa";
import next from "next";
import Router from "koa-router";
import { flushSync } from "react-dom";

const fs = require('fs');

dotenv.config();
const port = parseInt(process.env.PORT, 10) || 8083;
const dev = process.env.NODE_ENV !== "production";
const app = next({
  dev,
});
const handle = app.getRequestHandler();

Shopify.Context.initialize({
  API_KEY: process.env.SHOPIFY_API_KEY,
  API_SECRET_KEY: process.env.SHOPIFY_API_SECRET,
  SCOPES: process.env.SCOPES.split(","),
  HOST_NAME: process.env.HOST.replace(/https:\/\//, ""),
  API_VERSION: ApiVersion.October20,
  IS_EMBEDDED_APP: false,
  // This should be replaced with your preferred storage strategy
  SESSION_STORAGE: new Shopify.Session.MemorySessionStorage(),
});

// Storing the currently active shops in memory will force them to re-login when your server restarts. You should
// persist this object in your app.
const ACTIVE_SHOPIFY_SHOPS = {};

app.prepare().then(async () => {
  const server = new Koa();
  const router = new Router();
  
  server.keys = [Shopify.Context.API_SECRET_KEY];
  server.use(
    createShopifyAuth({
      async afterAuth(ctx) {
        console.log("here")
        // Access token and shop available in ctx.state.shopify
        const { shop, accessToken, scope } = ctx.state.shopify;
        const host = ctx.query.host;
        ACTIVE_SHOPIFY_SHOPS[shop] = scope;

        const response = await Shopify.Webhooks.Registry.register({
          shop,
          accessToken,
          path: "/webhooks",
          topic: "APP_UNINSTALLED",
          webhookHandler: async (topic, shop, body) =>
            delete ACTIVE_SHOPIFY_SHOPS[shop],
        });

        if (!response.success) {
          console.log(
            `Failed to register APP_UNINSTALLED webhook: ${response.result}`
          );
        }

        // Redirect to app with shop parameter upon auth
        ctx.redirect(`/?shop=${shop}&host=${host}`);
      },
    })
  );

  const handleRequest = async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  };

  router.get("/", async (ctx) => {
    const shop = ctx.query.shop;

    // This shop hasn't been seen yet, go through OAuth to create a session
    if (ACTIVE_SHOPIFY_SHOPS[shop] === undefined) {
      ctx.redirect(`/auth?shop=${shop}`);
    } else {
      await handleRequest(ctx);
    }
  });

  router.get("/script_tag", (ctx) => {
    handleRequest(ctx);
  });


  router.get("(/_next/static/.*)", handleRequest); // Static content is clear
  router.get("/_next/webpack-hmr", handleRequest); // Webpack content is clear
  router.get("(.*)", verifyRequest(), handleRequest); // Everything else must have sessions


  server.use(router.allowedMethods());
  server.use(router.routes());
  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

我收到错误：document not defined。

我试过的

我认为这是由于服务器端渲染，所以我想我可以通过这样做来解决它：

 if (typeof window !== "undefined") {
   ReactDOM.render(<TestScriptTag />, document.getElementById('script-app'));
}

但是仍然没有渲染，当我检查商店页面时我得到了这个。

我也尝试将路由更改为：

  router.get("/script_tag", (ctx) => {
    ctx.type = "module";
    ctx.body = fs.createReadStream('./pages/script_tag.js')
  });

但后来我收到关于 script_tag.js 中的 import 语句的错误 -SyntaxError: Unexpected identifier '{'. import call expects exactly one argument.

我不确定提供要注入标头的 javascript 文件的正确方法是什么。我觉得我错过了一些愚蠢的东西。请帮忙！！

标签： javascriptnode.jsreactjsshopifykoa