Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sheets not rendering #4655

Closed
jawadk116 opened this issue Feb 15, 2025 · 3 comments
Closed

Sheets not rendering #4655

jawadk116 opened this issue Feb 15, 2025 · 3 comments
Labels
documentation Improvements or additions to documentation question Further information is requested scope:umd

Comments

@jawadk116
Copy link

jawadk116 commented Feb 15, 2025

Hi,

I have integrated UniverJS Sheets into my Laravel application using the UNPKG CDN. It was functioning correctly until two days ago when it suddenly stopped working.

Upon inspecting the browser console, I encountered 27 errors related to the core library and other dependencies. I attempted to explicitly specify different versions in the CDN links (0.5.0, 0.5.1, 0.5.2, 0.5.3, 0.5.4, 0.5.5, and 0.6.0), but none resolved the issue.

To further investigate, I visited the official UniverJS documentation and copied the Example 1 code. I created a new HTML file on my local machine, pasted the code, and ran it in Google Chrome. However, the sheet failed to render, and the browser console displayed the same 27 errors.

Could you please assist me in resolving this issue?

Here is the link to Example 1: UniverJS Example 1

Below is the code I copied:

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>

    <script src="https://unpkg.com/@univerjs/protocol/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/core/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/telemetry/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/rpc/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/design/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/engine-render/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/engine-numfmt/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/drawing/lib/umd/index.js"></script>

    <script src="https://unpkg.com/@univerjs/ui/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/docs/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/index.js"></script>

    <script src="https://unpkg.com/@univerjs/engine-formula/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/ui/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-formula/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-numfmt/lib/umd/facade.js"></script>

    <script src="https://unpkg.com/@univerjs/design/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/ui/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets/lib/umd/locale/zh-CN.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-ui/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/docs-ui/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-formula-ui/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/umd/locale/en-US.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/@univerjs/design/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/ui/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/docs-ui/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-ui/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-formula-ui/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/sheets-numfmt-ui/lib/index.css" />

    <style>
        html,
        body,
        #root,
        #app {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app"></div>

    <script>
        const { Univer, LocaleType, merge, UniverInstanceType, FUniver } = UniverCore
        const { defaultTheme } = UniverDesign
        const { UniverRenderEnginePlugin } = UniverEngineRender
        const { UniverFormulaEnginePlugin } = UniverEngineFormula
        const { UniverUIPlugin } = UniverUi
        const { UniverSheetsPlugin } = UniverSheets
        const { UniverSheetsUIPlugin } = UniverSheetsUi
        const { UniverDocsPlugin } = UniverDocs
        const { UniverDocsUIPlugin } = UniverDocsUi
        const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
        const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
        const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
        const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi

        const univer = new Univer({
            theme: defaultTheme,
            locale: LocaleType.EN_US,
            locales: {
                [LocaleType.EN_US]: merge(
                    {},
                    UniverDesignEnUS,
                    UniverUiEnUS,
                    UniverSheetsEnUS,
                    UniverSheetsUiEnUS,
                    UniverDocsUiEnUS,
                    UniverSheetsFormulaUiEnUS,
                    UniverSheetsNumfmtUiEnUS
                ),
            },
        });

        univer.registerPlugin(UniverRenderEnginePlugin);
        univer.registerPlugin(UniverFormulaEnginePlugin);

        univer.registerPlugin(UniverUIPlugin, {
            container: 'app',
        });

        univer.registerPlugin(UniverSheetsPlugin);
        univer.registerPlugin(UniverSheetsUIPlugin);

        univer.registerPlugin(UniverDocsPlugin);
        univer.registerPlugin(UniverDocsUIPlugin);

        univer.registerPlugin(UniverSheetsFormulaPlugin);
        univer.registerPlugin(UniverSheetsFormulaUIPlugin);
        univer.registerPlugin(UniverSheetsNumfmtPlugin);
        univer.registerPlugin(UniverSheetsNumfmtUIPlugin);

        univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

        const univerAPI = FUniver.newAPI(univer);
    </script>
</body>

Looking forward to your support.

Best regards,
Jawad Khan

@jikkai
Copy link
Member

jikkai commented Feb 16, 2025

The document needs to be updated @hexf00

@jikkai jikkai added question Further information is requested documentation Improvements or additions to documentation labels Feb 16, 2025
@jawadk116
Copy link
Author

jawadk116 commented Feb 16, 2025 via email

@hexf00
Copy link
Member

hexf00 commented Feb 20, 2025

@jawadk116 Due to its complexity, the combined usage method in UMD is no longer our recommended approach. We suggest using the presets method in UMD, which hides some of the complexity. The following code will work in version 0.6.0:

