same

same

same my issue
Uncaught ReferenceError: $ is not defined
at luckysheet.umd.js:9:1
at luckysheet.umd.js:1:1

"I have found the solution in ReactJS, you can add the following lines of code to your index.html file located in the public folder:

<link id="external-css" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css" media="all">
<link id="external-css" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css" media="all">
<link id="external-css" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css" media="all">
<link id="external-css" rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css" media="all">
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js" id="external-js"></script>
<script src="https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js" id="external-js"></script>

@Wb11G already found that trick, but need to avoid external links and import only local modules. Looking for better ways.

BTW, that not stable, sometimes does not work

I got luckysheets working in react without using script tags in index.html and without using react-helmet.
You can use the following code with CDN
Alternatively you could modify it to use local npm package.

import React, { useEffect, useRef } from 'react';

export default function Luckysheet()  {
   // Flag to track whether the scripts are loaded
   const script1Loaded = useRef(false);
   const script2Loaded = useRef(false);
 

  const luckyCss = {
    margin: '0px',
    padding: '0px',
    position: 'absolute',
    width: '100%',
    height: '100%',
    left: '0px',
    top: '0px',
  };

  // Include stylesheets directly in the head of the document
  useEffect(() => {
    const linkElement1 = document.createElement('link');
    linkElement1.rel = 'stylesheet';
    linkElement1.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css';
    document.head.appendChild(linkElement1);

    const linkElement2 = document.createElement('link');
    linkElement2.rel = 'stylesheet';
    linkElement2.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css';
    document.head.appendChild(linkElement2);

    const linkElement3 = document.createElement('link');
    linkElement3.rel = 'stylesheet';
    linkElement3.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css';
    document.head.appendChild(linkElement3);

    const linkElement4 = document.createElement('link');
    linkElement4.rel = 'stylesheet';
    linkElement4.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css';
    document.head.appendChild(linkElement4);

    // Add cleanup function to remove the link elements when the component unmounts
    return () => {
      document.head.removeChild(linkElement1);
      document.head.removeChild(linkElement2);
      document.head.removeChild(linkElement3);
      document.head.removeChild(linkElement4);
    };
  }, []); 

 
  useEffect(() => {
    // Load plugin.js script
    const scriptElement1 = document.createElement('script');
    scriptElement1.src = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js';
    scriptElement1.type = 'text/javascript';
    scriptElement1.onload = () => {
      if (!script1Loaded.current) {
        // plugin.js script has loaded, now load luckysheet.umd.js script
        script1Loaded.current = true;
        console.log('plugin.js loaded');
        const scriptElement2 = document.createElement('script');
        scriptElement2.src = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js';
        scriptElement2.type = 'text/javascript';
        scriptElement2.onload = () => {
          if (!script2Loaded.current) {
            // Both scripts have loaded, now you can initialize Luckysheet
            script2Loaded.current = true;
            console.log('luckysheet.umd.js loaded');
            const luckysheet = window.luckysheet;
            luckysheet.create({
              container: 'luckysheetDiv',
            });
  
            // Add cleanup function to remove the script elements when the component unmounts
            return () => {
              document.head.removeChild(scriptElement1);
              document.head.removeChild(scriptElement2);
            };
          }
        };
  
        // Append luckysheet.umd.js script to head
        document.head.appendChild(scriptElement2);
      }
    };
    // Append plugin.js script to head
    document.head.appendChild(scriptElement1);
  }, []);
  
  return (
    <div id="luckysheetDiv" style={luckyCss}></div>
  )
}

I got luckysheets working in react without using script tags in index.html and without using react-helmet. You can use the following code with CDN Alternatively you could modify it to use local npm package.

import React, { useEffect, useRef } from 'react';

