Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Not able to set up Flowbite on SvelteKit #67

Closed
shinokada opened this issue Jan 22, 2022 · 14 comments
Closed

Not able to set up Flowbite on SvelteKit #67

shinokada opened this issue Jan 22, 2022 · 14 comments

Comments

@shinokada
Copy link
Contributor

Describe the bug

I'm trying to install Flowbite on SvelteKit.
When I run npm run dev, I get an error:

document is not defined
ReferenceError: document is not defined
    at Object.745 (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:17:1)
    at __webpack_require__ (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:138:41)
    at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:151:16
    at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2245:3
    at Object.<anonymous> (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2247:12)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)

To Reproduce

Install SvelteKit:

npm init svelte@next flowbite

Install Tailwind Css and Flowbite:

cd flowbite
npm install
npx svelte-add@latest tailwindcss
npm i @themesberg/flowbite

Update the TailwindCSS config.

In the tailwind.config.cjs file:

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

  theme: {
    extend: {},
  },

  plugins: [
     require('@themesberg/flowbite/plugin')
  ],
};

module.exports = config;

Adding flowbite to routes/__layout.svelte:

<script>
  import "../app.css";
  import "@themesberg/flowbite";
</script>

<slot />

Expected behavior

No error.

Screenshots
image

Desktop (please complete the following information):

  • OS: macOS v12.1
  • Browser chrome, brave
@shinokada
Copy link
Contributor Author

shinokada commented Jan 26, 2022 •
edited

For now, this is my solution. But I hope there will be a better solution.

  1. In the src/app.html, I add flowbite.min.js just before the body tag.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<link rel="icon" href="%svelte.assets%/favicon.png" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" href="https://unpkg.com/@themesberg/flowbite@1.3.0/dist/flowbite.min.css" />
		%svelte.head%
	</head>
	<body>
		<div id="svelte">%svelte.body%</div>
		<script src="https://unpkg.com/@themesberg/flowbite@1.3.0/dist/flowbite.bundle.js"></script>
	</body>
</html>

@shinokada
Copy link
Contributor Author

I wonder why importing @themesberg/flowbite, works on Svelte REPL.

But it doesn't work with SvelteKit locally.
Does anyone have any ideas?

@shinokada
Copy link
Contributor Author

The above solution doesn't work for page change.
For example, if you have an alert, it won't close the alert.
You need to refresh the page then click the close.

Interactive tabs don't work either unless you refresh the page.

Are there any better solutions?

@shinokada shinokada mentioned this issue Jan 30, 2022
Closed
@shinokada
Copy link
Contributor Author

I requested to add Flowbite to Svelte-add.

svelte-add/svelte-add#182

@zoltanszogyenyi
Copy link
Member

Hey @shinokada,

Thanks for the contribution!

Flowbite is a pretty new library and we're doing our best to keep up with the demand for new components and technology support.

For Q2 this year we expect to launch a standalone React and Vue.js library, and we would have plans for a Svelte integration later this year.

However, if someone else would pull up the sleeves to create an integration for Svelte, they would have our full support and collaboration.

@shinokada
Copy link
Contributor Author

I found the work around for now.

I can solve the problem by adding rel="external" to a link.
Doc

By default, the SvelteKit runtime intercepts clicks on elements and bypasses the normal browser navigation for relative (same-origin) URLs that match one of your page routes. We sometimes need to tell SvelteKit that certain links need to be handled by normal browser navigation. Examples of this might be linking to another page on your domain that's not part of your SvelteKit app or linking to an endpoint.
Adding a rel=external attribute to a link will trigger a browser navigation when the link is clicked.

<a rel="external" href="path">Path</a>

@shinokada shinokada mentioned this issue Feb 1, 2022
Closed
@zoltanszogyenyi
Copy link
Member

We now have a Flowbite Svelte library available.

@codinkai
Copy link

codinkai commented Apr 5, 2022

That's awesome!

But, it does not work in my case.
I have followed the instructions described in Method 1 on https://flowbite.com/docs/getting-started/svelte/, added a new accordion.svelte file under src/routes and pasted the first example from https://flowbite.com/docs/components/accordion/.
When I run the project, the accordion does not work.

@shinokada
Copy link
Contributor Author

@codinkai If you are using SvelteKit, I recommend using Flowbite-Svelte. It has an Accordion component.
Here is the page how to get started.

@codinkai
Copy link

codinkai commented Apr 6, 2022

Thank you. That does look really promising and I will definitely give it a try.

Anyway, the method 1 described on https://flowbite.com/docs/getting-started/svelte/ seems not work.

@shinokada
Copy link
Contributor Author

Which method are you trying? 1, 2, or 3?

@codinkai
Copy link

codinkai commented Apr 6, 2022

I have followed the instructions of Method 1 and created a file named "accordion.svelte" under src/routes with the contents of the first example https://flowbite.com/docs/components/accordion/. When running with "npm run dev" and accessing it at http://localhost:3000/accordion, the accordion is closed and does not work.

@codinkai
Copy link

codinkai commented Apr 6, 2022

Ohh, I see the examples from the flowbite website are not supposed to work. It works, when I follow the instrucions on https://flowbite-svelte.vercel.app/getting-started with the examples on https://flowbite-svelte.vercel.app/accordions/default.

Very good library :)

@Master-Y0da
Copy link

I can't make this work either....same problem... I followed all steps here: link
and when I visit my starter page.svelte I just see plain html without css style

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@shinokada @codinkai @zoltanszogyenyi @Master-Y0da