TypeError: context.stylis is not a function #78

AjaxSolutions · 2023-03-08T10:22:42Z

AjaxSolutions
Mar 8, 2023

I installed DevTools and I'm seeing an error. Any idea what might be happening?

I found this tip, but removing node_modules didn't help.

import React from "react";
import { createStore } from "jotai/vanilla";
import { Provider as JotaiProvider } from "jotai/react";
import { DevTools } from "jotai-devtools";

export const store = createStore();

export const Provider = ({ children }) => {
    return (
        <JotaiProvider store={store}>
            <DevTools store={store} />
            {children}
        </JotaiProvider>
    );
};

×
TypeError: context.stylis is not a function
insertStyles
src/cra/node_modules/@emotion/utils/dist/utils.browser.esm.js:29
  26 |   context.registered[context.key + "-" + insertable.name] = insertable.styles;
  27 | }
  28 | if (context.inserted[insertable.name] === undefined) {
> 29 |   var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
     | ^  30 |   context.inserted[insertable.name] = true;
  31 |   {
  32 |     rules.forEach(context.sheet.insert, context.sheet);
View compiled
css
src/cra/node_modules/jotai-devtools/node_modules/@mantine/core/node_modules/@mantine/styles/esm/tss/use-css.js:77
  74 |     args
  75 |   } = getRef(styles);
  76 |   const serialized = serializeStyles(args, cache.registered);
> 77 |   insertStyles(cache, serialized, false);
     | ^  78 |   return `${cache.key}-${serialized.name}${ref === void 0 ? "" : ` ${ref}`}`;
  79 | };
  80 | const cx = function () {

arjunvegda · 2023-03-08T22:27:40Z

arjunvegda
Mar 8, 2023
Maintainer

That's interesting! Haven't encountered this before. 🤔 Could you provide a small repro of this issue?

0 replies

AjaxSolutions · 2023-03-09T16:54:46Z

AjaxSolutions
Mar 9, 2023
Author

It's hard to provide a small repro.
File: @emotion/utils/dist/utils.browser.esm.js
context.key is 'jotai-devtools'
context.stylis is undefined, this is the problem.

var isBrowser = true;
function getRegisteredStyles(registered, registeredStyles, classNames) {
  var rawClassName = '';
  classNames.split(' ').forEach(function (className) {
    if (registered[className] !== undefined) {
      registeredStyles.push(registered[className]);
    } else {
      rawClassName += className + " ";
    }
  });
  return rawClassName;
}
var insertStyles = function insertStyles(context, insertable, isStringTag) {
  if (
  // we only need to add the styles to the registered cache if the
  // class name could be used further down
  // the tree but if it's a string tag, we know it won't
  // so we don't have to add it to registered cache.
  // this improves memory usage since we can avoid storing the whole style string
  (isStringTag === false ||
  // we need to always store it if we're in compat mode and
  // in node since emotion-server relies on whether a style is in
  // the registered cache to know whether a style is global or not
  // also, note that this check will be dead code eliminated in the browser
  true === false && context.compat !== undefined) && context.registered[context.key + "-" + insertable.name] === undefined) {
    context.registered[context.key + "-" + insertable.name] = insertable.styles;
  }
  if (context.inserted[insertable.name] === undefined) {
    var rules = context.stylis("." + context.key + "-" + insertable.name, insertable.styles);
    context.inserted[insertable.name] = true;
    {
      rules.forEach(context.sheet.insert, context.sheet);
    }
  }
};
export { isBrowser, getRegisteredStyles, insertStyles };

0 replies

arjunvegda · 2023-03-10T02:46:08Z

arjunvegda
Mar 10, 2023
Maintainer

I wonder if this is caused by the emotion cache 🤔 that's the only place where we define a key. See: src/DevTools/utils/create-memoized-emotion-cache.ts#L15-L17

We use Storybook for local development, and it works as expected locally. Is your code open source? Perhaps I could take a look at your code.

0 replies

AjaxSolutions · 2023-03-16T10:32:06Z

AjaxSolutions
Mar 16, 2023
Author

Do you think this PR might help?

0 replies

arjunvegda · 2023-03-16T22:23:55Z

arjunvegda
Mar 16, 2023
Maintainer

Most likely not, because either way, we'll need to install @emotion/react 🤔 I'm starting to believe that this could be a bug in Storybook.

What version of Storybook and React are you using? I'll try to reproduce it on my end.

0 replies

AjaxSolutions · 2023-05-03T18:29:35Z

AjaxSolutions
May 3, 2023
Author

I'm sorry about the late response. This is still a problem.

"@storybook/addon-storysource": "5.3.18",
"@storybook/react": "^5.3.18",
"@storybook/theming": "^5.3.18",

"react": "^17.0.2",

0 replies

arjunvegda · 2023-05-03T21:34:15Z

arjunvegda
May 3, 2023
Maintainer

Could you try updating your Storybook to the latest version?

0 replies

AjaxSolutions · 2023-05-03T22:04:26Z

AjaxSolutions
May 3, 2023
Author

I tried and it didn't help.

0 replies

arjunvegda · 2023-05-03T23:08:33Z

arjunvegda
May 3, 2023
Maintainer

Works fine on my end 🤔. See this CodeSandbox (You'll probably need to restart the codesandbox script)

0 replies

AjaxSolutions · 2023-05-08T19:40:43Z

AjaxSolutions
May 8, 2023
Author

There is some progress, but I'm now getting a different error.
This is my code:

import React from "react";
import { createStore } from "jotai/vanilla";
import { Provider as JotaiProvider } from "jotai/react";
import { DevTools } from 'jotai-devtools';

export const store = createStore();

export const Provider = ({ children }) => {
	return (
		<JotaiProvider store={store}>
			<DevTools store={store} />
			{children}
		</JotaiProvider>
	);
};

This is the error. Any idea?

dex.js:1273 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
console.<computed> @ index.js:1273
printWarning @ react.development.js:187
error @ react.development.js:164
resolveDispatcher @ react.development.js:1406
useRef @ react.development.js:1440
DevToolsProvider @ chunk-BS4JQKQQ.cjs.js:1536
renderWithHooks @ react-dom.development.js:12980
mountIndeterminateComponent @ react-dom.development.js:15463
beginWork @ react-dom.development.js:16517
beginWork$1 @ react-dom.development.js:20634
performUnitOfWork @ react-dom.development.js:19666
workLoopSync @ react-dom.development.js:19611
renderRootSync @ react-dom.development.js:19581
performSyncWorkOnRoot @ react-dom.development.js:19251
scheduleUpdateOnFiber @ react-dom.development.js:18891
updateContainer @ react-dom.development.js:21963
(anonymous) @ react-dom.development.js:22406
unbatchedUpdates @ react-dom.development.js:19372
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22405
render @ react-dom.development.js:22470
(anonymous) @ app-entry.js:6
./src/app-entry.js @ app-entry.js:9
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ errorHandlers.ts:18
./src/index.js @ index.js:3
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ query-param-utils.ts:87
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1273 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
console.<computed> @ index.js:1273
printWarning @ react.development.js:187
error @ react.development.js:164
resolveDispatcher @ react.development.js:1406
useRef @ react.development.js:1440
DevToolsProvider @ chunk-BS4JQKQQ.cjs.js:1536
renderWithHooks @ react-dom.development.js:12980
mountIndeterminateComponent @ react-dom.development.js:15463
beginWork @ react-dom.development.js:16517
callCallback @ react-dom.development.js:3555
invokeGuardedCallbackDev @ react-dom.development.js:3599
invokeGuardedCallback @ react-dom.development.js:3654
beginWork$1 @ react-dom.development.js:20655
performUnitOfWork @ react-dom.development.js:19666
workLoopSync @ react-dom.development.js:19611
renderRootSync @ react-dom.development.js:19581
performSyncWorkOnRoot @ react-dom.development.js:19251
scheduleUpdateOnFiber @ react-dom.development.js:18891
updateContainer @ react-dom.development.js:21963
(anonymous) @ react-dom.development.js:22406
unbatchedUpdates @ react-dom.development.js:19372
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22405
render @ react-dom.development.js:22470
(anonymous) @ app-entry.js:6
./src/app-entry.js @ app-entry.js:9
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ errorHandlers.ts:18
./src/index.js @ index.js:3
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ query-param-utils.ts:87
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
react.development.js:1441 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1441:1)
    at DevToolsProvider (chunk-BS4JQKQQ.cjs.js:1536:1)
    at renderWithHooks (react-dom.development.js:12980:1)
    at mountIndeterminateComponent (react-dom.development.js:15463:1)
    at beginWork (react-dom.development.js:16517:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3555:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3599:1)
    at invokeGuardedCallback (react-dom.development.js:3654:1)
    at beginWork$1 (react-dom.development.js:20655:1)
    at performUnitOfWork (react-dom.development.js:19666:1)
    at workLoopSync (react-dom.development.js:19611:1)
    at renderRootSync (react-dom.development.js:19581:1)
    at performSyncWorkOnRoot (react-dom.development.js:19251:1)
    at scheduleUpdateOnFiber (react-dom.development.js:18891:1)
    at updateContainer (react-dom.development.js:21963:1)
    at react-dom.development.js:22406:1
    at unbatchedUpdates (react-dom.development.js:19372:1)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:22405:1)
    at Object.render (react-dom.development.js:22470:1)
    at Module.<anonymous> (app-entry.js:6:1)
    at ./src/app-entry.js (app-entry.js:9:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (errorHandlers.ts:18:1)
    at ./src/index.js (index.js:3:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at 1 (query-param-utils.ts:87:1)
    at __webpack_require__ (bootstrap:856:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:67
useRef @ react.development.js:1441
DevToolsProvider @ chunk-BS4JQKQQ.cjs.js:1536
renderWithHooks @ react-dom.development.js:12980
mountIndeterminateComponent @ react-dom.development.js:15463
beginWork @ react-dom.development.js:16517
callCallback @ react-dom.development.js:3555
invokeGuardedCallbackDev @ react-dom.development.js:3599
invokeGuardedCallback @ react-dom.development.js:3654
beginWork$1 @ react-dom.development.js:20655
performUnitOfWork @ react-dom.development.js:19666
workLoopSync @ react-dom.development.js:19611
renderRootSync @ react-dom.development.js:19581
performSyncWorkOnRoot @ react-dom.development.js:19251
scheduleUpdateOnFiber @ react-dom.development.js:18891
updateContainer @ react-dom.development.js:21963
(anonymous) @ react-dom.development.js:22406
unbatchedUpdates @ react-dom.development.js:19372
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22405
render @ react-dom.development.js:22470
(anonymous) @ app-entry.js:6
./src/app-entry.js @ app-entry.js:9
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ errorHandlers.ts:18
./src/index.js @ index.js:3
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ query-param-utils.ts:87
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
react-dom.development.js:61 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Select
printWarning @ react-dom.development.js:61
warn @ react-dom.development.js:32
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:10102
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:20541
commitRootImpl @ react-dom.development.js:19860
unstable_runWithPriority @ scheduler.development.js:401
runWithPriority$1 @ react-dom.development.js:9891
commitRoot @ react-dom.development.js:19847
performSyncWorkOnRoot @ react-dom.development.js:19282
scheduleUpdateOnFiber @ react-dom.development.js:18891
updateContainer @ react-dom.development.js:21963
(anonymous) @ react-dom.development.js:22406
unbatchedUpdates @ react-dom.development.js:19372
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22405
render @ react-dom.development.js:22470
(anonymous) @ app-entry.js:6
./src/app-entry.js @ app-entry.js:9
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ errorHandlers.ts:18
./src/index.js @ index.js:3
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ query-param-utils.ts:87
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1273 The above error occurred in the <DevToolsProvider> component:

    at DevToolsProvider (http://localhost:3006/static/js/vendors~main.chunk.js:208120:5)
    at InternalDevTools
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:130545:5)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
    at App (http://localhost:3006/static/js/main.chunk.js:302:58)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)

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.
console.<computed> @ index.js:1273
logCapturedError @ react-dom.development.js:17378
update.callback @ react-dom.development.js:17408
callCallback @ react-dom.development.js:10771
commitUpdateQueue @ react-dom.development.js:10789
commitLifeCycles @ react-dom.development.js:17926
commitLayoutEffects @ react-dom.development.js:20211
callCallback @ react-dom.development.js:3555
invokeGuardedCallbackDev @ react-dom.development.js:3599
invokeGuardedCallback @ react-dom.development.js:3654
commitRootImpl @ react-dom.development.js:19982
unstable_runWithPriority @ scheduler.development.js:401
runWithPriority$1 @ react-dom.development.js:9891
commitRoot @ react-dom.development.js:19847
performSyncWorkOnRoot @ react-dom.development.js:19282
scheduleUpdateOnFiber @ react-dom.development.js:18891
updateContainer @ react-dom.development.js:21963
(anonymous) @ react-dom.development.js:22406
unbatchedUpdates @ react-dom.development.js:19372
legacyRenderSubtreeIntoContainer @ react-dom.development.js:22405
render @ react-dom.development.js:22470
(anonymous) @ app-entry.js:6
./src/app-entry.js @ app-entry.js:9
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
(anonymous) @ errorHandlers.ts:18
./src/index.js @ index.js:3
__webpack_require__ @ bootstrap:856
fn @ bootstrap:150
1 @ query-param-utils.ts:87
__webpack_require__ @ bootstrap:856
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
react.development.js:1441 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1441:1)
    at DevToolsProvider (chunk-BS4JQKQQ.cjs.js:1536:1)
    at renderWithHooks (react-dom.development.js:12980:1)
    at mountIndeterminateComponent (react-dom.development.js:15463:1)
    at beginWork (react-dom.development.js:16517:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3555:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3599:1)
    at invokeGuardedCallback (react-dom.development.js:3654:1)
    at beginWork$1 (react-dom.development.js:20655:1)
    at performUnitOfWork (react-dom.development.js:19666:1)
    at workLoopSync (react-dom.development.js:19611:1)
    at renderRootSync (react-dom.development.js:19581:1)
    at performSyncWorkOnRoot (react-dom.development.js:19251:1)
    at scheduleUpdateOnFiber (react-dom.development.js:18891:1)
    at updateContainer (react-dom.development.js:21963:1)
    at react-dom.development.js:22406:1
    at unbatchedUpdates (react-dom.development.js:19372:1)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:22405:1)
    at Object.render (react-dom.development.js:22470:1)
    at Module.<anonymous> (app-entry.js:6:1)
    at ./src/app-entry.js (app-entry.js:9:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (errorHandlers.ts:18:1)
    at ./src/index.js (index.js:3:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at 1 (query-param-utils.ts:87:1)
    at __webpack_require__ (bootstrap:856:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:67

0 replies

AjaxSolutions · 2023-05-08T19:48:13Z

AjaxSolutions
May 8, 2023
Author

TypeError: Cannot read properties of null (reading 'useRef')
useRef
node_modules/react/cjs/react.development.js:1441
  1438 | }
  1439 | function useRef(initialValue) {
  1440 |   var dispatcher = resolveDispatcher();
> 1441 |   return dispatcher.useRef(initialValue);
       | ^  1442 | }
  1443 | function useEffect(create, deps) {
  1444 |   var dispatcher = resolveDispatcher();
View compiled
DevToolsProvider
node_modules/jotai-devtools/dist/chunk-BS4JQKQQ.cjs.js:1536
  1533 | let {
  1534 |   children
  1535 | } = _ref24;
> 1536 | const internalStoreRef = React22.useRef();
       | ^  1537 | if (!internalStoreRef.current) {
  1538 |   internalStoreRef.current = _vanilla.createStore.call(void 0);
  1539 | }
View compiled
renderWithHooks
src/cra/node_modules/react-dom/cjs/react-dom.development.js:12980
  12977 |     ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;
  12978 |   }
  12979 | }
> 12980 | var children = Component(props, secondArg); // Check if there was a render phase update
        | ^  12981 | 
  12982 | if (didScheduleRenderPhaseUpdateDuringThisPass) {
  12983 |   // Keep rendering in a loop for as long as render phase updates continue to

0 replies

arjunvegda · 2023-05-08T20:45:32Z

arjunvegda
May 8, 2023
Maintainer

Could this be a tooling issue on your end? 🤔 Are you able to share the project or able to create a small repro?

0 replies

AjaxSolutions · 2023-05-08T20:57:06Z

AjaxSolutions
May 8, 2023
Author

I'm not able to share the project, but give me some ideas what check.
I have another store and another Provider which causes the same error.
I commented out DevTools in the first provider.

import React from "react";
import { createStore } from "jotai/vanilla";
import { Provider as JotaiProvider } from "jotai/react";
import useConstant from "components/utility/hooks/useConstant";
import { DevTools } from 'jotai-devtools';

export let store;

export const Provider = ({ children }) => {
	store = useConstant(createStore);
	return (
		<JotaiProvider store={store}>
			<DevTools store={store} />
			{children}
		</JotaiProvider>
	);
};

0 replies

AjaxSolutions · 2023-05-08T20:59:39Z

AjaxSolutions
May 8, 2023
Author


index.js:1273 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at DevToolsProvider (http://localhost:3006/static/js/vendors~main.chunk.js:208120:5)
    at InternalDevTools
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:133766:5)
    at ErrorBoundary (http://localhost:3006/static/js/vendors~main.chunk.js:338276:37)
    at span
    at FocusTrap (http://localhost:3006/static/js/main.chunk.js:158445:5)
    at Transition (http://localhost:3006/static/js/vendors~main.chunk.js:356832:30)
    at CSSTransition (http://localhost:3006/static/js/vendors~main.chunk.js:356054:35)
    at Transition (http://localhost:3006/static/js/main.chunk.js:177262:5)
    at TransitionModal (http://localhost:3006/static/js/main.chunk.js:177405:5)
    at div
    at Route (http://localhost:3006/static/js/vendors~main.chunk.js:346520:29)
    at SmaListingClass (http://localhost:3006/static/js/main.chunk.js:116832:5)
    at SmaListing (http://localhost:3006/static/js/main.chunk.js:117195:98)
    at div
    at Listing (http://localhost:3006/static/js/main.chunk.js:73621:85)
    at div
    at HomeClass (http://localhost:3006/static/js/main.chunk.js:33109:5)
    at Home (http://localhost:3006/static/js/main.chunk.js:33418:102)
    at Suspense
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:130545:5)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
    at App (http://localhost:3006/static/js/main.chunk.js:302:58)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
console.<computed> @ index.js:1273
overrideMethod @ react_devtools_backend_compact.js:2367
printWarning @ react.development.js:187
error @ react.development.js:164
resolveDispatcher @ react.development.js:1406
useRef @ react.development.js:1440
DevToolsProvider @ chunk-BS4JQKQQ.cjs.js:1536
renderWithHooks @ react-dom.development.js:12980
mountIndeterminateComponent @ react-dom.development.js:15463
beginWork @ react-dom.development.js:16517
beginWork$1 @ react-dom.development.js:20634
performUnitOfWork @ react-dom.development.js:19666
workLoopSync @ react-dom.development.js:19611
renderRootSync @ react-dom.development.js:19581
performSyncWorkOnRoot @ react-dom.development.js:19251
(anonymous) @ react-dom.development.js:9937
unstable_runWithPriority @ scheduler.development.js:401
runWithPriority$1 @ react-dom.development.js:9891
flushSyncCallbackQueueImpl @ react-dom.development.js:9933
flushSyncCallbackQueue @ react-dom.development.js:9922
discreteUpdates$1 @ react-dom.development.js:19362
discreteUpdates @ react-dom.development.js:3388
dispatchDiscreteEvent @ react-dom.development.js:5205
index.js:1273 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. 
    at DevToolsProvider (http://localhost:3006/static/js/vendors~main.chunk.js:208120:5)
    at InternalDevTools
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:133766:5)
    at ErrorBoundary (http://localhost:3006/static/js/vendors~main.chunk.js:338276:37)
    at span
    at FocusTrap (http://localhost:3006/static/js/main.chunk.js:158445:5)
    at Transition (http://localhost:3006/static/js/vendors~main.chunk.js:356832:30)
    at CSSTransition (http://localhost:3006/static/js/vendors~main.chunk.js:356054:35)
    at Transition (http://localhost:3006/static/js/main.chunk.js:177262:5)
    at TransitionModal (http://localhost:3006/static/js/main.chunk.js:177405:5)
    at div
    at Route (http://localhost:3006/static/js/vendors~main.chunk.js:346520:29)
    at SmaListingClass (http://localhost:3006/static/js/main.chunk.js:116832:5)
    at SmaListing (http://localhost:3006/static/js/main.chunk.js:117195:98)
    at div
    at Listing (http://localhost:3006/static/js/main.chunk.js:73621:85)
    at div
    at HomeClass (http://localhost:3006/static/js/main.chunk.js:33109:5)
    at Home (http://localhost:3006/static/js/main.chunk.js:33418:102)
    at Suspense
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:130545:5)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
    at App (http://localhost:3006/static/js/main.chunk.js:302:58)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
console.<computed> @ index.js:1273
overrideMethod @ react_devtools_backend_compact.js:2367
printWarning @ react.development.js:187
error @ react.development.js:164
resolveDispatcher @ react.development.js:1406
useRef @ react.development.js:1440
DevToolsProvider @ chunk-BS4JQKQQ.cjs.js:1536
renderWithHooks @ react-dom.development.js:12980
mountIndeterminateComponent @ react-dom.development.js:15463
beginWork @ react-dom.development.js:16517
callCallback @ react-dom.development.js:3555
invokeGuardedCallbackDev @ react-dom.development.js:3599
invokeGuardedCallback @ react-dom.development.js:3654
beginWork$1 @ react-dom.development.js:20655
performUnitOfWork @ react-dom.development.js:19666
workLoopSync @ react-dom.development.js:19611
renderRootSync @ react-dom.development.js:19581
performSyncWorkOnRoot @ react-dom.development.js:19251
(anonymous) @ react-dom.development.js:9937
unstable_runWithPriority @ scheduler.development.js:401
runWithPriority$1 @ react-dom.development.js:9891
flushSyncCallbackQueueImpl @ react-dom.development.js:9933
flushSyncCallbackQueue @ react-dom.development.js:9922
discreteUpdates$1 @ react-dom.development.js:19362
discreteUpdates @ react-dom.development.js:3388
dispatchDiscreteEvent @ react-dom.development.js:5205
react.development.js:1441 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1441:1)
    at DevToolsProvider (chunk-BS4JQKQQ.cjs.js:1536:1)
    at renderWithHooks (react-dom.development.js:12980:1)
    at mountIndeterminateComponent (react-dom.development.js:15463:1)
    at beginWork (react-dom.development.js:16517:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3555:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3599:1)
    at invokeGuardedCallback (react-dom.development.js:3654:1)
    at beginWork$1 (react-dom.development.js:20655:1)
    at performUnitOfWork (react-dom.development.js:19666:1)
    at workLoopSync (react-dom.development.js:19611:1)
    at renderRootSync (react-dom.development.js:19581:1)
    at performSyncWorkOnRoot (react-dom.development.js:19251:1)
    at react-dom.development.js:9937:1
    at unstable_runWithPriority (scheduler.development.js:401:1)
    at runWithPriority$1 (react-dom.development.js:9891:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:9933:1)
    at flushSyncCallbackQueue (react-dom.development.js:9922:1)
    at discreteUpdates$1 (react-dom.development.js:19362:1)
    at discreteUpdates (react-dom.development.js:3388:1)
    at dispatchDiscreteEvent (react-dom.development.js:5205:1)
useRef @ react.development.js:1441
DevToolsProvider @ chunk-BS4JQKQQ.cjs.js:1536
renderWithHooks @ react-dom.development.js:12980
mountIndeterminateComponent @ react-dom.development.js:15463
beginWork @ react-dom.development.js:16517
callCallback @ react-dom.development.js:3555
invokeGuardedCallbackDev @ react-dom.development.js:3599
invokeGuardedCallback @ react-dom.development.js:3654
beginWork$1 @ react-dom.development.js:20655
performUnitOfWork @ react-dom.development.js:19666
workLoopSync @ react-dom.development.js:19611
renderRootSync @ react-dom.development.js:19581
performSyncWorkOnRoot @ react-dom.development.js:19251
(anonymous) @ react-dom.development.js:9937
unstable_runWithPriority @ scheduler.development.js:401
runWithPriority$1 @ react-dom.development.js:9891
flushSyncCallbackQueueImpl @ react-dom.development.js:9933
flushSyncCallbackQueue @ react-dom.development.js:9922
discreteUpdates$1 @ react-dom.development.js:19362
discreteUpdates @ react-dom.development.js:3388
dispatchDiscreteEvent @ react-dom.development.js:5205
index.js:1273 The above error occurred in the <DevToolsProvider> component:

    at DevToolsProvider (http://localhost:3006/static/js/vendors~main.chunk.js:208120:5)
    at InternalDevTools
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:133766:5)
    at ErrorBoundary (http://localhost:3006/static/js/vendors~main.chunk.js:338276:37)
    at span
    at FocusTrap (http://localhost:3006/static/js/main.chunk.js:158445:5)
    at Transition (http://localhost:3006/static/js/vendors~main.chunk.js:356832:30)
    at CSSTransition (http://localhost:3006/static/js/vendors~main.chunk.js:356054:35)
    at Transition (http://localhost:3006/static/js/main.chunk.js:177262:5)
    at TransitionModal (http://localhost:3006/static/js/main.chunk.js:177405:5)
    at div
    at Route (http://localhost:3006/static/js/vendors~main.chunk.js:346520:29)
    at SmaListingClass (http://localhost:3006/static/js/main.chunk.js:116832:5)
    at SmaListing (http://localhost:3006/static/js/main.chunk.js:117195:98)
    at div
    at Listing (http://localhost:3006/static/js/main.chunk.js:73621:85)
    at div
    at HomeClass (http://localhost:3006/static/js/main.chunk.js:33109:5)
    at Home (http://localhost:3006/static/js/main.chunk.js:33418:102)
    at Suspense
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:130545:5)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
    at App (http://localhost:3006/static/js/main.chunk.js:302:58)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
console.<computed> @ index.js:1273
overrideMethod @ react_devtools_backend_compact.js:2367
logCapturedError @ react-dom.development.js:17378
update.payload @ react-dom.development.js:17419
getStateFromUpdate @ react-dom.development.js:10586
processUpdateQueue @ react-dom.development.js:10713
resumeMountClassInstance @ react-dom.development.js:11261
updateClassComponent @ react-dom.development.js:15145
beginWork @ react-dom.development.js:16536
beginWork$1 @ react-dom.development.js:20634
performUnitOfWork @ react-dom.development.js:19666
workLoopSync @ react-dom.development.js:19611
renderRootSync @ react-dom.development.js:19581
performSyncWorkOnRoot @ react-dom.development.js:19251
(anonymous) @ react-dom.development.js:9937
unstable_runWithPriority @ scheduler.development.js:401
runWithPriority$1 @ react-dom.development.js:9891
flushSyncCallbackQueueImpl @ react-dom.development.js:9933
flushSyncCallbackQueue @ react-dom.development.js:9922
discreteUpdates$1 @ react-dom.development.js:19362
discreteUpdates @ react-dom.development.js:3388
dispatchDiscreteEvent @ react-dom.development.js:5205
index.js:1273 Uncaught error at component boundary:  TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (react.development.js:1441:1)
    at DevToolsProvider (chunk-BS4JQKQQ.cjs.js:1536:1)
    at renderWithHooks (react-dom.development.js:12980:1)
    at mountIndeterminateComponent (react-dom.development.js:15463:1)
    at beginWork (react-dom.development.js:16517:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3555:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3599:1)
    at invokeGuardedCallback (react-dom.development.js:3654:1)
    at beginWork$1 (react-dom.development.js:20655:1)
    at performUnitOfWork (react-dom.development.js:19666:1)
    at workLoopSync (react-dom.development.js:19611:1)
    at renderRootSync (react-dom.development.js:19581:1)
    at performSyncWorkOnRoot (react-dom.development.js:19251:1)
    at react-dom.development.js:9937:1
    at unstable_runWithPriority (scheduler.development.js:401:1)
    at runWithPriority$1 (react-dom.development.js:9891:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:9933:1)
    at flushSyncCallbackQueue (react-dom.development.js:9922:1)
    at discreteUpdates$1 (react-dom.development.js:19362:1)
    at discreteUpdates (react-dom.development.js:3388:1)
    at dispatchDiscreteEvent (react-dom.development.js:5205:1) 
    at ErrorFallback (http://localhost:3006/static/js/main.chunk.js:151663:5)
    at ErrorBoundary (http://localhost:3006/static/js/vendors~main.chunk.js:338276:37)
    at span
    at FocusTrap (http://localhost:3006/static/js/main.chunk.js:158445:5)
    at Transition (http://localhost:3006/static/js/vendors~main.chunk.js:356832:30)
    at CSSTransition (http://localhost:3006/static/js/vendors~main.chunk.js:356054:35)
    at Transition (http://localhost:3006/static/js/main.chunk.js:177262:5)
    at TransitionModal (http://localhost:3006/static/js/main.chunk.js:177405:5)
    at div
    at Route (http://localhost:3006/static/js/vendors~main.chunk.js:346520:29)
    at SmaListingClass (http://localhost:3006/static/js/main.chunk.js:116832:5)
    at SmaListing (http://localhost:3006/static/js/main.chunk.js:117195:98)
    at div
    at Listing (http://localhost:3006/static/js/main.chunk.js:73621:85)
    at div
    at HomeClass (http://localhost:3006/static/js/main.chunk.js:33109:5)
    at Home (http://localhost:3006/static/js/main.chunk.js:33418:102)
    at Suspense
    at Provider (http://localhost:3006/static/js/vendors~main.chunk.js:288307:23)
    at Provider (http://localhost:3006/static/js/main.chunk.js:130545:5)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
    at App (http://localhost:3006/static/js/main.chunk.js:302:58)
    at Router (http://localhost:3006/static/js/vendors~main.chunk.js:346202:30)
    at BrowserRouter (http://localhost:3006/static/js/vendors~main.chunk.js:345859:35)
c

0 replies

MGray-ATX · 2023-05-08T21:37:02Z

MGray-ATX
May 8, 2023

Could the issue above be caused by mismatched React or react-dom versions? I see the general 'You might have mismatching versions of React and the renderer (such as React DOM)'. Jotai's current package.json says it is using v18.20 of React and react-dom. But in our application, we are using React (and react-dom) v17.0.2. I don't think there are two copies of React running, so wondering if using 17 is incompatible with jotai-devtools.

0 replies

arjunvegda · 2023-05-09T02:12:43Z

arjunvegda
May 9, 2023
Maintainer

@MGray-ATX / @AjaxSolutions - Jotai DevTools supports react >=17.0.0. The 18.2.0 you're seeing in the package.json is part of the devDependencies for Jotai DevTools.

Here is a Sandbox with React 17 + latest Storybook, so doesn't seem like a react 17 issue. 🤔

You make a valid point though — could be this error You might have mismatching versions of React and the renderer (such as React DOM) 🤔

Could you run one of these to verify if all the versions of react and react-dom are deduped and exactly match what you're using? Feel free to post the output here if too if you're unsure

# if you're using npm
npm list react react-dom

# or if you're using yarn
yarn list react react-dom

0 replies

MGray-ATX · 2023-05-09T13:54:20Z

MGray-ATX
May 9, 2023

@arjunvegda Thanks for the response. I had checked that already, and we are using 17.0.2 across everything (for both React and react-dom). The app was set up with create-react-app. It hasn't been ejected, or had the Webpack modified. It's a stock installation.

0 replies

AjaxSolutions · 2023-05-09T14:25:55Z

AjaxSolutions
May 9, 2023
Author

@arjunvegda This is our setup. I'm not able to fork your sandbox.

import React from "react";
import { storiesOf } from "@storybook/react";
import { DevTools } from "jotai-devtools";
import { Counter } from "../Counter";
import { createStore } from "jotai/vanilla";
import { Provider as JotaiProvider } from "jotai/react";

const store = createStore();

storiesOf("DevTools", module).add("default", () => (
  <div>
    <JotaiProvider store={store}>
      <DevTools isInitialOpen store={store}  />
      <Counter />
    </JotaiProvider>
  </div>
));

0 replies

arjunvegda · 2023-05-10T02:04:46Z

arjunvegda
May 10, 2023
Maintainer

I'm not able to fork your sandbox.

Oh, that's strange! 🤔

I update my CodeSandbox with the code snippet you provided. Works as expected.

Is this only an issue with Storybook? Does the DevTools work outside of the storybook i.e. in your main application?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: context.stylis is not a function #78

{{title}}

Replies: 19 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

TypeError: context.stylis is not a function #78

AjaxSolutions Mar 8, 2023

Replies: 19 comments

arjunvegda Mar 8, 2023 Maintainer

AjaxSolutions Mar 9, 2023 Author

arjunvegda Mar 10, 2023 Maintainer

AjaxSolutions Mar 16, 2023 Author

arjunvegda Mar 16, 2023 Maintainer

AjaxSolutions May 3, 2023 Author

arjunvegda May 3, 2023 Maintainer

AjaxSolutions May 3, 2023 Author

arjunvegda May 3, 2023 Maintainer

AjaxSolutions May 8, 2023 Author

AjaxSolutions May 8, 2023 Author

arjunvegda May 8, 2023 Maintainer

AjaxSolutions May 8, 2023 Author

AjaxSolutions May 8, 2023 Author

MGray-ATX May 8, 2023

arjunvegda May 9, 2023 Maintainer

MGray-ATX May 9, 2023

AjaxSolutions May 9, 2023 Author

arjunvegda May 10, 2023 Maintainer

AjaxSolutions
Mar 8, 2023

arjunvegda
Mar 8, 2023
Maintainer

AjaxSolutions
Mar 9, 2023
Author

arjunvegda
Mar 10, 2023
Maintainer

AjaxSolutions
Mar 16, 2023
Author

arjunvegda
Mar 16, 2023
Maintainer

AjaxSolutions
May 3, 2023
Author

arjunvegda
May 3, 2023
Maintainer

AjaxSolutions
May 3, 2023
Author

arjunvegda
May 3, 2023
Maintainer

AjaxSolutions
May 8, 2023
Author

AjaxSolutions
May 8, 2023
Author

arjunvegda
May 8, 2023
Maintainer

AjaxSolutions
May 8, 2023
Author

AjaxSolutions
May 8, 2023
Author

MGray-ATX
May 8, 2023

arjunvegda
May 9, 2023
Maintainer

MGray-ATX
May 9, 2023

AjaxSolutions
May 9, 2023
Author

arjunvegda
May 10, 2023
Maintainer