The statement import p5 from 'p5'; won’t work in a browser environment, b/c it lacks the extension name for the imported file.
That is, it needs to be ‘p5.js’ instead of just ‘p5’.
In the future, browsers may be able to accept extension-less filenames.
Also, even using the full filename, we’d still need to add its path to its name.
That is, special folders like ‘node_modules/’ are meaningless to a browser.
So instead of just ‘p5.js’, we’re gonna need something like:
import p5 from '/node_modules/p5/lib/p5.js';.
And lastly, both ‘p5.js’ & ‘matter-js.js’ are plain JS library files, not actual ES6 modules; b/c they lack the keyword statements export or import inside them.
Therefore we can’t use the keyword import on neither of them b/c they don’t expose anything using actual ES6 syntax!
Just assume both p5 & Matter are already available in the global context once they’re loaded like this:
<script defer src=https://Unpkg.com/p5></script>
<script defer src=https://Unpkg.com/matter-js></script>
My guess your project got bundled utilities which are able to convert your bare-bones component into an actual browser-runnable code; which makes them a challenge for me to debug.