baklava icon indicating copy to clipboard operation
baklava copied to clipboard

Published 20 hours ago • verified publisher icon Trendyol

Using Baklava With NextJS

Open BerkinAKKAYA opened this issue 1 year ago • 6 comments

Describe the bug We get the error SyntaxError: Cannot use import statement outside a module in our Next project. It acts like we didn't import the CDN, but only if we go to that page directly or refresh the page. It works if we navigate to that page from another page.

For example the Users page is using Baklava but the Home page does not. If i first go to the Home and the navigate to Users, it works. If i refresh the page or directly go to /users, it gives the error.

Solutions We Tried

  • Disabling SSR with export default dynamic(() => Promise.resolve(App), { ssr: false })
  • Using <Script> component with strategy='beforeInteractive',

To Reproduce

  • Create a Next project
  • Include CDN in _app.tsx, <Head> element
  • Install baklava with yarn add @trendyol/baklava@beta
  • Use baklava in a page
  • Go to that page and refresh it

Screenshots image

BerkinAKKAYA avatar Mar 31 '23 12:03 BerkinAKKAYA

This is probably because we use ESM bundles for Baklava. Maybe you can check how to use ESM packages in Next.js.

For the SSR:

We didn't try SSR yet, but Lit has some tools for SSR: https://www.npmjs.com/package/@lit-labs/ssr

We have an on-going issue about SSR: #334. I don't know if @leventozen can add anything for now?

muratcorlu avatar Mar 31 '23 12:03 muratcorlu

@BerkinAKKAYA I believe this problem may be solved with #570 which is released with v2.1.0-beta.7. Can you try with that version?

muratcorlu avatar May 08 '23 14:05 muratcorlu

Hi @muratcorlu, the error is changed! It works when i go to the page i use Baklava from homepage, but if i reload the page i get the error "ReferenceError: customElements is not defined" 😔

BerkinAKKAYA avatar May 09 '23 07:05 BerkinAKKAYA

Do you import baklava.js and default.css from CDN in the main html file?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/themes/default.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/baklava.js"></script>

PS: Baklava React wrappers that you import from baklava-react module only includes wrappers, not web component itself.

muratcorlu avatar May 09 '23 07:05 muratcorlu

And which version do you use currently?

muratcorlu avatar May 09 '23 11:05 muratcorlu

I installed 2.1.0-beta.7, like this:

yarn add @trendyol/[email protected]

And imported in _document.tsx like this:

<Head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/themes/default.css" />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/[email protected]/dist/baklava.js"></script>
     ...

Works when i come from another page, this error when i refresh the page: image

BerkinAKKAYA avatar May 12 '23 08:05 BerkinAKKAYA