search

themesberg / flowbite-svelte

Official Svelte components built for Flowbite and Tailwind CSS
https://flowbite-svelte.com
MIT License
2.13k stars 263 forks source link

SSR Migration, several errors #112

Closed Gildedter closed 2 years ago

Gildedter commented 2 years ago

Describe the bug I recently moved to SSR via sveltejs/adapter-auto, after dropping in my existing src folder I'm getting these errors:

* flowbite doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
* <Any flowbite-svelte component> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

On the second error I tried adding this lines to my config: (as per this workaround, didn't really work)

optimizeDeps: {
    include: ['flowbite-svelte']
}

but it just produces this new error: Unknown file extension ".svelte"

Steps to reproduce the behavior:

  1. install @sveltejs/adapter-auto
  2. use it as the adapter on svelte.config.js
  3. install and call flowbite-svelte components on any route
  4. See error

Code samples

/// svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

// omitted env setup script

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: [
        preprocess({
            postcss: true
        })
    ],
    kit: {
        adapter: adapter(),
        vite: {
            server: {
                port: env.ASPNETCORE_HTTPS_PORT ? env.ASPNETCORE_HTTPS_PORT : '44447',
                https: {
                    ca: certFilePath,
                    key: keyFilePath
                },
                headers: {
                    Connection: 'Keep-Alive'
                },
                proxy: {
                    '/api': {
                        target: env.ASPNETCORE_URLS?.split(';')[0] ?? 'https://localhost:44447/',
                        changeOrigin: true,
                        rewrite: (path) => path.replace(/^\/api/, ''),
                        secure: false
                    }
                }
            },
            // optimizeDeps: {
            //  include: ['flowbite-svelte']
            // }
        }
    }
};

export default config;

Expected behavior Call flowbite-svelte components normally without errors

Gildedter commented 2 years ago

Also on tailwind.config.cjs, there's this ts error

Could not find a declaration file for module 'flowbite/plugin'. '<PROJECT PATH>/node_modules/flowbite/plugin.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/flowbite` if it exists or add a new declaration (.d.ts) file containing `declare module 'flowbite/plugin';`ts(7016)
  /// tailwind.config.cjs contents

  const config = {
    content: [
        './src/**/*.{html,js,svelte,ts}',
        './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
    ],

    theme: {
        extend: {}
    },

    plugins: [require('flowbite/plugin')],
    darkMode: 'class'
};

module.exports = config;
shinokada commented 2 years ago

Regarding the error about * flowbite doesn't appear to be written in CJS, ..., it doesn't affect Flowbite-Svelte. It generates from Flowbite JS files and we don't use it. You just ignore it for now and you don't need optimizeDeps: either. Regarding Unknown file extension ".svelte" error, there must be an issue with your set up.

I suggest start a new project and install Flowbite-Svelte and your components on the top of that. Is it feasible?

Gildedter commented 2 years ago

Okay so I removed the optimizedDeps, and ran npm run build && npm run preview, then click on any parent component I get a variant of this error:

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for <PROJECT PATH>\node_modules\flowbite-svelte\accordions\AccordionItem.svelte
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for <PROJECT PATH>\node_modules\flowbite-svelte\accordions\AccordionItem.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for <PROJECT PATH>\node_modules\flowbite-svelte\accordions\AccordionItem.svelte

My package.json looks like this:

{
    "name": "svelte-app",
    "version": "1.0.0",
    "scripts": {
        "dev": "svelte-kit dev",
        "build": "svelte-kit build",
        "package": "svelte-kit package",
        "preview": "svelte-kit preview",
        "test": "playwright test",
        "check": "svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
        "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
    },
    "devDependencies": {
        "@iconify/svelte": "^2.2.1",
        "@playwright/test": "^1.19.1",
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "@typescript-eslint/eslint-plugin": "^5.10.1",
        "@typescript-eslint/parser": "^5.10.1",
        "autoprefixer": "^10.4.4",
        "date-picker-svelte": "^2.0.0",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-svelte3": "^3.2.1",
        "jspdf": "^2.5.1",
        "n2words": "^1.11.1",
        "postcss": "^8.4.12",
        "postcss-load-config": "^3.1.4",
        "prettier": "^2.5.1",
        "prettier-plugin-svelte": "^2.5.0",
        "svelte": "^3.44.0",
        "svelte-check": "^2.2.6",
        "svelte-headless-table": "^0.10.2",
        "svelte-preprocess": "^4.10.5",
        "tailwindcss": "^3.0.23",
        "tslib": "^2.3.1",
        "typescript": "~4.5.4",
        "wretch": "^1.7.10",
        "xlsx": "https://cdn.sheetjs.com/xlsx-0.18.9/xlsx-0.18.9.tgz"
    },
    "type": "module"
}

its a new project where I just re-installed the same dependencies then dropped in the entire src folder (after some minor bug fixes)

Gildedter commented 2 years ago

If I run npm run dev, I get this: image image

shinokada commented 2 years ago

Is it possible to share your repo?

Gildedter commented 2 years ago

so I tried installing it as a non-dev dependency, not my package.json looks like this:

{
    "name": "svelte-app",
    "version": "1.0.0",
    "scripts": {
        "dev": "svelte-kit dev",
        "build": "svelte-kit build",
        "package": "svelte-kit package",
        "preview": "svelte-kit preview",
        "test": "playwright test",
        "check": "svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
        "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
    },
    "devDependencies": {
        "@hurtigruten/svelte-table": "^2.0.3",
        "@iconify/svelte": "^2.2.1",
        "@playwright/test": "^1.19.1",
        "@sveltejs/adapter-auto": "next",
        "@sveltejs/kit": "next",
        "@typescript-eslint/eslint-plugin": "^5.10.1",
        "@typescript-eslint/parser": "^5.10.1",
        "autoprefixer": "^10.4.4",
        "date-picker-svelte": "^2.0.0",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-svelte3": "^3.2.1",
        "jspdf": "^2.5.1",
        "n2words": "^1.11.1",
        "postcss": "^8.4.12",
        "postcss-load-config": "^3.1.4",
        "prettier": "^2.5.1",
        "prettier-plugin-svelte": "^2.5.0",
        "svelte": "^3.44.0",
        "svelte-check": "^2.2.6",
        "svelte-headless-table": "^0.10.2",
        "svelte-preprocess": "^4.10.5",
        "svelte-typeahead": "^4.2.2",
        "tailwindcss": "^3.0.23",
        "tslib": "^2.3.1",
        "typescript": "~4.5.4",
        "wretch": "^1.7.10",
        "xlsx": "https://cdn.sheetjs.com/xlsx-0.18.9/xlsx-0.18.9.tgz"
    },
    "type": "module",
    "dependencies": {
        "flowbite": "^1.4.7",
        "flowbite-svelte": "^0.19.7"
    }
}

while the site looks like this: image

Gildedter commented 2 years ago

Is it possible to share your repo?

Can't, its a migration of our system, the package works so long as its not installed as a dev dependency, from my testing, unsure why tho

Edit: working now even as a dev dependency, but the styles (css) aren't applying correctly Edit 2: everything works again, I fixed it by deleting .svelte-kit and resetting my node_modules & package.lock.json files

Gildedter commented 2 years ago

So the issue was, my template was using an outdated version of SvelteKit, but updating to the latest (at the time of writing 1.0.0-next.354) introduces a bug where the vite dev server wouldn't apply the --port flag correctly and would produce a different error, so that was fun... I had to lock it to 1.0.0-next.350, then regenerate my pacakage.lock.json & delete .svelte-kit to fix the issues