SvelteKit: [vite] [postcss] error - Unknown Word

Question

I'm currently developing a desktop application using Tauri, SvelteKit, & Tailwind. When I run a dev build of my application I frequently get the following error:

    [vite] Internal server error: [postcss] /home//src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11: Unknown word
  Plugin: vite:css
  File: /home/myProj/src/routes/test/[mode]/+page.svelte?svelte&type=style&lang.css:2:11
  1  |  <script lang="ts">
  2  |          import { appWindow, LogicalSize } from '@tauri-apps/api/window';
     |             ^
  3  |          appWindow.setSize(new LogicalSize(700, 404));
  4  |          import { rand } from '$lib/math';
      at Input.error (/home/myProj/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/input.js:148:16)
      at Parser.unknownWord (/home/myProj/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:540:22)
      at Parser.other (/home/myProj/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:164:12)
      at Parser.parse (/home/myProj/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parser.js:72:16)
      at parse (/home/myProj/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/home/myProj/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/home/myProj/node_modules/.pnpm/[email protected]/node_modules/postcss/lib/processor.js:28:14)
      at compileCSS (file:///home/myProj/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:38356:14)
      at async TransformContext.transform (file:///home/myProj/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:37810:56)
      at async Object.transform (file:///home/myProj/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:43387:30)

If I reload the browser window or save a file and hot reload then the error goes away. Additionally, the error doesn't always occur when I launch the application. I'd say its ~70% of the time.

My config files for my stack are:

// postcss.config.cjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

// tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {}
    },
    plugins: [require('daisyui')],
    daisyui: {
        themes: ['light', 'dark']
    }
};

// vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()]
});

// svelte.config.js

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
import importAssets from 'svelte-preprocess-import-assets';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    
    kit: {
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    },
    // Consult https://kit.svelte.dev/docs/integrations#preprocessors
    // for more information about preprocessors
    preprocess: [importAssets(), vitePreprocess()],
};

export default config;

If the error doesn't occur when initially launching the application (~70% chance) then there's another high chance it will appear two pages later (home->page1->page2). The code for my home page and page2 are:

<script lang="ts">
    import { routes } from '$lib/router';
    import { setItem } from '$lib/sessionStorage';
    import { kanaCharacters, type Syllabary } from '$lib/syllabary';
    import { appWindow, LogicalSize } from '@tauri-apps/api/window';
    appWindow.setSize(new LogicalSize(350, 500));

    function onTestClicked(mode: Syllabary) {} // body cut
</script>

<div id="container" class="absolute w-screen h-[calc(100vh-30px)]">
    <div class="flex flex-col items-center justify-center h-[390px] m-10">
        <h1 class="text-3xl mb-2">Kana-Learn</h1>
        <a href={routes.practice} class="btn btn-primary mb-2 w-1/2">Practice</a>
        <div class="dropdown dropdown-end mb-2 w-1/2">
            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
            <span tabindex="0" class="btn btn-primary w-full">Test</span>
            <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
            <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box w-52">
                <li><button on:click={(e) => onTestClicked('hira')}>Hiragana</button></li>
                <li><button on:click={(e) => onTestClicked('kata')}>Katakana</button></li>
            </ul>
        </div>
        <a href={routes.stats} class="btn btn-primary mb-2 w-1/2">Stats</a>
    </div>
</div>

<style>
    #container {
        background-image: url($lib/assets/bg-homescreen.jpg);
    }
</style>

<script lang="ts">
    import { appWindow, LogicalSize } from '@tauri-apps/api/window';
    appWindow.setSize(new LogicalSize(700, 404));
    import { rand } from '$lib/math';
    import type { PageData } from './$types';
    import { convert } from 'jp-conversion';
    import { getItem } from '$lib/sessionStorage';
    import { kanaCharacters } from '$lib/syllabary';

    export let data: PageData;

    const { mode } = data;
    const charset = getItem('keyset', true) ?? kanaCharacters['hira'];

    let keyState = '';
    let resetKeyState = false;

    const sentence: string[] = [];
    let correct: boolean[] = [];


    function onKeyDown(e: KeyboardEvent) {} // body cut
</script>

<div id="container" class="p-8 bg-contain h-[calc(100vh-30px)]">
    <div
        id="content"
        class="flex flex-col items-center justify-between rounded-lg border-2 p-1 pl-2 border-gray-800 h-full bg-gray-900 text-[36px] leading-10 text-white"
    >
        <div class="NotoSansMono w-full">{@html text}</div>
        <div class="mt-2 flex items-center h-full">
            <div class="p-1 w-16 h-10 text-2xl text-center bg-slate-800 border border-gray-300 rounded">
                {keyState}
            </div>
        </div>
    </div>
</div>

<svelte:window on:keydown|preventDefault={onKeyDown} />

<style>
    #container {
        background-image: url($lib/assets/bg-outer-sentence.jpg);
    }
</style>

The only major difference between these 2 pages and the rest are the use of a background-image but removing those styles doesn't stop the error from happening. I've checked many other posts on SO and Issues on various repos but I haven't been able to resolve this. Help would be greatly appreciated.

Answer 1

I had a fairly similar situation: a Tauri (2.0.0-beta.17) project with SvelteKit, and tried to add Tailwind. In my case, the error ocurred consistently, not just sporadically, when running npm run tauri dev. I managed to narrow it down to Vite activating postcss support (i.e. it seeing that postcss.config.js present).

In the end, I tried to run npm run build, and from that point on npm run tauri dev worked without problems. I don't know what exactly was the cause though, which is of course unsatisfying.