lodash/pick throwing ERR_MODULE_NOT_FOUND when using @rjsf/shadcn

[peguerosdc]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

shadcn

Version

6.0.0-beta.11

Current Behavior

I followed the installation guide for the shadcn theme and ended up installing the following packages:

"@rjsf/core": "^6.0.0-beta.11",
"@rjsf/shadcn": "^6.0.0-beta.10",
"@rjsf/utils": "^6.0.0-beta.11",
"@rjsf/validator-ajv8": "^6.0.0-beta.11",

But when I try to run my project containing the following statement import Form from "@rjsf/shadcn"; I get the following error:

 ⨯ Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/lodash/pick' imported from /node_modules/@rjsf/shadcn/lib/RangeWidget/RangeWidget.js
Did you mean to import "lodash/pick.js"?

Expected Behavior

No response

Steps To Reproduce

I am installing @rjsf/shadcn in an already big project using Nextjs 13, so I'm not sure how to give a project setup to reproduce the issue 😔

Environment

- OS: macOS 15.5
- Node: 24.1.0
- npm: 11.3.0

Anything else?

No response

[ole-ve]

Seems like your project requires ESM-modules which clashes with the nested imports of lodash/pick in RangeWidget.tsx.

As a temporarily workaround, this vite.config.ts works for my remix application. It instructs vite to resolves all imports from lodash to the ESM-native lodash-es.

export default config({
  // ...
  resolve: {
    alias: [
      alias: { lodash: "lodash-es" },
    ],
  },
  optimizeDeps: {
    include: ["lodash-es"], // pre-bundle once, reuse on every run
  },
  ssr: {
    noExternal: ["@rjsf/shadcn", "@rjsf/core", "@rjsf/utils"], // if your app has SSR
  },

[heath-freenome]

@peguerosdc good catch! I will push the fix out as part of beta 12, in the mean time, the workaround above should get you by.