search

GriffinJohnston / ldrs

Modern, tree-shakeable loader & spinner web components. Made with CSS, HTML and SVG. https://uiball.com/ldrs
MIT License
1.75k stars 54 forks source link

Trying to use it with next.js get error #1

Closed nikitavoloboev closed 2 years ago

nikitavoloboev commented 2 years ago

I only imported it with import { Ring } from "@uiball/loaders" and then tried to use it. I get this error though:

image

Any idea what might cause it?

GriffinJohnston commented 2 years ago

Hi Nikita - this is happening because loaders are exported with ESM syntax to allow for tree-shaking, and Next doesn't transpile imported modules by default. Try https://www.npmjs.com/package/next-transpile-modules. There's more detail here as well: https://stackoverflow.com/a/65939797

Let me know if that works for you!

nikitavoloboev commented 2 years ago

That worked, thank you ♥️

GriffinJohnston commented 2 years ago

Glad to hear it! I should probably put a note in the docs. Thanks for bringing that up!

nikitavoloboev commented 2 years ago

It would also be great if you can add TS types to the package if you get time. I have to // @ts-ignore the import. Not critical but would be nice. 😺

GriffinJohnston commented 2 years ago

Ah yea of course. I'll absolutely add types. I hate having to // ignore things

GriffinJohnston commented 2 years ago

@nikitavoloboev Types added with v1.2.3

GriffinJohnston commented 2 years ago

@nikitavoloboev With v1.2.6 using next-transpile-modules should no longer be necessary as long as you're using Next 12+ — give it a try if you don't mind, and let me know if it's working for you!

nikitavoloboev commented 2 years ago

Amazing, thanks a lot for adding it!

nikitavoloboev commented 2 years ago

Just tested it without transpile and it worked. 🎊