Basically I'm trying to load React from an external source using an import map (needed because multiple JS files use React). We have an issue where it loads when you first access the page, but if you try to reload it, it fails without any meaningful error. The only error logged is:
Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".
Basically it looks like the browser doesn't load the import map at all. Looking at the network tab confirms that the module JS files are not being fetched. The only way to get it to load again is Ctrl+F5.
In addition, on Firefox (latest version) it's completely broken. Again, no meaningful error.
All browsers are fresh-installed and all extensions disabled.
This is the head section of the file (the file is too big to attach in its entirety):
<!DOCTYPE html><html lang="he" dir="rtl" class=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="color-scheme" content="dark light"/><link rel="preconnect" href=";/><link rel="preconnect" href="; crossorigin="anonymous"/><link rel="modulepreload" href="/assets/entry.client-Bai6OFt8.js"/><link rel="modulepreload" href="/assets/chunk-IR6S3I6Y-Ct8-JFrb.js"/><link rel="modulepreload" href="/assets/with-props-5eOWdupz.js"/><link rel="modulepreload" href="/assets/clsx-B-dksMZM.js"/><link rel="modulepreload" href="/assets/index-B0KV9gXh.js"/><link rel="modulepreload" href="/assets/root-CsemyFcV.js"/><link rel="modulepreload" href="/assets/button-Gtl0NDqm.js"/><link rel="modulepreload" href="/assets/mode-toggle-L9ENPaWS.js"/><link rel="modulepreload" href="/assets/login-CJsWJ0HR.js"/><script type="importmap">{"imports":{"react":";,"react-dom":";,"react-dom/client":";}}</script><script>
(() => {
const theme = window.matchMedia("(prefers-color-scheme: light)").matches
? 'light'
: 'dark';
const cl = document.documentElement.classList;
const dataAttr = document.documentElement.dataset.theme;
if (dataAttr != null) {
const themeAlreadyApplied = dataAttr === 'light' || dataAttr === 'dark';
if (!themeAlreadyApplied) {
document.documentElement.dataset.theme = theme;
}
} else {
const themeAlreadyApplied = cl.contains('light') || cl.contains('dark');
if (!themeAlreadyApplied) {
cl.add(theme);
}
}
const meta = document.querySelector('meta[name=color-scheme]');
if (meta) {
if (theme === 'dark') {
meta.content = 'dark light';
} else if (theme === 'light') {
meta.content = 'light dark';
}
}
})();
</script><link rel="stylesheet" href="/assets/root-DvUHNLVV.css"/><link rel="stylesheet" href=":ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"/></head>
Thank you!
Basically I'm trying to load React from an external source using an import map (needed because multiple JS files use React). We have an issue where it loads when you first access the page, but if you try to reload it, it fails without any meaningful error. The only error logged is:
Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".
Basically it looks like the browser doesn't load the import map at all. Looking at the network tab confirms that the module JS files are not being fetched. The only way to get it to load again is Ctrl+F5.
In addition, on Firefox (latest version) it's completely broken. Again, no meaningful error.
All browsers are fresh-installed and all extensions disabled.
This is the head section of the file (the file is too big to attach in its entirety):
<!DOCTYPE html><html lang="he" dir="rtl" class=""><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="color-scheme" content="dark light"/><link rel="preconnect" href="https://fonts.googleapis"/><link rel="preconnect" href="https://fonts.gstatic" crossorigin="anonymous"/><link rel="modulepreload" href="/assets/entry.client-Bai6OFt8.js"/><link rel="modulepreload" href="/assets/chunk-IR6S3I6Y-Ct8-JFrb.js"/><link rel="modulepreload" href="/assets/with-props-5eOWdupz.js"/><link rel="modulepreload" href="/assets/clsx-B-dksMZM.js"/><link rel="modulepreload" href="/assets/index-B0KV9gXh.js"/><link rel="modulepreload" href="/assets/root-CsemyFcV.js"/><link rel="modulepreload" href="/assets/button-Gtl0NDqm.js"/><link rel="modulepreload" href="/assets/mode-toggle-L9ENPaWS.js"/><link rel="modulepreload" href="/assets/login-CJsWJ0HR.js"/><script type="importmap">{"imports":{"react":"https://esm.sh/react","react-dom":"https://esm.sh/react-dom","react-dom/client":"https://esm.sh/react-dom/client"}}</script><script>
(() => {
const theme = window.matchMedia("(prefers-color-scheme: light)").matches
? 'light'
: 'dark';
const cl = document.documentElement.classList;
const dataAttr = document.documentElement.dataset.theme;
if (dataAttr != null) {
const themeAlreadyApplied = dataAttr === 'light' || dataAttr === 'dark';
if (!themeAlreadyApplied) {
document.documentElement.dataset.theme = theme;
}
} else {
const themeAlreadyApplied = cl.contains('light') || cl.contains('dark');
if (!themeAlreadyApplied) {
cl.add(theme);
}
}
const meta = document.querySelector('meta[name=color-scheme]');
if (meta) {
if (theme === 'dark') {
meta.content = 'dark light';
} else if (theme === 'light') {
meta.content = 'light dark';
}
}
})();
</script><link rel="stylesheet" href="/assets/root-DvUHNLVV.css"/><link rel="stylesheet" href="https://fonts.googleapis/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"/></head>
Thank you!
Share Improve this question asked Mar 6 at 9:26 DanDan 3112 silver badges8 bronze badges1 Answer
Reset to default 0Some browsers may not properly reapply the import map after a page reload. Make sure the <script type="importmap"> is positioned before any module scripts that rely on it. You can try to move the Map to the top of the head
<head>
<script type="importmap">
{
"imports": {
"react": "https://esm.sh/react",
"react-dom": "https://esm.sh/react-dom",
"react-dom/client": "https://esm.sh/react-dom/client"
}
}
</script>
<script type="module">
import React from "react";
console.log("React loaded", React);
</script>
</head>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744986644a4604651.html
评论列表（0条）