importMap: root import causes «server responded with a MIME type of ''"» error

[d9k]

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:

spinner.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.

importMap.json:

    "/~/": "./src/",

Root import line at ./src/app.tsx:

import Spinner from "/~/components/spinner.tsx";

(instead of ./components/spinner.tsx)

Discussion on Discord

[d9k]

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).

[d9k]

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/[email protected]/X-ZS9yZWFjdA/es2022/react.mjs:2:1419)
    at _r (https://esm.sh/v132/@mantine/[email protected]/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/[email protected]/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/[email protected]/X-ZS9yZWFjdA/es2022/wouter.mjs:2:1925)
    at ft (https://esm.sh/v132/@tanstack/[email protected]/X-ZS9yZWFjdA/es2022/react-query.mjs:2:40586)
    at at (https://esm.sh/v132/@tanstack/[email protected]/X-ZS9yZWFjdA/es2022/react-query.mjs:2:38279)
    at n (https://esm.sh/v132/[email protected]/X-ZS9yZWFjdA/es2022/react-helmet-async.mjs:2:7261)
    at ClientApp

(thx @b_e_n_t_e_n from Discord)

[d9k]

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:

[d9k]

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.~~

[d9k]

: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/'