Incorporating several web components into my Svelte project led to the appearance of an error message stating HTMLElement is not defined after running npm run dev (which actually translates to vite dev).
The complete error message reads as follows:
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 issue seems to stem from this particular line of code:
// File name is composite.js
export class FormKitComposite extends HTMLElement {
Coincidentally, everything works perfectly fine in Storybook without any errors popping up there.
If anyone could provide guidance on resolving this issue, I would greatly appreciate it. Thank you!
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 configuration: 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
}
}
};