Open d9k opened 9 months ago
An issue exists with both *.tsx
and *.ts
files absolute imports but only on the browser side.
(absolute imports in server.tsx
don't cause any errors).
ok, if I use absolute imports with React.lazy
const Comments = lazy(() => import("/~/components/comments.tsx"));
// . . . . .
<Suspense fallback={<Spinner />}>
<Comments date={+new Date()} />
</Suspense>
I get errors:
comments.tsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.
react.development.js:1407 Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:8000/src/components/comments.tsx
react-dom.development.js:18687 The above error occurred in one of your React components:
at Lazy
at Suspense
at main
at H (https://esm.sh/v132/@emotion/react@11.11.1/X-ZS9yZWFjdA/es2022/react.mjs:2:1419)
at _r (https://esm.sh/v132/@mantine/styles@6.0.21/X-ZS9yZWFjdA/es2022/styles.mjs:2:18143)
at MantineProviderMod (http://localhost:8000/_ultra/compiler/src/providers/mantine.tsx:3:38)
at at (https://esm.sh/v132/@tanstack/react-query@4.2.3/X-ZS9yZWFjdA/es2022/react-query.mjs:2:38279)
at body
at html
at App (http://localhost:8000/_ultra/compiler/src/app.tsx:16:31)
at SearchParamsProvider (http://localhost:8000/_ultra/compiler/src/wouter/index.tsx:4:40)
at ee (https://esm.sh/v132/wouter@2.9.2/X-ZS9yZWFjdA/es2022/wouter.mjs:2:1925)
at ft (https://esm.sh/v132/@tanstack/react-query@4.2.3/X-ZS9yZWFjdA/es2022/react-query.mjs:2:40586)
at at (https://esm.sh/v132/@tanstack/react-query@4.2.3/X-ZS9yZWFjdA/es2022/react-query.mjs:2:38279)
at n (https://esm.sh/v132/react-helmet-async@1.3.0/X-ZS9yZWFjdA/es2022/react-helmet-async.mjs:2:7261)
at ClientApp
(thx @b_e_n_t_e_n
from Discord)
There is open PR https://github.com/exhibitionist-digital/ultra/pull/243 with absolute import example by @ahuigo.
importMap.json
:
"@/": "./src/"
lib/ultra.ts
:
importMap.imports["@/"] = "/_ultra/compiler/src/";
But I don't know how to implement similar changes to support current ultra revision properly because there is no lib/ultra.ts
in current example code anymore:
I think there must be changes in https://github.com/exhibitionist-digital/ultra/blob/main/lib/ultra.ts (importMap.
).
These can be made only in ultra source, I see no way to patch it from web application code.
:smile_cat: I think I fixed it for my case ( "/~/": "./src/"
) locally:
server.tsx
:
if (server.importMap) {
server.importMap.imports["/~/"] = "/_ultra/compiler/src/";
}
export default server;
It would be nice if someone implement more common solution at https://github.com/exhibitionist-digital/ultra/blob/main/lib/ultra.ts involving replace importMap
values prefix './'
with '/_ultra/compiler/'
If I use absolute imports and
<MantineProvider/>
then<style data-emotion="mantine" data-s=""></style>
not added to resulting html code.I think at may be connected with fact that absolute import in
./src/app.tsx
causes an error visible in Chrome Dev Tools:importMap.json
:Root import line at
./src/app.tsx
:(instead of
./components/spinner.tsx
)Discussion on Discord