ReferenceError 수정 방법: SvelteKit/Vite에서 전역이 정의되지 않음 오류

TL:DR

// svelte.config.js
const config = {
    preprocess: preprocess(),
    kit: {
        adapter: adapter(),
        target: '#svelte',
        // add this 👇
        vite: {
            define: {
                global: {}
            }
        }
    }
};

나는 이것을 알아내려고 몇 시간을 보냈고 이 오류 메시지는 Angular 문제와 매우 유사하기 때문에 웹에서 정확한 정보를 찾기가 정말 어려웠습니다. 그러나 Angular 솔루션은 SvelteKit에는 쓸모가 없으므로 이 게시물을 함께 작성해야 한다고 생각했습니다.

SvelteKit은 currently in beta이므로 미래의 어느 시점에서 이 문제를 해결할 수 있을지 누가 ​​알겠습니까? 하지만 어쨌든...

SvelteKit은 빌드 도구로 Vite을 사용합니다. Vite는 매우 빠른 esbuild을 사용하여 종속성을 미리 번들로 제공하기 때문에 좋습니다. 그러나 기본적으로 Vite는 NodeJS 변수shims를 포함하지 않으므로 사용자가 추가해야 합니다.
vite.config.[js/ts] 파일을 만들고 SvelteKit 프로젝트에 추가하고 전역 권한을 정의하면 됩니다.

// vite.config.ts
export default defineConfig({
  define: {
    "global": {},
  },
});

별로...



이것은 일반적으로 괜찮지만 SvelteKit은 Vite 구성 파일로 공을 재생하지 않고 대신 변경 사항을 svelte.config.file 에 넣도록 요청합니다. 말이 되는 것 같아요🤷?

svelte 구성이 vite 구성과 다르게 보인다는 사실을 제외하고는 기본 구성 개체에 복사하여 붙여넣는 것만큼 간단하지 않습니다. 오류의 링크를 따라가면 여기로 이동합니다 -> https://kit.svelte.dev/docs#configuration-vite 그다지 유용하지 않습니다. 그러나 약간의 인터넷 검색 후에 다른 주제이지만 this much more helpful example을 찾았지만 충분했습니다.

그리고... 그것이 아래 작업 솔루션으로 이어지는 것입니다.

// svelte.config.js
const config = {
    preprocess: preprocess(),
    kit: {
        adapter: adapter(),
        target: '#svelte',
        // add this 👇
        vite: {
            define: {
                global: {}
            }
        }
    }
};

나는 또한 내가 Svelte를 처음 접한다는 것을 언급해야 하므로 누군가가 댓글에서 나를 불러 훨씬 더 우아한 솔루션을 추가할 가능성이 큽니다 😜

출처

https://github.com/vitejs/vite/issues/2778
https://github.com/vitejs/vite/issues/728
https://github.com/bevacqua/dragula/issues/602
https://kit.svelte.dev/faq#aliases