search

konvajs / react-konva

React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.
https://konvajs.github.io/docs/react/
MIT License
5.7k stars 253 forks source link

Jest encountered an unexpected token with react + konva and/or react-konva #608

Closed damiangreen closed 2 years ago

damiangreen commented 3 years ago

I'm getting the same error as posted on StackOverflow:

https://stackoverflow.com/questions/67919198/jest-encountered-an-unexpected-token-with-react-konva-and-or-react-konva

I've also tried the comment in the suggestion yarn add konva canvas to no effect.

This seems to be prevneting us from upgrading

lavrton commented 3 years ago

Please make a very small repository with such a problem to reproduce.

maxxxymum commented 3 years ago

Faced the same issue with Jest, react-testing-library. So I have started my investigation. I am going to update you here with my findings.

It seems that it's some kind of issue with transpiling ESM to CommonJS.

https://github.com/facebook/jest/issues/11753 https://github.com/facebook/jest/issues/9430

maxxxymum commented 3 years ago

@damiangreen I found a solution to fix this issue:

  1. Install canvas https://www.npmjs.com/package/canvas. npm i canvas.
  2. Update your configs as mentioned in this comment.
damiangreen commented 3 years ago

thanks @maxxxymum I'll give it a try

damiangreen commented 2 years ago

I managed to get it working by adding canvas changing jest.config.js

    '^.+\\.[t|j]sx?$': 'ts-jest',```

....
transformIgnorePatterns: [
    '/node_modules/(?!intl-messageformat|konva|intl-messageformat-parser|node-fetch).+\\.js$',
  ],

and adding "allowJs": true, in tsconfig.json

Perhaps I spoke to soon. It now breaks server side with 

  Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: code\node_modules\konva\lib\Core.js
require() of ES modules is not supported.
require() of code\node_modules\konva\lib\Core.js from code\node_modules\react-konva\lib\ReactKonvaCore.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename Core.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from code\node_modules\konva\package.json.

    at Module._extensions..js (internal/modules/cjs/loader.js:1089:13)
    at Object.newLoader [as .js] (code\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (code\node_modules\react-konva\lib\ReactKonvaCore.js:19:13)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Module._compile (code\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Object.newLoader [as .js] (code\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (code\node_modules\react-konva\lib\ReactKonva.js:12:23)
OliverBrace1 commented 2 years ago

If you have anything new on this that would be wonderful as I'm starting to think the way I resolved this issue is directly causing https://github.com/konvajs/react-konva/issues/630

lavrton commented 2 years ago

The issue should be resolved with konva@8.3.6.

Also you may need this config for jest:

"transformIgnorePatterns": [
  "node_modules/(?!(konva)).*\\.js$"
]

If you still have an issue, create a small repo to reproduce the issue.

Amoodaa commented 2 years ago

@lavrton I made a repro repo, this is a fresh create-react-app with typescript template https://github.com/Amoodaa/konva-jest-repro check the first few commits