Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Nextjs React Konva Error on Yarn Build (ERR_REQUIRE_ESM)

See original GitHub issue

Hello, I have bit question, i was working on react konva on top of Nextjs.

It was totally working well in Local, but when i tried to Yarn build/npm run build. it saying .

I have following this step, https://github.com/vercel/next.js/issues/25454 It was work for local, but not when i do build.

> Build error occurred
Error [ERR_REQUIRE_ESM]: require() of ES Module D:\Project 2022\Mockup Builder\nextds\node_modules\konva\lib\Core.js from D:\Project 2022\Mockup Builder\nextds\node_modules\react-konva\lib\ReactKonvaCore.js not supported.
Instead change the require of Core.js in D:\Project 2022\Mockup Builder\nextds\node_modules\react-konva\lib\ReactKonvaCore.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (D:\Project 2022\Mockup Builder\nextds\node_modules\react-konva\lib\ReactKonvaCore.js:19:13)
    at Object.<anonymous> (D:\Project 2022\Mockup Builder\nextds\node_modules\react-konva\lib\ReactKonva.js:12:23)
    at Object.6605 (D:\Project 2022\Mockup Builder\nextds\.next\server\pages\backend\konva.js:109:18)
    at __webpack_require__ (D:\Project 2022\Mockup Builder\nextds\.next\server\webpack-runtime.js:25:42)
    at D:\Project 2022\Mockup Builder\nextds\.next\server\pages\backend\konva.js:18:69
    at Function.__webpack_require__.a (D:\Project 2022\Mockup Builder\nextds\.next\server\webpack-runtime.js:103:13)
    at Object.607 (D:\Project 2022\Mockup Builder\nextds\.next\server\pages\backend\konva.js:11:21)
    at __webpack_require__ (D:\Project 2022\Mockup Builder\nextds\.next\server\webpack-runtime.js:25:42)
    at __webpack_exec__ (D:\Project 2022\Mockup Builder\nextds\.next\server\pages\backend\konva.js:140:39)
    at D:\Project 2022\Mockup Builder\nextds\.next\server\pages\backend\konva.js:141:66
    at Function.__webpack_require__.X (D:\Project 2022\Mockup Builder\nextds\.next\server\webpack-runtime.js:190:21)
    at D:\Project 2022\Mockup Builder\nextds\.next\server\pages\backend\konva.js:141:47
    at Object.<anonymous> (D:\Project 2022\Mockup Builder\nextds\.next\server\pages\backend\konva.js:144:3)
    at Object.requirePage (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\server\require.js:48:12)
    at Object.loadComponents (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\server\load-components.js:58:23)
    at D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\build\utils.js:591:52
    at Span.traceAsyncFn (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\trace\trace.js:75:26)
    at Object.isPageStatic (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\build\utils.js:587:29)
    at execFunction (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\compiled\jest-worker\processChild.js:1:2826)
    at execHelper (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\compiled\jest-worker\processChild.js:1:2484)
    at execMethod (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\compiled\jest-worker\processChild.js:1:2572)
    at process.messageListener (D:\Project 2022\Mockup Builder\nextds\node_modules\next\dist\compiled\jest-worker\processChild.js:1:1282)  
    at process.emit (node:events:390:28) {
  type: 'Error',
  code: 'ERR_REQUIRE_ESM'
}

I am trying to fixing it, but not sure how. Please help, many Thanks!

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

lavrtoncommented, Feb 22, 2022

Do not place react-konva components inside pages folder. Because next.js will build every page(file) in your pages.

Move that components outside. And then import it. E.g.

const KonvaComponent = dynamic(() => import("../componens/konva"), {
  ssr: false,
})

0reactions

iamindrazulficommented, Feb 22, 2022

Really appreciate your quick response, Here is the minimal repo.

https://github.com/iamindrazulfi/react-konva-minimal

It was works in with yarn dev but not with yarn build.

Thank you.

Top Results From Across the Web

Nextjs & konva error I'm not sure how to resolve - Reddit

So I'm trying to add some canvas to my app to display dotted lines between points on the screen and I figured react-konva...

Import ES module in Next.js ERR_REQUIRE_ESM

I'll build a repro/demo here: github.com/VulcanJS/npm-the-right-way, I've started to document our build process for full stack packages and ...

require is not defined in es module scope, you can use import ...

Describe the Bug. When importing the react-konva package I get this error. Server Error Error: Must use import to load ES Module: ...

Getting started with react and canvas via Konva

react -konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the Konva Framework....

react-konva - npm

react -konva. TypeScript icon, indicating that this package has built-in type declarations · Keywords.