search

jotaijs / jotai-devtools

A powerful toolkit to enhance your development experience with Jotai
https://jotai.org/docs/tools/devtools
MIT License
134 stars 33 forks source link

TypeError: context.stylis is not a function #36

Closed AjaxSolutions closed 1 year ago

AjaxSolutions commented 1 year ago

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.

https://github.com/storybookjs/storybook/issues/6093

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 commented 1 year ago

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

AjaxSolutions commented 1 year ago

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 };
arjunvegda commented 1 year ago

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.

AjaxSolutions commented 1 year ago

Do you think this PR might help?

arjunvegda commented 1 year ago

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.

AjaxSolutions commented 1 year ago

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",

arjunvegda commented 1 year ago

Could you try updating your Storybook to the latest version?

AjaxSolutions commented 1 year ago

I tried and it didn't help.

arjunvegda commented 1 year ago

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

AjaxSolutions commented 1 year ago

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
AjaxSolutions commented 1 year ago 
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
arjunvegda commented 1 year ago

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

AjaxSolutions commented 1 year ago

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>
    );
};
AjaxSolutions commented 1 year ago 

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
MGray-ATX commented 1 year ago

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.

arjunvegda commented 1 year ago

@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
MGray-ATX commented 1 year ago

@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.

AjaxSolutions commented 1 year ago

@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>
));
arjunvegda commented 1 year ago

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?