Lightrun
question-mark
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.

Uncaught TypeError: Object(...) is not a function

See original GitHub issue

I’ve added latest “react-select”: “^4.1.0”, to the project and suddenly I am getting the following error:

Uncaught TypeError: Object(...) is not a function
    at createCache (emotion-cache.browser.esm.js?fb55:254)
    at eval (emotion-element-4fbd89c5.browser.esm.js?7121:17)
    at Module../node_modules/@emotion/react/dist/emotion-element-4fbd89c5.browser.esm.js (main.js:1331)
    at __webpack_require__ (main.js:790)
    at fn (main.js:101)
    at Module.eval (emotion-react.browser.esm.js?01e1:1)
    at eval (emotion-react.browser.esm.js?01e1:329)
    at Module../node_modules/@emotion/react/dist/emotion-react.browser.esm.js (main.js:1343)
    at __webpack_require__ (main.js:790)

I’ve also cleared node_modules folder and rebuilt the dependencies with yarn, but it’s the same error. Package.json:

  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@szhsin/react-menu": "^0.11.2",
    "abortcontroller-polyfill": "^1.5.0",
    "dayjs": "^1.10.4",
    "file-saver": "^2.0.5",
    "history": "4.10.1",
    "immer": "^8.0.0",
    "nanoid": "^3.1.20",
    "prettier": "^2.2.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-beautiful-dnd": "^13.0.0",
    "react-beforeunload": "^2.2.4",
    "react-datepicker": "^3.5.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-hot-toast": "^1.0.2",
    "react-laag": "^2.0.2",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-select": "^4.1.0",
    "react-virtuoso": "^1.5.5",
    "react-window": "^1.8.6",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.1.3",
    "redux-undo": "^1.0.1",
    "reselect": "^4.0.0",
    "talkr": "^2.1.0",
    "use-clipboard-copy": "^0.1.2",
    "whatwg-fetch": "^3.4.1",
    "yup": "^0.32.8"
  },

I don’t know if this might be some build issue, but this happened after I’ve added react-select to the project, nothing else afterwards.

Can someone help me fix this?

And yes, there are bunch of warnings:

react_devtools_backend.js:2430 [WDS] Warnings while compiling.
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:126
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 245:53-60
"export 'COMMENT' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 54:25-30
"export 'alloc' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 257:23-30
"export 'compile' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 54:9-16
"export 'dealloc' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 31:25-32
"export 'delimit' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 46:25-29
"export 'from' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 27:25-35
"export 'identifier' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 254:21-31
"export 'middleware' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 48:23-27
"export 'next' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 19:32-36
"export 'peek' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 38:28-32
"export 'peek' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 27:36-44
"export 'position' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 175:28-36
"export 'prefixer' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 257:13-22
"export 'serialize' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 241:29-38
"export 'stringify' was not found in 'stylis'
overrideMethod @ react_devtools_backend.js:2430
warnings @ client?81da:135
eval @ socket.js?e29c:47
sock.onmessage @ SockJSClient.js?0a33:67
EventTarget.dispatchEvent @ sockjs.js?9be2:170
eval @ sockjs.js?9be2:891
SockJS._transportMessage @ sockjs.js?9be2:889
EventEmitter.emit @ sockjs.js?9be2:86
WebSocketTransport.ws.onmessage @ sockjs.js?9be2:2965
react_devtools_backend.js:2430 ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 16:12-17
"export 'token' was not found in 'stylis'

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:25

github_iconTop GitHub Comments

17reactions
Methuselah96commented, Mar 1, 2021

Sorry, I meant to follow up here when we resolved this over email. The issue was with the Webpack config. The file-loader section looked like the screenshot below but without the , /node_modules/ at the end of the exclude array.

image

Changing the file-loader configuration to exclude the node_modules folder (as shown above) resolved the issue. The root issue was that the file being imported for stylis is node_modules/stylis/dist/stylis.mjs, so file-loader was trying to process it because it wasn’t in the exclude array.

5reactions
elie222commented, Jul 28, 2021

Ran into this issue too just now. Happened when I upgraded Storybook.

Deleting node_modules and running yarn again fixed this for me.

Read more comments on GitHub >

github_iconTop Results From Across the Web

JavaScript "Uncaught TypeError: object is not a function ...
My input (type=button) had an attribute name that was identical to a function name that was being called by the onClick event. Once...
Read more >
TypeError: "x" is not a function - JavaScript - MDN Web Docs
The JavaScript exception "is not a function" occurs when there was an attempt to call a value from a function, but the value...
Read more >
TypeError: Object(...) is not a function · Issue #14484 - GitHub
What is the current behaviour? I have created react functional component and implement state full logic using useState method but it throws an ......
Read more >
How to Handle JavaScript Uncaught TypeError: “x” is Not a ...
A typographical error in a function call. · Missing script library. · When a function is called on a property that is not...
Read more >
JavaScript: Uncaught TypeError: n is not a function
This error occurs if you try to execute a function that is not initialized or is not initialized correctly. This means that the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

no way to set primitive value(s) directly

Next page

Unable to disable focus on `Input `after click on `MultiValueRemove `component