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

Loading pinecone-router-middleware-views and pinecone-router as es6 modules doesn't work #13

Closed
rogiersplayground opened this issue Jan 13, 2023 · 2 comments
Closed

Loading pinecone-router-middleware-views and pinecone-router as es6 modules doesn't work #13

rogiersplayground opened this issue Jan 13, 2023 · 2 comments

Comments

@rogiersplayground
Copy link

Describe the bug
I'm going for a setup where I load all my libraries in as es6 modules in my main.js.
So far I was able to load in Alpine. Like: import Alpine from 'alpinejs'. And i've added pinecone-router-middleware-views and pinecone-router. But then it won't route me to the relevant view.

To Reproduce
Steps to reproduce the behavior:
This is my main.js

import './style.css'

// load this middleware
import 'pinecone-router-middleware-views'
// Load router
import 'pinecone-router';

import Alpine from 'alpinejs'
 
window.Alpine = Alpine

Alpine.start()

This is what I have in my index.html

<body>
<div x-data="router()" x-router>
      <template x-route="/" x-view="/views/home.html"></template>
      <template x-route="/hello/:name" x-view="/views/hello.html"></template>
      <template x-route="notfound" x-view="/404.html"></template>
    </div>

    <div id="app" x-data></div>

Expected behavior
I expect that the /views/home.html is loaded for the root.
But this is not working.

But when I add the CDN link <script src="https://cdn.jsdelivr.net/npm/pinecone-router@2.x.x/dist/router.min.js"></script>, it is working. But i'd prefer to bundle my js.

Desktop (please complete the following information):

  • Ubuntu 22.10
  • Browser: chrome 108
@rehhouari
Copy link
Member

Hello, I just tried this with Vite and you're right it doesn't work by just importing pinecone-router directly I have missed that part in the README.
Like other Alpine.js plugins you need to add the router using Alpine.plugin()
here is how your main.js would look

// middlewares arent plugins import them directly.
import 'pinecone-router-middleware-views'
// this is an Alpine.js plugin so import the exported PineconeRouter
import PineconeRouter from 'pinecone-router';
import Alpine from 'alpinejs'

window.Alpine = Alpine
// add PineconeRouter as an Alpine.js plugin
Alpine.plugin(PineconeRouter)
Alpine.start()

Thanks for pointing it out and sorry for the inconvenience, I have update the readme accordingly.

@rehhouari
Copy link
Member

Closing for inactivity feel free to comment again if issue isnt solved. thank you

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
2 participants
@rehhouari @rogiersplayground