Sveltekit & TailwindCSS - Getting ERR_MODULE_NOT_FOUND for TailwindCSS package for SSR in Firebase Hosting

Question

I tried to deploy Sveltekit project in firebase hosting am facing below error when I enables SSR for my sveltekit project

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'tailwindcss' imported from /workspace/entries/pages/_page.svelte.js
    at packageResolve (node:internal/modules/esm/resolve:853:9)
    at moduleResolve (node:internal/modules/esm/resolve:910:20)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
2024-03-10T09:19:41.621719Z ? ssrhomeappname:   code: 'ERR_MODULE_NOT_FOUND'
2024-03-10T09:19:41.621725Z ? ssrhomeappname: }

Site is working properly when I disabled SSR and deploying in Firebase hosting.

export const ssr = false;
export const prerender = false;

It works well when I tested locally with production build. This issue occurs only when I Hosted in Firebase-Hosting it's not working

Here is my Firebase.json file:

{
  "hosting": {
    "site": "home-sitename",
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1",
      "maxInstances": 2
    }
  }
}

Here is my tailwind.config.js file

/** @type {import('tailwindcss').Config} */
import { fontFamily as _fontFamily } from "tailwindcss/defaultTheme";
import scrollbarHide from 'tailwind-scrollbar-hide'
import colors from "tailwindcss/colors";
const plugin = require('tailwindcss/plugin')

export default {
  
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        inter: ["Inter", ..._fontFamily.sans],
      },

      fontWeight:{
        inherit: 'inherit'
      },

      fontSize: {
        "xx+": ["0.600rem", "0.755rem"],
        tiny: ["0.625rem", "0.8125rem"],
        "tiny+": ["0.6875rem", "0.875rem"],
        "xs+": ["0.8125rem", "1.125rem"],
        "sm+": ["0.9375rem", "1.375rem"],
       
        // '3xl' : ["2rem"],
        // '2xl' : ["1.5rem"],
        // 'xl' : ["1.17rem"],
        // 'lg' : ["1rem"],
        // 'base' : ["0.83em"],
        'sm' : ["0.875rem", '1.5'],
      },
      colors:{
        'primary-top': '#0b00db',
        'primary': '#0b00db',
        'primary-pressed': '#0859D0',
        'primary-hover': '#148cfc',
        'primary-focus': '#148cfc',
        'primary-light' :'#637EFF',
        'secondary' : '#9591F2',
        'text-primary': '#273266',
        'background' : '#f5f5f5',
        'on-primary' : '#ffffff',
        'scrollbar' : colors.slate[400],
        'scrollbarHover' : colors.slate[500],
        ...colors
      },
   
    },

   
  },
  plugins: [scrollbarHide],
}

Here is my svelte config file:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @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()
    },
    preprocess: vitePreprocess()

};

export default config;

Tailwind and sveltekit versions:

"@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "tailwindcss": "^3.4.1",
"autoprefixer": "^10.4.17",

Answer 1

It seems like firebase hosting not completely supporting Sveltekit.

I changed my hosting from firebase to Google cloud run that worked here I have added the steps I followed

First I removed adapter auto and added adapter node from my dependency

npm uninstall @sveltejs/adapter-auto

npm install -D @sveltejs/adapter-node

Importing adapter-node in svelte config file

import adapter from '@sveltejs/adapter-node';


export default {
   kit: {
       adapter: adapter(),
   }
};

Added DockerFile and .dockerignore file as suggested by Google official documents

additionally I have private repository dependency. added configuration for that too in Docker file.

After that I deployed using Google cloud run VSCode plugin. In google cloud run site worked as expected.