Changes are applied only after I save svelte.config.js. (It seems like building through HMR fails.) - build

Question

My problem
Even though I make a change in a file, it's not being reflected on the reseult.
Codes are flickering right after I save a change.
But It's being reflected on the result only after I save svelte.config.js without changing anything in svelte.config.js.
codes are flickering after I made a change
I'm struggling over 3 days. It seems like HMR is not working. More precisely, I guess building is failing when it's done through HMR.
On the first dev start, it works. But When I make changes in a file and save it, it doesn't apply changes. The codes keep flickering after saving my changes without reflecting it as a result of the browser.
But the strange thing is, It reflects changes only after I save svelte.config.js file. Right after I save svelte.config.js, the dev server restarts and the flickering effect of codes stops and changes are reflected. I first thought "maybe is it working only after the server is restarted..?" But it didn't. Changes were not reflected when I savfe vite.config.js. Same flickering effect.
Right now, I have to save svelte.config.js file every time I make some change in any files without knowing the reason. (so painful......and it takes a few seconds everytime I do it)
I recorded my screen
https://www.loom.com/share/71dab382a20547919e07bf410d49fc9d
My package.json
{
"name": "sveltekit-typescript-showcase",
"version": "1.0.0",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"build:types": "openapi-typescript https://vskodzianevmhpqzmjqd.supabase.co/rest/v1/?apikey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZza29kemlhbmV2bWhwcXptanFkIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTI0Mzg0MTAsImV4cCI6MTk2ODAxNDQxMH0.pqf9e6G8pcMxCdVVIipD-RXJrYV-9RJK_qWruTkjGAg --output src/types/supabase.ts",
"gen-type-dev": "supabase gen types typescript --db-url postgres://postgres:HappyHyein66!#db.jgxpeedixksinkdlpfwp.supabase.co:6543/postgres",
"package": "vite package",
"preview": "vite preview"
},
"devDependencies": {
"#supabase/supabase-js": "^1.35.3",
"#types/lodash": "^4.14.186",
"carbon-components-svelte": "^0.65.0",
"openapi-typescript": "5.4.0",
"prettier": "^2.6.2",
"sass": "^1.52.2",
"svelte": "^3.46.6",
"svelte-check": "^2.4.6",
"svelte-preprocess": "^4.10.5",
"tslib": "^2.3.1",
"typescript": "~4.6.3",
"vite": "^3.1.7",
"#sveltejs/kit": "^1.0.0-next.359"
},
"type": "module",
"dependencies": {
"#supabase/supabase-js": "^1.35.3",
"#sveltejs/adapter-vercel": "^1.0.0-next.80",
"#sveltejs/kit": "^1.0.0-next.359",
"base64-arraybuffer": "^1.0.2",
"carbon-icons-svelte": "^11.1.0",
"svelte": "^3.46.6",
"encoding": "^0.1.13",
"lodash": "^4.17.21",
"nvm": "^0.0.4",
"supabase": "^0.5.0"
}
}
svelte.config.js
import vercel from '#sveltejs/adapter-vercel';
import { resolve } from 'path';
import preprocess from 'svelte-preprocess';
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
alias: {
$lib: resolve('./src/lib'),
$models: resolve('./src/models'),
},
kit: {
adapter: vercel()
},
};
export default config;
vite.config.js
import { sveltekit } from '#sveltejs/kit/vite';
import { resolve } from 'path';
const config = {
plugins: [sveltekit()],
resolve: {
alias: {
$lib: resolve( './src/lib'),
$models: resolve('./src/models'),
$types: resolve('./src/types/index.ts')
},
},
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['..'],
},
},
}
export default config;
I tried adding svelte.config.js options into vite.config.js.
vite.config.js
import { sveltekit } from '#sveltejs/kit/vite';
import { resolve } from 'path';
const config = {
plugins: [sveltekit({
preprocess: preprocess(),
alias: {
$lib: resolve('./src/lib'),
$models: resolve('./src/models'),
},
kit: {
adapter: vercel()
},
})],
resolve: {
alias: {
$lib: resolve( './src/lib'),
$models: resolve('./src/models'),
$types: resolve('./src/types/index.ts')
},
},
server: {
fs: {
// Allow serving files from one level up to the project root
allow: ['..'],
},
},
}
export default config;
npm update after reading it (svelte - Vite+SvelteKit Build Failing - Stack Overflow)
removed alias option in vite.config.js
Deleted node_modules and npm install again. There were suspicious 2 warns... (raw logs are attached below)
6:36:53 PM [vite] changed tsconfig file detected: C:\Users\Jooyeon\Downloads\modeny-svelte-typescript\tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
npm WARN deprecated nvm#0.0.4: This is NOT the correct nvm. Visit https://nvm.sh and use the curl command to install it.
// Raw
6:26:23 PM [vite] server restarted.
➜ Local: http://127.0.0.1:5173/
➜ Network: use --host to expose
The following Vite config options will be overridden by SvelteKit:
- resolve.alias.$lib
6:26:24 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:111:0 Unused CSS selector ".menu-icon.home"
6:26:24 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:123:0 Unused CSS selector ".menu-icon.hanger"
6:26:26 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ComposedModal.svelte:153:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:26 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ModalBody.svelte:9:0 A11y: noninteractive element cannot have positive tabIndex value
6:26:26 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/CodeSnippet/CodeSnippet.svelte:221:4 A11y: noninteractive element cannot have positive tabIndex value
6:26:27 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/DataTable/DataTableSkeleton.svelte:66:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:27 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/FileUploader/FileUploaderButton.svelte:63:0 A11y: noninteractive element cannot have positive tabIndex value
6:26:27 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/FileUploader/FileUploaderDropContainer.svelte:84:2 A11y: noninteractive element cannot have positive tabIndex value
6:26:27 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ListBox/ListBoxField.svelte:46:0 A11y: noninteractive element cannot have positive tabIndex value
6:26:27 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Modal/Modal.svelte:242:4 A11y: noninteractive element cannot have positive tabIndex value
6:26:27 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/NumberInput/NumberInput.svelte:156:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Search/Search.svelte:104:4 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/StructuredList/StructuredListRow.svelte:15:2 A11y: noninteractive element cannot have positive tabIndex value
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Tile/SelectableTile.svelte:56:0 A11y: noninteractive element cannot have positive tabIndex value
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TextArea/TextArea.svelte:62:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TimePicker/TimePicker.svelte:55:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TextInput/TextInput.svelte:103:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TextInput/PasswordInput.svelte:97:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:28 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Tooltip/Tooltip.svelte:252:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:29 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/UIShell/SideNav.svelte:52:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:29 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/UIShell/HeaderSearch.svelte:64:7 A11y: Elements with the ARIA role "combobox" must have the following attributes defined: "aria-controls", "aria-expanded"
6:26:29 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TreeView/TreeViewNodeList.svelte:135:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
data! {}
data! {}
files in the public directory are served at the root path.
Instead of /static/icon/customer.svg, use /icon/customer.svg.
files in the public directory are served at the root path.
Instead of /static/icon/add.svg, use /icon/add.svg.
files in the public directory are served at the root path.
Instead of /static/icon/schedule.svg, use /icon/schedule.svg.
6:26:34 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:111:0 Unused CSS selector ".menu-icon.home"
6:26:34 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:123:0 Unused CSS selector ".menu-icon.hanger"
data! {}
6:26:37 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ComposedModal.svelte:153:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:37 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ModalBody.svelte:9:0 A11y: noninteractive element cannot have positive tabIndex value
6:26:37 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/CodeSnippet/CodeSnippet.svelte:221:4 A11y: noninteractive element cannot have positive tabIndex value
6:26:38 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/DataTable/DataTableSkeleton.svelte:66:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
onents-svelte/src/Tooltip/Tooltip.svelte:252:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:43 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TimePicker/TimePicker.svelte:55:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:43 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/UIShell/SideNav.svelte:52:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:26:43 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/UIShell/HeaderSearch.svelte:64:7 A11y: Elements with the ARIA role "combobox" must have the following attributes defined: "aria-controls", "aria-expanded"
6:26:44 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TreeView/TreeViewNodeList.svelte:135:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:53 PM [vite] changed tsconfig file detected: C:\Users\Jooyeon\Downloads\modeny-svelte-typescript\tsconfig.json - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.
6:36:54 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:111:0 Unused CSS selector ".menu-icon.home"
6:36:54 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:123:0 Unused CSS selector ".menu-icon.hanger"
6:36:56 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ComposedModal.svelte:153:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:56 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ModalBody.svelte:9:0 A11y: noninteractive element cannot have positive tabIndex value
6:36:56 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/CodeSnippet/CodeSnippet.svelte:221:4 A11y: noninteractive element cannot have positive tabIndex value
6:36:56 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/DataTable/DataTableSkeleton.svelte:66:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:56 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/FileUploader/FileUploaderButton.svelte:63:0 A11y: noninteractive element cannot have positive tabIndex value
6:36:56 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/FileUploader/FileUploaderDropContainer.svelte:84:2 A11y: noninteractive element cannot have positive tabIndex value
6:36:57 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ListBox/ListBoxField.svelte:46:0 A11y: noninteractive element cannot have positive tabIndex value
6:36:57 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Modal/Modal.svelte:242:4 A11y: noninteractive element cannot have positive tabIndex value
6:36:57 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/NumberInput/NumberInput.svelte:156:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:57 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Search/Search.svelte:104:4 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/StructuredList/StructuredListRow.svelte:15:2 A11y: noninteractive element cannot have positive tabIndex value
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TextInput/TextInput.svelte:103:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TextInput/PasswordInput.svelte:97:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Tile/SelectableTile.svelte:56:0 A11y: noninteractive element cannot have positive tabIndex value
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TimePicker/TimePicker.svelte:55:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TextArea/TextArea.svelte:62:0 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/Tooltip/Tooltip.svelte:252:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:58 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/UIShell/SideNav.svelte:52:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:36:59 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/UIShell/HeaderSearch.svelte:64:7 A11y: Elements with the ARIA role "combobox" must have the following attributes defined: "aria-controls", "aria-expanded"
6:36:59 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/TreeView/TreeViewNodeList.svelte:135:6 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
data! {}
files in the public directory are served at the root path.
Instead of /static/icon/customer.svg, use /icon/customer.svg.
files in the public directory are served at the root path.
Instead of /static/icon/add.svg, use /icon/add.svg.
files in the public directory are served at the root path.
Instead of /static/icon/schedule.svg, use /icon/schedule.svg.
6:37:01 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:111:0 Unused CSS selector ".menu-icon.home"
6:37:01 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/src/lib/component/Sidebar.svelte:123:0 Unused CSS selector ".menu-icon.hanger"
data! {}
6:37:04 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ComposedModal.svelte:153:2 A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event.
6:37:04 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/ComposedModal/ModalBody.svelte:9:0 A11y: noninteractive element cannot have positive tabIndex value
6:37:04 PM [vite-plugin-svelte] C:/Users/Jooyeon/Downloads/modeny-svelte-typescript/node_modules/carbon-components-svelte/src/CodeSnippet/CodeSnippet.svelte:221:4 A11y: noninteractive element cannot have positive tabIndex value
npm WARN deprecated nvm#0.0.4: This is NOT the correct nvm. Visit https://nvm.sh and use the curl command to install it.
added 294 packages, and audited 295 packages in 16s
24 packages are looking for funding
run `npm fund` for details
4 vulnerabilities (1 moderate, 3 critical)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.

Answer 1

Looking through the simplest package.json file in here(https://stackblitz.com/edit/sveltejs-kit-template-default-wab2ls?file=package.json&terminal=dev) which is in svelte-kit front page(https://kit.svelte.dev/), I found out that there's #types/cookie on the list and not on mine.
I remembered VScode once showed an error message regarding it, So I added it on the list and installed again and it worked...