[Bug] Following the Next JS Application install instructions cause a stack trace

[camyers]

Upon following the instructions listed here, https://react.keepdesign.io/docs/getting-started/Introduction#next-js-application, throws the following stack trace for brand new npx create-next-app@latest applications.

I tried on Windows & MacOS with the same result.

Steps to replicate

Step 1: Create a new NextJS application npx create-next-app@latest

Ensure that you select tailwindcss as a dependency for your application during the setup. Would you like to use Tailwind CSS? Yes

Step 2: Install Keep React npm i keep-react

Step 3: Update tailwind.config.js for Next.js

In the tailwind.config.js file, insert the following code into the content and presets arrays

module.exports = {
content: [
// ... (existing content)
"./node_modules/keep-react/**/*.{js,jsx,ts,tsx}",
],
presets: [require("keep-react/preset")],
};

Step 4: Add Keep React CSS to globals.css File:

@import "keep-react/css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5. Now you can import any component from keep-react and start using it in your NextJS project.

"use client";
import { Button } from "keep-react";
const App=()=>{
  return (
    <Button size="md">Default</Button>
  )
};
export default App;

Step 6. Attempt to load your page with the component and receive the following stack trace.

Stack trace

index.js:618 Uncaught Error: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/BreadcrumbContext.js:9:93)
    at (rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/BreadcrumbContext.js (file://C:\Development\my-app\.next\server\vendor-chunks\keep-react.js:1155:1)
    at __webpack_require__ (file://C:\Development\my-app\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/BreadcrumbItem.js:10:76)
    at (rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/BreadcrumbItem.js (file://C:\Development\my-app\.next\server\vendor-chunks\keep-react.js:1165:1)
    at __webpack_require__ (file://C:\Development\my-app\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/Breadcrumb.js:7:73)
    at (rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/Breadcrumb.js (file://C:\Development\my-app\.next\server\vendor-chunks\keep-react.js:1145:1)
    at __webpack_require__ (file://C:\Development\my-app\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/index.js:5:69)
    at (rsc)/./node_modules/keep-react/lib/esm/components/Breadcrumb/index.js (file://C:\Development\my-app\.next\server\vendor-chunks\keep-react.js:1175:1)
    at __webpack_require__ (file://C:\Development\my-app\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/keep-react/lib/esm/components/index.js:56:69)
    at (rsc)/./node_modules/keep-react/lib/esm/components/index.js (file://C:\Development\my-app\.next\server\vendor-chunks\keep-react.js:2770:1)
    at __webpack_require__ (file://C:\Development\my-app\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/keep-react/lib/esm/index.js:52:69)
    at (rsc)/./node_modules/keep-react/lib/esm/index.js (file://C:\Development\my-app\.next\server\vendor-chunks\keep-react.js:2860:1)
    at __webpack_require__ (file://C:\Development\my-app\.next\server\webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/page.js:8:68)
    at (rsc)/./app/page.js (file://C:\Development\my-app\.next\server\app\page.js:459:1)
    at Function.__webpack_require__ (file://C:\Development\my-app\.next\server\webpack-runtime.js:33:42)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
    at async eq (file://C:\Development\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:402260)
    at async tr (file://C:\Development\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:405987)
    at async tn (file://C:\Development\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:406537)
    at async tn (file://C:\Development\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:406668)
    at async tu (file://C:\Development\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2057)
    at async (file://C:\Development\my-app\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:36:2564)

[Arifulislam5577]

Hi @camyers,

Thank you for reaching out and reporting the issue. We're sorry to hear that you're experiencing difficulties with the Next.js application installation instructions.

We've thoroughly reviewed the steps outlined in our documentation and haven't been able to reproduce the error on our end. However, we understand that issues can arise due to various factors, including different environments and dependencies.

To assist you further, we recommend trying the installation process with the latest version of Keep-React. We regularly update our libraries to address bugs and improve compatibility with different environments. By using the latest version, you may be able to resolve the issue you encountered.

If you continue to experience problems after trying with the latest version, please don't hesitate to reach out again. We're here to help and will do our best to assist you in resolving any issues you encounter.

Thank you for your patience and understanding.

Best regards, Md Ariful Islam