shinokada / svelte-5-ui-lib

A UI library crafted for Svelte 5: Runes
https://svelte-5-ui-lib.codewithshin.com
MIT License
104 stars 13 forks source link

`npm run dev` shows different output to running `bun run start` #28

Closed no1melman closed 2 weeks ago

no1melman commented 2 weeks ago

Describe the bug

This is what it's supposed to look like when running npm run dev

image

But when run from a container use bun run start it looks like this:

image

The dockerfile looks like this:

FROM node:20.17.0-alpine3.20 AS deps

WORKDIR /app

COPY package.json package-lock.json .npmrc /

RUN npm ci 

COPY . .

# RUN npm run check

FROM deps AS test

RUN npm run testci

FROM deps AS build

# ARG NODE_ENV=development

RUN npm run build

FROM oven/bun:1.1.29-alpine AS publish

COPY --from=build /app/build /out/

WORKDIR /out

ENTRYPOINT [ "bun", "run", "start" ]

tailwind.config looks like this:

import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    './src/**/*.{html,js,svelte,ts}',
    './node_modules/svelte-5-ui-lib/**/*.{html,js,svelte,ts}',
    './node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}'
  ],

  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e'
        },
        secondary: {
          50: '#FFF5F2',
          100: '#FFF1EE',
          200: '#FFE4DE',
          300: '#FFD5CC',
          400: '#FFBCAD',
          500: '#FE795D',
          600: '#EF562F',
          700: '#EB4F27',
          800: '#CC4522',
          900: '#A5371B'
        }
      }
    }
  },

  plugins: [typography, forms]
};

svelte.config.js looks like this:

import adapter from 'svelte-adapter-bun';

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

export default config;

vite.config.js looks like this:

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

export default defineConfig({
    plugins: [sveltekit()],

    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

my package.json:

{
  "name": "ui",
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite dev",
    "build": "svelte-kit sync && vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
    "format": "prettier --write .",
    "lint": "prettier --check .",
    "test:unit": "vitest",
    "testci": "vitest run",
    "test": "npm run test:unit -- --run"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "^3.0.0",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@tailwindcss/forms": "^0.5.9",
    "flowbite-svelte-icons": "^2.0.2",
    "@tailwindcss/typography": "^0.5.15",
    "autoprefixer": "^10.4.20",
    "prettier": "^3.3.2",
    "prettier-plugin-svelte": "^3.2.6",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "svelte": "^5.0.0",
    "svelte-check": "^4.0.0",
    "svelte-adapter-bun": "^0.5.2",
    "typescript": "^5.0.0",
    "tailwindcss": "^3.4.9",
    "vite": "^5.0.3",
    "vitest": "^2.0.4"
  },
  "dependencies": {
    "svelte-5-ui-lib": "^0.9.24",
    "js-yaml": "^4.1.0",
    "json-schema": "^0.4.0",
    "monaco-editor": "^0.49.0",
    "monaco-yaml": "^5.2.0"
  }
}

It really looks like something between the dev build and production build

Reproduction

I can't do a reproduction through stackblitz or anything.

But, it simply is just running npm run dev compared to building the container and running it from there.

I've tried switching out the adapter for just the node adapter and get the same result.

So I assume this is something in the vite build process which is causing problems

So, I've just tried just doing npm run preview in the docker image, and that gives the bad output, where as doing npm run preview locally gives the correct output...

Version and System Info

System:
    OS: Linux 6.11 NixOS 24.11 (Vicuna) 24.11 (Vicuna)
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
    Memory: 85.98 GB / 93.87 GB
    Container: Yes
    Shell: 5.2.32 - /run/current-system/sw/bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nix-profile/bin/node
    npm: 10.8.2 - ~/.nix-profile/bin/npm
  Browsers:
    Brave Browser: 129.1.70.123
  npmPackages:
    @sveltejs/kit: ^2.0.0 => 2.7.3
    svelte: ^5.0.0 => 5.1.4
    svelte-5-ui-lib: ^0.9.24 => 0.9.24
    vite: ^5.0.3 => 5.4.10
no1melman commented 2 weeks ago

was a problem in the .dockerignore, i wasn't ignoring the .svelte-kit and also, I wasn't copying package json to the right place