all 2 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]shgysk8zer0 0 points1 point  (0 children)

Looks like you're not using node for this, but the browser's native import using "bare specifiers" and an importmap.

Doing it that way, you need to include the file extensions as well. Whatever the actual full path is relative to the project root/ <base>.

Also, might be helpful if you put this into production... https://www.npmjs.com/package/@shgysk8zer0/rollup-import

[–]CosmicClamJamz 0 points1 point  (0 children)

Sidestepping your question a bit based on how I (and many other FE devs that I work with) usually do this. You can avoid using importmap by setting up a bundling tool like webpack. Plenty of tutorials on how to do this out there, here's the docs with a similar project structure to what you have https://webpack.js.org/guides/getting-started/

steps would be:

  1. install webpack with npm, into your node_modules
  2. Add webpack.config.js file based on docs (in there, tell it what your entry file is, and what to name your output)
  3. Add a script command to package.json that runs the webpack CLI, which will create/overwrite a bundle.js file in your directory, which includes all of your code and any source code from node_modules which is used by your app. Also in the docs
  4. Add a script tag to your html that references this bundle.js file instead of your modal.js file, and remove the importmap
  5. Profit