export default function Luckysheet()  {
   // Flag to track whether the scripts are loaded
   const script1Loaded = useRef(false);
   const script2Loaded = useRef(false);
 

  const luckyCss = {
    margin: '0px',
    padding: '0px',
    position: 'absolute',
    width: '100%',
    height: '100%',
    left: '0px',
    top: '0px',
  };

  // Include stylesheets directly in the head of the document
  useEffect(() => {
    const linkElement1 = document.createElement('link');
    linkElement1.rel = 'stylesheet';
    linkElement1.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/css/pluginsCss.css';
    document.head.appendChild(linkElement1);

    const linkElement2 = document.createElement('link');
    linkElement2.rel = 'stylesheet';
    linkElement2.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/plugins.css';
    document.head.appendChild(linkElement2);

    const linkElement3 = document.createElement('link');
    linkElement3.rel = 'stylesheet';
    linkElement3.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/css/luckysheet.css';
    document.head.appendChild(linkElement3);

    const linkElement4 = document.createElement('link');
    linkElement4.rel = 'stylesheet';
    linkElement4.href = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/assets/iconfont/iconfont.css';
    document.head.appendChild(linkElement4);

    // Add cleanup function to remove the link elements when the component unmounts
    return () => {
      document.head.removeChild(linkElement1);
      document.head.removeChild(linkElement2);
      document.head.removeChild(linkElement3);
      document.head.removeChild(linkElement4);
    };
  }, []); 

 
  useEffect(() => {
    // Load plugin.js script
    const scriptElement1 = document.createElement('script');
    scriptElement1.src = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/plugins/js/plugin.js';
    scriptElement1.type = 'text/javascript';
    scriptElement1.onload = () => {
      if (!script1Loaded.current) {
        // plugin.js script has loaded, now load luckysheet.umd.js script
        script1Loaded.current = true;
        console.log('plugin.js loaded');
        const scriptElement2 = document.createElement('script');
        scriptElement2.src = 'https://cdn.jsdelivr.net/npm/luckysheet/dist/luckysheet.umd.js';
        scriptElement2.type = 'text/javascript';
        scriptElement2.onload = () => {
          if (!script2Loaded.current) {
            // Both scripts have loaded, now you can initialize Luckysheet
            script2Loaded.current = true;
            console.log('luckysheet.umd.js loaded');
            const luckysheet = window.luckysheet;
            luckysheet.create({
              container: 'luckysheetDiv',
            });
  
            // Add cleanup function to remove the script elements when the component unmounts
            return () => {
              document.head.removeChild(scriptElement1);
              document.head.removeChild(scriptElement2);
            };
          }
        };
  
        // Append luckysheet.umd.js script to head
        document.head.appendChild(scriptElement2);
      }
    };
    // Append plugin.js script to head
    document.head.appendChild(scriptElement1);
  }, []);
  
  return (
    <div id="luckysheetDiv" style={luckyCss}></div>
  )
}

that's not the point, the point is loading luckysheet as an import, not as an url.

Don't be rude, it is absolutely the point!
Reduce package size and profit from perfectly configured caching etc. by using CDN sources while not having to cram all those script tags into index.html

To use the local npm package use the following code, copy the Luckysheet css files in some styles directory or where ever you want them and import them with regular css import statements in the Component file

import React, { useEffect, useState } from 'react';
import "../styles/CssFile1.css"
import "../styles/CssFile2.css"
import "../styles/CssFile3.css"

const Luckysheet = () => {
  const [luckysheetLoaded, setLuckysheetLoaded] = useState(false);

  const luckyCss = {
    margin: '0px',
    padding: '0px',
    position: 'absolute',
    width: '100%',
    height: '100%',
    left: '0px',
    top: '0px',
  };

  const loadLuckysheet = async () => {
    try {
      // Load Luckysheet dynamically
      const luckysheetModule = await import('luckysheet');
      const luckysheet = luckysheetModule.default;

      // Initialize Luckysheet
      luckysheet.create({
        container: 'luckysheet',
      });

      // Set the loaded state
      setLuckysheetLoaded(true);
    } catch (error) {
      console.error('Error loading Luckysheet:', error);
    }
  };

  

  return (
    <div id="luckysheet" style={luckyCss}></div>
  );
};

export default Luckysheet;