MUI and other NPM packages

[mandolyte]

Is there a general approach to use NPM packages with Fresh?

I have tried pulling from a CDN but had compile errors, which I assume was due to dependencies of the package (react-json-view).

I'd love to use the MUI components as well.

So before I invested too much time in this, I thought I'd ask if there was a general approach to using NPM packages. Any examples also appreciated!!

Thanks!

This morning I tried a number of things. This came the closest to working. This is the index.tsx file:

/** @jsx h */
import { h } from "preact";

import Container from 'https://esm.sh/@mui/material/Container';
import Typography from 'https://esm.sh/@mui/material/Typography/Typography.js';
import Box from 'https://esm.sh/@mui/material/Box/Box.js';

export default function App() {
  return (
    <div>
    <Container maxWidth="sm">
      <Box sx={{ my: 4 }}>
        <Typography variant="h4" component="h1" gutterBottom>
          Preact example
        </Typography>
      </Box>
    </Container>
    </div>
  );
}

No matter what I did, I would get errors like this:

Watcher File change detected! Restarting!
Server listening on http://localhost:8000
An error occured during route handling or page rendering. Error: [object Object] is not a valid HTML tag name in <[object Object]>
    at h (https://esm.sh/v86/[email protected]/X-ZC9wcmVhY3RAMTAuOC4x/deno/preact-render-to-string.js:7:35)
    at h (https://esm.sh/v86/[email protected]/X-ZC9wcmVhY3RAMTAuOC4x/deno/preact-render-to-string.js:4:1103)

[whoitao]

Similar issue. Waiting for the answer...

[tulXoro]

I also have a similar issue. I've been trying to use Preact Material Component but I've had no luck. The furthest I've gotten is

SyntaxError: The requested module '/v86/@material/[email protected]/deno/index.js' does not provide an export named 'MDCRipple'

I don't know if I am doing something wrong or if it just isn't supported...

[zicklag]

There are multiple CDNs that you can try to use to import NPM modules but, in my experience, there are a lot of packages that don't work through any of the CDNs, or you have to try and find clever ways to structure the URLs to get certain packages to import.

You can read about options for CDNs here: https://deno.land/manual/node/cdns

I can see you've already tried esm.sh the one that seems to work the next most often for me is skypack.dev.

[kidonng]

You need to alias react to preact/compat in order for MUI to work, either build one locally or via esm.sh: ?alias=react:preact/compat&external=preact/compat.

- import Container from 'https://esm.sh/@mui/material/Container';
- import Typography from 'https://esm.sh/@mui/material/Typography/Typography.js';
- import Box from 'https://esm.sh/@mui/material/Box/Box.js';
+ import Container from 'https://esm.sh/@mui/material/Container?alias=react:preact/compat&external=preact/compat';
+ import Typography from 'https://esm.sh/@mui/material/Typography/Typography.js?alias=react:preact/compat&external=preact/compat';
+ import Box from 'https://esm.sh/@mui/material/Box/Box.js?alias=react:preact/compat&external=preact/compat';

[irbull]

Thanks! I tried to use the alias, but I'm getting some TypeErrors:

An error occurred during route handling or page rendering. TypeError: Cannot read properties of undefined (reading 'current')
    at p (https://esm.sh/stable/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0L2NvbXBhdA/deno/jsx-runtime.js:2:1563)
    at https://esm.sh/v95/@mui/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmUvcHJlYWN0L2NvbXBhdA/deno/system.js:29:8956

Any other tricks? Does the aliasing work for anyone?

[irbull]

I managed to get it working, that is, I can render Material UI Components in a Deno/Fresh stack using Preact. However, when I started to use more complex components (Drawer's, Accordions), things started to fall over. I've published a Git repo with the demo here in case anybody is interested. If anybody has ideas why things start to fall over, and how to fix them, let me know. I'd be happy to put together a MUI/Fresh showcase, if that's even possible.

https://github.com/irbull/fresh-mui

I deployed the demo to Deno Deploy.
https://fresh-mui.deno.dev

[reosablo]

@jjwall
Replace https://esm.sh/ with https://esm.sh/v106/ in import_map.json. I'll fix the repository.

[miguelrk]

Hey @thesobercoder I 'm also trying to use shadcn/ui but couldn't get it to work, do you mind sharing your import map? 🙏🏼

[thesobercoder]

@miguelrk I gave up man. Too many things that didn't work, which I found out eventually. Can't say that the Fresh ecosystem is mature enough yet.

[miguelrk]

Oh man 🙃 thanks for the response though @thesobercoder ! Maybe npm: specifiers will solve this for deploy. If so, we could have a solution very soon, the team is working on that already

[reosablo]

I simplified the prior import map. Now no shims are required.

// import_map.json or deno.json (fresh@>=1.2.0)
{
  "imports": {
    // imports generated by Fresh
    "$fresh/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/*[email protected]",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",

    // override emotion packages which can run on both Deno and browsers
    // if esm.sh supports "neutral" platform for esbuild, these lines could be removed
    "@emotion/cache": "https://esm.sh/v128/@emotion/[email protected]/dist/emotion-cache.esm.js?external=@emotion/utils",
    "@emotion/react": "https://esm.sh/v128/@emotion/[email protected]/dist/emotion-react.esm.js?alias=react:preact/compat&external=preact,@emotion/cache,@emotion/use-insertion-effect-with-fallbacks,@emotion/utils",
    "@emotion/styled": "https://esm.sh/v128/@emotion/[email protected]/dist/emotion-styled.esm.js?alias=react:preact/compat&external=preact,@emotion/react,@emotion/use-insertion-effect-with-fallbacks,@emotion/utils",
    "@emotion/use-insertion-effect-with-fallbacks": "https://esm.sh/v128/@emotion/[email protected]/dist/emotion-use-insertion-effect-with-fallbacks.esm.js?alias=react:preact/compat&external=preact",
    "@emotion/utils": "https://esm.sh/v128/@emotion/[email protected]/dist/emotion-utils.esm.js",

    // import MUI with some external deps to override
    "@mui/icons-material": "https://esm.sh/v128/@mui/[email protected]?alias=react:preact/compat,@types/react:preact/compat,react-dom:preact/compat&external=preact,@emotion/cache,@emotion/react,@emotion/styled",
    "@mui/material": "https://esm.sh/v128/@mui/[email protected]?alias=react:preact/compat,@types/react:preact/compat,react-dom:preact/compat&external=preact,@emotion/cache,@emotion/react,@emotion/styled",
    "@mui/x-data-grid": "https://esm.sh/v128/@mui/[email protected]?alias=react:preact/compat,@types/react:preact/compat,react-dom:preact/compat&external=preact,@emotion/cache,@emotion/react,@emotion/styled"
  }
}