Cannot find module 'node_modules/next/link' imported from /node_modules/@chakra-ui/next-js

[aaronpurewal]

Description

When I deploy my website to Vercel using the new 'Link' component from @chakra-ui/nextjs, the build fails and I receive an error.

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/vercel/path0/node_modules/next/link' imported from /vercel/path0/node_modules/@chakra-ui/next-js/dist/chunk-LYWO3SBR.mjs

• Did you mean to import next/link.js?

1. Is it supposed to be pulling link.js? For some reason it is failing to find it and pull it.

Was able to test and manually change the path to 'next/link.js', along with the 'next/navigation' import to 'navigation.js', but then I received this error: "Server Error TypeError: createCache is not a function"

Link to Reproduction

Steps to reproduce

No response

Chakra UI Version

2.5.1

Browser

Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[roombawulf]

I also got this error. Weirdly it was working when the page did a fast refresh. After reloading the page manually, the error persisted.

[JashandeepSinghGill]

Have the same error, when you fix the first error it comes up for next/navigation is it an error in the @chakra-ui/next-js cuz it was just added 5 days ago, Please help us fix this.

[jakehein]

I also got the same issue, here to confirm and boost the issue.

[gidiblack]

I'm also experiencing this, I've resorted to a using custom wrapper until this is resolved.

This is my workaround and it works very well

import Link from "next/link";
import { chakra, LinkProps } from "@chakra-ui/react";

const LinkComponent = ({ href, children, ...props }: LinkProps) => {
  const OptimizedLink = chakra(Link, {
    shouldForwardProp: (prop) => ["href", "children"].includes(prop),
  });

  return (
    <OptimizedLink href={href ? href : ""} {...props}>
      {children}
    </OptimizedLink>
  );
};

export default LinkComponent;

[jeferson-sb]

You should install the package @chakra-ui/next-js as well in order to get this integration.

[gidiblack]

I have the package installed (v2.0.1) but I still get the error @jeferson-sb

[kno-raziel]

Today I was updating some packages and got this same issue after implementing the new Link from @chakra-ui/next-js, I did a quick search and this issue seems to be related to this one #7167

I was able to continue working by using the workaround suggested there:

 // adding this in nextj config file
  experimental: {
    esmExternals: false,
  }

🤷‍♂️

[apancutt]

The ESM bundle doesn't include file extensions when importing from next/link and next/navigation so TS cannot resolve the imports. Next has a bunch of ESM-related issues so might be safer to expose just a CommonJS bundle until their issues are resolved.

In the meantime, this Yarn patch file got things working for me.

diff --git a/dist/chunk-LYWO3SBR.mjs b/dist/chunk-LYWO3SBR.mjs
index 148538e5e3bf371bad817beed0081a4c5f28d31c..329072d592ccea3bc9212164f78b89baa1d3d17a 100644
--- a/dist/chunk-LYWO3SBR.mjs
+++ b/dist/chunk-LYWO3SBR.mjs
@@ -1,6 +1,6 @@
 // src/link.tsx
 import { forwardRef, chakra } from "@chakra-ui/react";
-import NextLink from "next/link";
+import NextLink from "next/link.js";
 import { jsx } from "react/jsx-runtime";
 var Link = forwardRef(
   function Link2(props, ref) {
diff --git a/dist/chunk-UHVDJJS7.mjs b/dist/chunk-UHVDJJS7.mjs
index 36ddd5c5be472f0a76dd1277e4830d3500bf6a08..9eef9c8afc93c640df1122092734b1439236286e 100644
--- a/dist/chunk-UHVDJJS7.mjs
+++ b/dist/chunk-UHVDJJS7.mjs
@@ -1,6 +1,6 @@
 // src/use-emotion-cache.ts
 import createCache from "@emotion/cache";
-import { useServerInsertedHTML } from "next/navigation";
+import { useServerInsertedHTML } from "next/navigation.js";
 import { createElement, useMemo } from "react";
 function useEmotionCache(options) {
   const cache = useMemo(() => {

[segunadebayo]

Thanks for sharing the patch @apancutt. Indeed, the ESM bundle should include the .js file extension to get it working.

I've gone ahead to include a postbuild patch to get this working for now.