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

Using Baklava With NextJS #508

Open
BerkinAKKAYA opened this issue Mar 31, 2023 · 6 comments
Open

Using Baklava With NextJS #508

BerkinAKKAYA opened this issue Mar 31, 2023 · 6 comments
Milestone
Q2/2024

Comments

@BerkinAKKAYA
Copy link
Contributor

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, element
  • Install baklava with yarn add @trendyol/baklava@beta
  • Use baklava in a page
  • Go to that page and refresh it

Screenshots
image
@muratcorlu
Copy link
Contributor

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
Copy link
Contributor

@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?

@BerkinAKKAYA
Copy link
Contributor Author

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" 😔

@muratcorlu
Copy link
Contributor

muratcorlu commented May 9, 2023 •
edited
Loading

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/baklava@2.0.0/dist/themes/default.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.0.0/dist/baklava.js"></script>

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

@muratcorlu
Copy link
Contributor

And which version do you use currently?

@BerkinAKKAYA
Copy link
Contributor Author

I installed 2.1.0-beta.7, like this:

yarn add @trendyol/baklava@v2.1.0-beta.7

And imported in _document.tsx like this:

<Head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0-beta.7/dist/themes/default.css" />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@trendyol/baklava@2.1.0-beta.7/dist/baklava.js"></script>
     ...

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

@leventozen leventozen added this to the Q2/2024 milestone Dec 27, 2023
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
Q2/2024
Development

No branches or pull requests
3 participants
@muratcorlu @leventozen @BerkinAKKAYA