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.