[Solved] Offcanvas not defined, te not defined

[christoferd]

Don't know if this is a bug: None of the code from Offcanvas API Javascript code works, however the default Offcanvas demo code works perfectly. TALL stack Any info on how I can troubleshoot this would be greatly appreciated.

Note: I also tried using a button with onclick and the code leading to the same error messages.

To Reproduce Pull repo with example code to current empty folder composer install npm install Run vite/npm asset builder: npm run dev Run PHP server: php artisan serve Test - it works: http://127.0.0.1:8000/ Click on the buttons that are marked as working Open Dev Tools Click on the button that is marked as not working

Expected behavior Expecting "Offcanvas" to be an object that is instantiable from JS Or, "te" (UMD)

Actual behavior Only see errors.

Show your code app.js

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
import { Offcanvas, initTE } from "tw-elements";
initTE({ Offcanvas });
window.Alpine = Alpine;
Alpine.plugin(focus);
Alpine.start();

System:

• OS: Windows 11
• Browser Latest Chrome/Brave
• nodejs v18.16.1

Make sure it is indeed an issue/bug report I searched google for "tailwind elements offcanvas not defined", github discussions and github issues for "not defined"

[juujisai]

I'm not sure if that would help but I have few ideas:

• if your app is using UMD format. you can try importing the package like this: import "tw-elements" or import * as te from "tw-elements
• in some of JS frameworks, dynamic importing of the package helped. For example: const { Offcanvas, initTE } = await import("tw-elements")
• try importing the package when your code loads / mounts. Same as before, I do not have experience with TALL stack, but maybe there is something similar to onMounted from vue or useEffect from react

Does the error show for the initTE method aswell?

[christoferd]

@juujisai Thanks for the tips. None of that managed to work.

I have updated my demo repo to include 2 buttons now. ES / UMD for quicker testing.

Note also - for some reason the ES JS code is now the same as UMD code on the Offcanvas API page under Via JavaScript Wondering now if someone is in the process of testing and fixing :-/

[juujisai]

The code under Via JavaScript is almost the same. The only difference is that in ES format you have to import the Offcanvas as shown in the Import section. In UMD format you don't import the Offcanvas, only the package as a whole. You have to access it from the te variable.

I just downloaded the TE starter and for me everything is working properly (vanilla JS).

We have bunch of integration tutorials on our docs page here: https://tailwind-elements.com/docs/standard/integrations/angular-integration/

Maybe there would be something that would help in your case?

BTW, did you check if console logging any of the te or initTE shows anything? You can even check if dynamic imports after some timeout show anything.

[christoferd]

"BTW, did you check if console logging any of the te or initTE shows anything?"

Interesting, in app.js the objects exist, but not accessible on the web page.

import './bootstrap';
const { Offcanvas, initTE } = await import("tw-elements");
initTE({ Offcanvas });
console.log('initTE', initTE);
console.log('Offcanvas', Offcanvas);

Showing that the console log in app.js works, but then trying to do the same directly in Dev Tools throws an error.

All assets loading correctly

app.js from within Dev Tools

Note this Github repo I linked to in the first post is what I'm using for the tests. https://github.com/christoferd/test-te-li-july-2023

[juujisai]

You won't be able to access defined in app.js variables / imports in a browsers dev tools.

If your console logs inside app.js shows the code so it should be working fine. Does anything show on your local server? Did you try other components?

Other things to check:

• that await import... won't do anything unless you define an async function (I only checked the app.js file)
• try initializing the component via Javascript (new Offcanvas(offcanvasEl))
• use initTE method inside the DOMContentLoaded event (addEventListener("DOMContentLoaded", (event) => { initTE({Offcanvas}) });)
• did you try putting initTE inside setTimeout ? Just to check whether it works after some x time

[christoferd]

@juujisai Thanks, but...

1- When removing "await" I get an error, when using "await import" I do not.

2- That is what I did with the buttons, but Offcanvas is not defined, not an object or anything. Console log Offcanvas fails.

3- "use initTE method inside the DOMContentLoaded event" ... error

4- "initTE inside setTimeout" ... error

FYI Vite is compiling fine

[christoferd]

Fiiiinaaaaalyyyyy fixed the issue.

I don't know why but the variables/consts in app.js need to be set to window scope...

Note: I got the idea from this guide where they specifically set Vapor objects to window level scope.

Can see in and test with the repo linked in the original post.

[christoferd]

Closing because it's solved. Please consider testing the repo and see how the solution fixes the problem. Then perhaps update the documentation for Laravel integration, or Vite integration, or add to a Troubleshooting.