Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
d9k opened this issue Oct 6, 2023 · 5 comments

Comments

@d9k
Copy link

d9k commented Oct 6, 2023

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 d9k changed the title importMap root import causes «server responded with a MIME type of ''"» error importMap: root import causes «server responded with a MIME type of ''"» error Oct 6, 2023
@d9k
Copy link
Author

d9k commented Oct 6, 2023

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
Copy link
Author

d9k commented Oct 7, 2023

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
Copy link
Author

d9k commented Oct 7, 2023

There is open PR #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
Copy link
Author

d9k commented Oct 7, 2023

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
Copy link
Author

d9k commented Oct 7, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant