CODEWITHSUNDEEP
next.jswidgetnpm-publishnext-routernext-images
Simon Lehmann
Simon Lehmann

Reputation: 649

Using Next.js specific features in a ui library published as npm package

I have a published Ui-component/Widget library. For the images in the Widgets I would like to use next/image. But when starting the app that consumes my library im getting the error:

error - Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'path\to\node_modules\next\image' imported from path\to\node_modules\@mynpmpackage\public-widgets\index.js Did you mean to import next/image.js? at new NodeError (node:internal/errors:371:5) at finalizeResolution (node:internal/modules/esm/resolve:418:11) at moduleResolve (node:internal/modules/esm/resolve:983:10) at defaultResolve (node:internal/modules/esm/resolve:1080:11) at ESMLoader.resolve (node:internal/modules/esm/loader:530:30) at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40) at link (node:internal/modules/esm/module_job:78:36) { code: 'ERR_MODULE_NOT_FOUND', page: '/' }

My installed npm package has the correct peerDependency set to "next": ">13.1.0" the consuming application has also the correct npm package "next": "13.1.6" installed.

Now im questioning my approach if this is even possible to do, and if so what i need to be aware of when using Nextjs features like useRouter/Image in my component library.

I have tried different packages which all worked fine, just subpackages of next like: next/image or next/router dont work.

Upvotes: 1

Views: 412

Answers (0)

Related Questions