CODEWITHSUNDEEP
javascripttypescriptfrontendsveltevite
Snookums
Snookums

Reputation: 1340

In Svelte and Vite, error "HTMLElement is not defined" shows up after running "npm run dev"

I used a few web components in my Svelte project, but after running npm run dev (which is vite dev actually), error HTMLElement is not defined shows up.

The whole error message is

HTMLElement is not defined
ReferenceError: HTMLElement is not defined
    at /src/components/shared/formkit/classes/composite.js:21:39
    at async instantiateModule (file:///D:/my_project/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:50548:9)

The problematic line of code is

// File name is composite.js
export class FormKitComposite extends HTMLElement {

But it works fine in Storybook. No error shows up there.

Could anyone teach me how to solve it please?

Thanks in advance!

tsconfig.json:

{
    "extends": "./.svelte-kit/tsconfig.json",

    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true,
        
        "types": [
            "@testing-library/jest-dom",
            "vitest/globals"
        ]
    },

    "include": [
        "decs.d.ts"
    ]
}

vite.config.ts:

const config: UserConfig = {
    plugins: [sveltekit()],

    resolve: {
        alias: {
            $components: path.resolve('src/components'),
            $functions: path.resolve('src/functions'),
            $graphql: path.resolve('src/graphql'),
            $stores: path.resolve('src/stores'),
            $styles: path.resolve('src/styles'),
            $types: path.resolve('src/types')
        }
    },

    server: {
        fs: {
            strict: false
        }
    },

    test: {
        environment: 'jsdom',
        globals: true,
        include: ['src/components/**/*.test.ts', 'src/functions/**/*.test.ts'],
        setupFiles: ['./setup-test.ts'],

        coverage: {
            branches: 100,
            functions: 100,
            lines: 100,
            statements: 100
        }
    }
};

Upvotes: 1

Views: 2285

Answers (1)

Snookums
Snookums

Reputation: 1340

It is because web components cannot be rendered in server side.

To solve it, use dynamic import like

    onMount(async () => {
        await import('your file URL');
    });

Upvotes: 3

Related Questions