Error deploying to Vercel

[ejgutierrez74]

Topic

Not showing p5,js sketches as Vercel gives an not defined error, in Vite works fine.
Also would like to go to myrpoject/docs and show the jsdoc documentation.

Load my project, and sketches are not shown…

[vercel.com] (https://vercel.com/login?next=%2Fejgutierrez74s-projects%2Fpacman2024windows)
[Dashboard] (https://vercel.com/login?next=%2Fejgutierrez74s-projects%2Fpacman2024windows)

With vite works fine, but in vercel i got an error when i deploy to Vercel

Uncaught ReferenceError: p5 is not defined
    Nn https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1776
    An https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1
    <anonymous> https://pacman2024windows.vercel.app/assets/index-Df26wdtU.js:1776

As vite in local i want to access my index.html showing some p5.js sketches, and then if i go to myproject/docs show de index of documentation.

Structure of my project;

This is the caling of scripts in index.html in root project:

 <script type="module" src="js/libraries/p5.min.js"></script>
    <!--Carreguem moduls-->

    <!--Carreguem sketch-->
    <script type="module" src="/js/sketch.mjs"></script>
    <script type="module" src="/js/secondsketch.mjs"></script>

I really need help im a teacher in vocational education, and with my students we are stuck.

Thanks

[limzykenneth]

script type="module" by definition is scoped which means multiple JS files included with script type="module" will not be able to access variables declared in the others, ie. the p5 constructor defined in p5.min.js will not be visible to sketch.mjs because of the scope.

For p5.js 1.x, using the library with ES modules is not supported and not guaranteed to work, it is recommended to use regular script tag without type="module".

[ejgutierrez74]

Then sketch.js and secondscketch.js are recommended to use type="module" or not...A i import classes and functions from other files i think is better to call them modules.

Also without type="module" do you recommend using defer or better await in script "calling":
<scritpt await src="/js/libraries/p5.min.js" ...i suppose p5.js and p5.sound.js would act the same way....

One last question...whats the difference between p5.min and p5.js and p5.sound and p5.min.sound....

Thanks

[limzykenneth]

It is not recommended to use type="module" with p5.js, including the sketch code as it will likely not work. If you are importing classes and functions from other modules, you need to have a build tool like vite to transform it into something that does not use ES modules.

The async and defer attributes are also not recommended. They likely will not make any difference, if they don't out right break things.

The difference between the .min version and the regular version is that in the .min version, all extra characters have been removed for reduced file size at the cost of making the file not human readable, the Friendly Error System (FES) is also not included in the .min version. In short, in development, you will likely want to use the regular p5.js file while deploying/publishing your sketch for general users you will likely want to use p5.min.js for a slightly faster experience instead.

[ejgutierrez74]

Why you close if its not solved

[limzykenneth]

@ejgutierrez74 There hasn't been a reply in a while so I would have to assume the issue has been resolved at some point, also the solution has already been provided in that type="module", async, and defer are all not recommended to be used with p5.js, unless there is still another question?

[ejgutierrez74]

Yes but if you make this in local it works fine. if you dont put type module in p5 it doesnt work in vite local. So you have to add it and it works fine in local. The problem i dont think its async or defer is that some structure that works fine in local in vite, its not "well" deployed to vercel

[limzykenneth]

You don't have to use type module with vite, only if you are using ES modules, which doesn't work with p5.js at the moment. It may be possible to use it with instance mode if you really have to use ES modules but it is not tested by us to work.

[ejgutierrez74]

I tried several times, the same code without type module doesnt work in Vite, the same code with type module works...

[limzykenneth]

Your code is probably using ES modules and you may need to refactor it to not use ES module for it to work. It would be easier to debug if you can share code and the Discord or the forum are likely the better place to get help with your code.