I've got frontend and backend. From backend I get prerendered html (Symfony form) which includes script with source tag. Origin is localhost:8001.
<html>
<head>
...
</head>
<body>
...
<div class="container">
{% block javascripts %}
<script type="module" src="http://localhost:8020/build/form_generator/script.js"></script>
{% endblock %}
</div>
</body>
</html>
In frontend (localhost:8020) script.js is located in Public folder. The script loads fine, but inside script I want to load another module from frontend (Select2, which is installed to node_modules) but I am not able to load it correctly. Select2 is imported correctly within other scripts in frontend. script.js:
/** @module script*/
import 'select2'; // gives log error 1
import select2 from "../../../node_modules/select2/dist/js/select2"; // gives log error 2
log error 1: Uncaught TypeError: Failed to resolve module specifier "select2". Relative references must start with either "/", "./", or "../".
log error 2: GET http://localhost:8020/node_modules/select2/dist/js/select2 net::ERR_ABORTED 404 (Not Found)
Modules loaded by the browser cannot use Node.JS module resolution rules.
They do not have access to the file system. They cannot search a node_modules directory.
You need to:
e.g.
import select2 from '/static/js/select2.js';
Alternatively, use a bundler (such as Webpack or Parcel) which can do Node.js module resolution to bundle all the modules up into a single JS file that you can load as a non-module.