TypeError: _react.default.createElement is not a function
kimmobrunfeldt opened this issue · 3 comments
kimmobrunfeldt commented
Hi,
when we are running tests (with jest) that import @iconify/react, we get the following exception:
Error: Uncaught [TypeError: _react.default.createElement is not a function]
at reportException (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:62:24)
at innerInvokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:333:9)
at invokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22779:12) TypeError: _react.default.createElement is not a function
at component (/home/kimmob/code/external/jest-iconify-issue/node_modules/@iconify/react/dist/icon.js:640:28)
at Icon (/home/kimmob/code/external/jest-iconify-issue/node_modules/@iconify/react/dist/icon.js:652:10)
at renderWithHooks (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:14985:18)
at mountIndeterminateComponent (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:17811:13)
at beginWork (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:19049:16)
at HTMLUnknownElement.callCallback (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
at HTMLUnknownElement.callTheUserObjectsOperation (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/generated/EventListener.js:26:30)
at innerInvokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:318:25)
at invokeEventListeners (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:274:3)
at HTMLUnknownElementImpl._dispatch (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:221:9)
at HTMLUnknownElementImpl.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:94:17)
at HTMLUnknownElement.dispatchEvent (/home/kimmob/code/external/jest-iconify-issue/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:231:34)
at Object.invokeGuardedCallbackDev (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
at invokeGuardedCallback (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
at beginWork$1 (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:23964:7)
at performUnitOfWork (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22779:12)
at workLoopSync (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22707:5)
at renderRootSync (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22670:7)
at performSyncWorkOnRoot (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22293:18)
at scheduleUpdateOnFiber (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:21881:7)
at updateContainer (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:25482:3)
at /home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:26021:7
at unbatchedUpdates (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22431:12)
at legacyRenderSubtreeIntoContainer (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:26020:5)
at Object.render (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:26103:10)
at /home/kimmob/code/external/jest-iconify-issue/node_modules/@testing-library/react/dist/pure.js:99:25
at batchedUpdates$1 (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom.development.js:22380:12)
at act (/home/kimmob/code/external/jest-iconify-issue/node_modules/react-dom/cjs/react-dom-test-utils.development.js:1042:14)
at Object.render (/home/kimmob/code/external/jest-iconify-issue/node_modules/@testing-library/react/dist/pure.js:95:26)
at Object.<anonymous> (/home/kimmob/code/external/jest-iconify-issue/Icon.test.tsx:8:5)
at Object.asyncJestTest (/home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
at /home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/queueRunner.js:45:12
at new Promise (<anonymous>)
at mapper (/home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
at /home/kimmob/code/external/jest-iconify-issue/node_modules/jest-jasmine2/build/queueRunner.js:75:41
at processTicksAndRejections (internal/process/task_queues.js:97:5)
at VirtualConsole.<anonymous> (node_modules/jsdom/lib/jsdom/virtual-console.js:29:45)
console.error
The above error occurred in the <Icon> component:
at Icon (/home/kimmob/code/external/jest-iconify-issue/node_modules/@iconify/react/dist/icon.js:652:10)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
Have been tracing this issue for quite some time, tried to configure Babel into our jest setup etc, but no luck so far. As a last resort I tested what happens if I rename the folder of the module, from node_modules/@iconify/react to node_modules/@iconify/reacty and updated the imports accordingly. And suddenly the error is gone!
I created a repo where the issue can be reproduced: https://github.com/aivenkimmob/jest-iconify-issue-repro. Somehow it happens that when this module calls require('react') it ends up resolving to itself. I can't yet explain it but my theory is that react is resolved from the root of @iconify directory, which points to this module.
tsc --traceResolve tracethis.ts looks correct to me (Module name 'react' was successfully resolved to '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts' with Package ID '@types/react/index.d.ts@17.0.2'.) but that is just the type resolving.
======== Resolving module '@iconify/react' from '/home/kimmob/code/design-system/src/components/test.ts'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module '@iconify/react' from 'node_modules' folder, target file type 'TypeScript'.
Directory '/home/kimmob/code/design-system/src/components/node_modules' does not exist, skipping all lookups in it.
Scoped package detected, looking in 'iconify__react'
Directory '/home/kimmob/code/design-system/src/node_modules' does not exist, skipping all lookups in it.
Scoped package detected, looking in 'iconify__react'
Found 'package.json' at '/home/kimmob/code/design-system/node_modules/@iconify/react/package.json'.
'package.json' does not have a 'typesVersions' field.
File '/home/kimmob/code/design-system/node_modules/@iconify/react.ts' does not exist.
File '/home/kimmob/code/design-system/node_modules/@iconify/react.tsx' does not exist.
File '/home/kimmob/code/design-system/node_modules/@iconify/react.d.ts' does not exist.
'package.json' does not have a 'typings' field.
'package.json' has 'types' field 'dist/icon.d.ts' that references '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts'.
File '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts' exist - use it as a name resolution result.
Resolving real path for '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts', result '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts'.
======== Module name '@iconify/react' was successfully resolved to '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts' with Package ID '@iconify/react/dist/icon.d.ts@1.1.4'. ========
======== Resolving module 'react' from '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/icon.d.ts'. ========
Module resolution kind is not specified, using 'NodeJs'.
Loading module 'react' from 'node_modules' folder, target file type 'TypeScript'.
Directory '/home/kimmob/code/design-system/node_modules/@iconify/react/dist/node_modules' does not exist, skipping all lookups in it.
Directory '/home/kimmob/code/design-system/node_modules/@iconify/react/node_modules' does not exist, skipping all lookups in it.
Directory '/home/kimmob/code/design-system/node_modules/@iconify/node_modules' does not exist, skipping all lookups in it.
Found 'package.json' at '/home/kimmob/code/design-system/node_modules/react/package.json'.
'package.json' does not have a 'typesVersions' field.
File '/home/kimmob/code/design-system/node_modules/react.ts' does not exist.
File '/home/kimmob/code/design-system/node_modules/react.tsx' does not exist.
File '/home/kimmob/code/design-system/node_modules/react.d.ts' does not exist.
'package.json' does not have a 'typings' field.
'package.json' does not have a 'types' field.
'package.json' has 'main' field 'index.js' that references '/home/kimmob/code/design-system/node_modules/react/index.js'.
File '/home/kimmob/code/design-system/node_modules/react/index.js' exist - use it as a name resolution result.
File '/home/kimmob/code/design-system/node_modules/react/index.js' has an unsupported extension, so skipping it.
Loading module as file / folder, candidate module location '/home/kimmob/code/design-system/node_modules/react/index.js', target file type 'TypeScript'.
File '/home/kimmob/code/design-system/node_modules/react/index.js.ts' does not exist.
File '/home/kimmob/code/design-system/node_modules/react/index.js.tsx' does not exist.
File '/home/kimmob/code/design-system/node_modules/react/index.js.d.ts' does not exist.
File name '/home/kimmob/code/design-system/node_modules/react/index.js' has a '.js' extension - stripping it.
File '/home/kimmob/code/design-system/node_modules/react/index.ts' does not exist.
File '/home/kimmob/code/design-system/node_modules/react/index.tsx' does not exist.
File '/home/kimmob/code/design-system/node_modules/react/index.d.ts' does not exist.
Directory '/home/kimmob/code/design-system/node_modules/react/index.js' does not exist, skipping all lookups in it.
File '/home/kimmob/code/design-system/node_modules/react/index.ts' does not exist.
File '/home/kimmob/code/design-system/node_modules/react/index.tsx' does not exist.
File '/home/kimmob/code/design-system/node_modules/react/index.d.ts' does not exist.
Found 'package.json' at '/home/kimmob/code/design-system/node_modules/@types/react/package.json'.
'package.json' does not have a 'typesVersions' field.
File '/home/kimmob/code/design-system/node_modules/@types/react.d.ts' does not exist.
'package.json' does not have a 'typings' field.
'package.json' has 'types' field 'index.d.ts' that references '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts'.
File '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts' exist - use it as a name resolution result.
Resolving real path for '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts', result '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts'.
======== Module name 'react' was successfully resolved to '/home/kimmob/code/design-system/node_modules/@types/react/index.d.ts' with Package ID '@types/react/index.d.ts@17.0.2'. ========
Any ideas why this could happen? My suspicion is that jest is doing something with the require mechanics that causes the issue. It only occurs when running through jest.
kimmobrunfeldt commented
The issue in this library is more of a question and a reference for others possibly encountering the issue in the future. But I think it's a jest issue, so reported the same issue in their issue tracker: jestjs/jest#11117
cyberalien commented
Sorry for very very long delay. Somehow missed this issue.
Thanks for test repo, it was helpful. There is indeed something weird happening with it. In version 1 of component that your repo is using, there is nothing fishy going on, it is a simple functional component, so I don't understand why it would happen. Tested with version 2, it also throws error, but this time about forwardRef not existing. This is very weird.
Maybe issue is with @testing-library/react. I'm using react-test-renderer with jest without any issues.
Good news is with 3.0.0-dev it is working without any issues. I had to completely rewrite component before even releasing version 2.0 because due to a bad decision it was impossible to implement references to SVG.
kimmobrunfeldt commented
This got resolved, it was related to a tricky configuration accident. Fix in jestjs/jest#11117.