node.js - 是否可以更改鼠标指针或添加一个 div 并让它跟随 Shopify 中的鼠标？

Question

我正在尝试通过 Shopify 应用程序在所有产品页面中让 div 跟随鼠标指针。

我收到此错误： SyntaxError: Cannot use import statement outside a module

日志：

/Users/jn/work/hurl/node_modules/react-sticky-mouse-tooltip/dist/MouseTooltip.js:5
import React from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module

代码：

import { useState } from "react";
import { Heading, Page } from "@shopify/polaris";
import MouseTooltip from "react-sticky-mouse-tooltip";


const Index = () => {
  const [appendToTitle, setMouseTip] = useState("");

  const [mousetip, setSlate] = useState({ isMouseTooltipVisible: false });
  const isMouseTooltipVisible = mousetip.isMouseTooltipVisible;

  function toggleMouseTooltip() {
    setSlate((prevState) => {
      console.log(`---> prevState 226:  ${prevState}`);
      return { isMouseTooltipVisible: !prevState.isMouseTooltipVisible };
    });
  }


  const cursor = {
    color: "red",
    padding: "10px",
    fontFamily: "Arial",
    position: "absolute",
  };

  return (
    <Page>
      <Heading>Shopify app with Node and dReact </Heading>
      <button onClick={toggleMouseTooltip}>Toggle mouse tooltip</button>
      <MouseTooltip
        visible={this.state.isMouseTooltipVisible}
        offsetX={15}
        offsetY={10}
      >
        <span>Follow the cursor!</span>
      </MouseTooltip>
    </Page>
  );
};

export default Index;

标签： node.jsreactjsshopify