Usage with Next.js

[birksy89]

Hello, thanks for forking this and keeping it updated...

I have just managed to get this working in my project, but I'm not sure if it's done in the best way.

I had to import the library "dynamically" as it was complaining about ESM:

⨯ Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\Andrew\Desktop\Projects\_Client\node_modules\react-dnd\dist\index.js from C:\Users\Andrew\Desktop\Projects\_Client\node_modules\@aperturerobotics\chonky\dist\chonky.cjs.development.js not supported.
Instead change the require of index.js in C:\Users\Andrew\Desktop\Projects\_Client\node_modules\@aperturerobotics\chonky\dist\chonky.cjs.development.js to a dynamic import() which is available in all CommonJS modules.

I got it working by adding it like this:

  const FullFileBrowser = dynamic(
    () => import("@aperturerobotics/chonky").then((mod) => mod.FullFileBrowser),
    { ssr: false }
  );

  const ChonkyIconFA = dynamic(
    () =>
      import("@aperturerobotics/chonky-icon-fontawesome").then(
        (mod) => mod.ChonkyIconFA
      ),
    { ssr: false }
  );

Any advice would be greatly appreciated, thanks again!

[oliverlevay]

Wow! I'm working on the exact same thing at this moment. It worked without hickups with Chonky, but with this fork I have to load it dynamically...

[birksy89]

Haha, I'm glad I commented then - I almost just moved on with my day.

I didn't start with the original "Chonky" - I just spotted that people said that this fork existed and was more recently updated, so chose this.

I've just this second tried to add a custom action as defined here: https://chonky.io/docs/2.x/file-actions/custom-actions

But I couldn't get it to work "dynamically" - So I've also now installed the original Chonky, just to get this working.

Was there a reason you moved away from the original Chonky? I was just wondering if I'd made a mistake choosing this version ?

Maybe for my needs the basic/original one would work fine?

[oliverlevay]

So I'm trying to upgrade my version of Next.js. We use MUI in our project, but things get really funky with a newer version of material ui and chonky. So right now we have both mui v4 and the old material-ui as dependencies in our project, which is not very good. You can see it in actions on our website

https://www.dsek.se/photos

I'm trying to import other things like ChonkyActions and FileHelper but I just can't get it to work.

PS. it's all open source, feel free to take a look https://github.com/Dsek-LTH/member-page

[paralin]

@oliverlevay @birksy89 There seem to be both cjs and esm versions in dist/. I'm not familiar with the "dts" build system used here. Might migrate off of it to esbuild instead soon.

[paralin]

Using esbuild now. It should work!