<head>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/bundles/rxjs.umd.min.js"></script>
    <script src="https://unpkg.com/@wendellhu/[email protected]/dist/redi.js"></script>
    <script src="https://unpkg.com/@wendellhu/[email protected]/dist/react-bindings.js"></script>

    <script>
        /**
         * Starting from Univer 0.6.0, with the support for React 19[^1], UMD users may need additional adaptation.
         *
         * [^1]: [support for React 19] https://github.com/dream-num/univer/pull/4247
         */

        /**
         * Fix `Uncaught TypeError: client.createRoot is not a function`
         * If using UMD React < 18, you might need the following code.
         */
        (function (global) {
            'use strict';
            if (!global.ReactDOM) {
                throw new Error('ReactDOM must be loaded before ReactCreateRoot.');
            }
            const ReactDOM = global.ReactDOM;
            if (!ReactDOM.createRoot) {
                ReactDOM.createRoot = function (container) {
                    return {
                        render: (element) => {
                            ReactDOM.render(element, container);
                        },
                    };
                };
            }
        })(this);

        /**
         * Fix `Uncaught TypeError: jsxRuntime.jsx is not a function`
         * If using UMD React, you might need the following code.
         * Reference: https://unpkg.com/[email protected]/cjs/react-jsx-runtime.production.min.js
         */
        (function (global) {
            'use strict';
            if (!global.React) {
                throw new Error('React must be loaded before ReactJSXRuntime.');
            }
            const React = global.React;
            if (!React.jsx || !React.jsxs) {
                const REACT_ELEMENT_TYPE = Symbol.for('react.element');
                const hasOwnProperty = Object.prototype.hasOwnProperty;
                const RESERVED_PROPS = {
                    key: true,
                    ref: true,
                    __self: true,
                    __source: true,
                };
                const ReactCurrentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
                function createReactElement(type, config, maybeKey) {
                    const props = {};
                    let key = null;
                    let ref = null;
                    if (maybeKey !== undefined) {
                        key = `${maybeKey}`;
                    }
                    if (config.key !== undefined) {
                        key = `${config.key}`;
                    }
                    if (config.ref !== undefined) {
                        ref = config.ref;
                    }
                    for (var propName in config) {
                        if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
                            props[propName] = config[propName];
                        }
                    }
                    if (type && type.defaultProps) {
                        const defaultProps = type.defaultProps;
                        for (var propName in defaultProps) {
                            if (props[propName] === undefined) {
                                props[propName] = defaultProps[propName];
                            }
                        }
                    }
                    return {
                        $$typeof: REACT_ELEMENT_TYPE,
                        type,
                        key,
                        ref,
                        props,
                        _owner: ReactCurrentOwner.current,
                    };
                }
                React.jsx = createReactElement;
                React.jsxs = createReactElement;
            }
        })(this);
    </script>

    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>

    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/index.js"></script>

    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/facade.js"></script>

    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/locale/en-US.js"></script>
    <script src="https://unpkg.com/@univerjs/[email protected]/lib/umd/locale/en-US.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/@univerjs/[email protected]/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/[email protected]/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/[email protected]/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/[email protected]/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/[email protected]/lib/index.css" />
    <link rel="stylesheet" href="https://unpkg.com/@univerjs/[email protected]/lib/index.css" />

    <style>
        html,
        body,
        #root,
        #app {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app"></div>

    <script>
        const { Univer, LocaleType, merge, UniverInstanceType } = UniverCore
        const { FUniver } = UniverCoreFacade
        const { defaultTheme } = UniverDesign
        const { UniverRenderEnginePlugin } = UniverEngineRender
        const { UniverFormulaEnginePlugin } = UniverEngineFormula
        const { UniverUIPlugin } = UniverUi
        const { UniverSheetsPlugin } = UniverSheets
        const { UniverSheetsUIPlugin } = UniverSheetsUi
        const { UniverDocsPlugin } = UniverDocs
        const { UniverDocsUIPlugin } = UniverDocsUi
        const { UniverSheetsFormulaPlugin } = UniverSheetsFormula
        const { UniverSheetsFormulaUIPlugin } = UniverSheetsFormulaUi
        const { UniverSheetsNumfmtPlugin } = UniverSheetsNumfmt
        const { UniverSheetsNumfmtUIPlugin } = UniverSheetsNumfmtUi

        const univer = new Univer({
            theme: defaultTheme,
            locale: LocaleType.EN_US,
            locales: {
                [LocaleType.EN_US]: merge(
                    {},
                    UniverDesignEnUS,
                    UniverUiEnUS,
                    UniverSheetsEnUS,
                    UniverSheetsUiEnUS,
                    UniverDocsUiEnUS,
                    UniverSheetsFormulaUiEnUS,
                    UniverSheetsNumfmtUiEnUS
                ),
            },
        });

        univer.registerPlugin(UniverRenderEnginePlugin);
        univer.registerPlugin(UniverFormulaEnginePlugin);

        univer.registerPlugin(UniverUIPlugin, {
            container: 'app',
        });

        univer.registerPlugin(UniverSheetsPlugin);
        univer.registerPlugin(UniverSheetsUIPlugin);

        univer.registerPlugin(UniverDocsPlugin);
        univer.registerPlugin(UniverDocsUIPlugin);

        univer.registerPlugin(UniverSheetsFormulaPlugin);
        univer.registerPlugin(UniverSheetsFormulaUIPlugin);
        univer.registerPlugin(UniverSheetsNumfmtPlugin);
        univer.registerPlugin(UniverSheetsNumfmtUIPlugin);

        univer.createUnit(UniverInstanceType.UNIVER_SHEET, {});

        const univerAPI = FUniver.newAPI(univer);
    </script>
</body>

@dream-num dream-num deleted a comment from univer-bot bot Feb 20, 2025
@jikkai jikkai marked this as a duplicate of #4690 Feb 21, 2025
@hexf00 hexf00 closed this as completed Feb 24, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation question Further information is requested scope:umd
Projects
None yet
Development

No branches or pull requests

3 participants