Facing issue on nextjs 14.2.15

[rahatkabir007]

"use client";

import dynamic from 'next/dynamic';
// import BlocksContainerCanvas from "@/components/pages/TemplateBuilder/CanvasPage/BlocksContainerCanvas"
// import { DndProvider } from "react-dnd"
// import { HTML5Backend } from "react-dnd-html5-backend"

const CanvasContainer = dynamic(() => import('./CanvasContainer'), {
ssr: false,
});

const CanvasPage = ({

}) => {
return (
<CanvasContainer />
)
}

export default CanvasPage

"use client";

import { Stage, Layer, Circle } from 'react-konva';

function CanvasContainer(props) {
return (
<Stage width={window.innerWidth} height={window.innerHeight}> <Layer> <Circle x={200} y={100} radius={50} fill="green" /> </Layer> </Stage>
);
}

export default CanvasContainer;

webpack: (config) => {
config.resolve.fallback = {
...config.resolve.fallback,
canvas: false,
};
return config;
},

even with all this i get a error!

react.development.js:2222 Uncaught TypeError: Cannot read properties of undefined (reading 'S')

 at (app-pages-browser)/node_modules/react-konva/es/ReactKonvaCore.js (http://localhost:3000/_next/static/chunks/_app-pages-browser_src_components_pages_TemplateBuilder_CanvasPage_CanvasContainer_jsx.js:688:1)
at options.factory (webpack.js?v=1735137223516:730:31)
at __webpack_require__ (webpack.js?v=1735137223516:37:33)
at fn (webpack.js?v=1735137223516:386:21)
at eval (ReactKonva.js:31:76)
at (app-pages-browser)/node_modules/react-konva/es/ReactKonva.js (http://localhost:3000/_next/static/chunks/_app-pages-browser_src_components_pages_TemplateBuilder_CanvasPage_CanvasContainer_jsx.js:677:1)
at options.factory (webpack.js?v=1735137223516:730:31)
at __webpack_require__ (webpack.js?v=1735137223516:37:33)
at fn (webpack.js?v=1735137223516:386:21)
at eval (CanvasContainer.jsx:3:69)
at (app-pages-browser)/src/components/pages/TemplateBuilder/CanvasPage/CanvasContainer.jsx (http://localhost:3000/_next/static/chunks/_app-pages-browser_src_components_pages_TemplateBuilder_CanvasPage_CanvasContainer_jsx.js:787:1)
at options.factory (webpack.js?v=1735137223516:730:31)
at __webpack_require__ (webpack.js?v=1735137223516:37:33)
at Function.fn (webpack.js?v=1735137223516:386:21)

[lavrton]

Do you have any peer dependencies warning when you install react-konva?

[rahatkabir007]

No, i installed everything without any issue following the old issues and solutions, now i am getting this, when i comment the codes related to react-konva, my application runs without problem!

[lavrton]

Can you share your package.json?

[rahatkabir007]

{
    "name": "visityfy_frontend",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@ant-design/icons": "^5.5.1",
        "@ant-design/nextjs-registry": "^1.0.1",
        "@dnd-kit/core": "^6.3.1",
        "@dnd-kit/sortable": "^10.0.0",
        "@dnd-kit/utilities": "^3.2.2",
        "@hello-pangea/dnd": "^17.0.0",
        "@next/font": "^14.2.15",
        "@reduxjs/toolkit": "^2.3.0",
        "@tiptap/core": "^2.10.4",
        "@tiptap/extension-list-item": "^2.10.4",
        "@tiptap/extension-paragraph": "^2.10.4",
        "@tiptap/extension-table": "^2.10.4",
        "@tiptap/extension-table-cell": "^2.10.4",
        "@tiptap/extension-table-header": "^2.10.4",
        "@tiptap/extension-table-row": "^2.10.4",
        "@tiptap/extension-text": "^2.10.4",
        "@tiptap/react": "^2.10.4",
        "@tiptap/starter-kit": "^2.10.4",
        "antd": "^5.21.4",
        "canvas": "^3.0.0",
        "dayjs": "^1.11.13",
        "draft-js": "^0.11.7",
        "fabric": "^6.5.3",
        "konva": "^9.3.18",
        "next": "^14.2.15",
        "nextjs-toploader": "^3.7.15",
        "pdf-lib": "^1.17.1",
        "react": "^18",
        "react-beautiful-dnd": "^13.1.1",
        "react-dnd": "^16.0.1",
        "react-dnd-html5-backend": "^16.0.1",
        "react-dom": "^18",
        "react-draggable": "^4.4.6",
        "react-dropzone": "^14.3.5",
        "react-hook-form": "^7.53.0",
        "react-icons": "^5.4.0",
        "react-international-phone": "^4.3.0",
        "react-konva": "^19.0.1",
        "react-pdf": "4.1.0",
        "react-quick-pinch-zoom": "4.1.0",
        "react-redux": "^9.1.2",
        "react-responsive-pinch-zoom-pan": "0.3.0",
        "react-signature-canvas": "^1.0.6",
        "react-toastify": "^10.0.6",
        "uuid": "^11.0.3"
    },
    "devDependencies": {
        "@babel/core": "^7.26.0",
        "@babel/preset-env": "^7.26.0",
        "@babel/preset-react": "^7.26.3",
        "@iconify/react": "^5.0.2",
        "@types/fabric": "^5.3.9",
        "babel-loader": "^9.2.1",
        "eslint": "^8",
        "eslint-config-next": "14.2.15",
        "postcss": "^8",
        "tailwindcss": "^3.4.1"
    }
}