visgl / visgl/react-google-maps

[Bug] Different behaviour of context provider between yarn classic and yarn 4.3.x

Open
#441 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug needs more info
Dominant language
TypeScript
Stars
1.9k
Forks
193
Avg merge
3d 16h
Merged PRs (30d)
13

Description

Description

I'm not 100% sure the issue is specific to this library or a react issue, but given the information I have at the moment it seems to point here.

I'm working on an NX monorepo project with a componentlibrary (and a few other libs) and 2 gatsby based websites.
The gatsby project is running Webpack 5 and Gatsby 5.12. In the componentlibrary I created a component that makes use of the map, advancedmarker components and library hooks. In the component library's storybook and in the website project that consumes the library, I placed the in the root with the other providers. This with the aim to have the context available to all components (many levels deep)

The package manager for the project is Yarn (Classic; v1.22.22).
Today I tried to upgrade the yarn version to the lasest berry (v4.3) release.

After changing the yarn version and reinstalling the packages.
My component using the map threw an error: " can only be used inside an component."
Trying to render a map as a direct child of the provider works fine, the one many levels deep does not.
yarn node-linker for 4.3 set to node-modules for compatibility

Reverting the yarn to classic version made the error disappear.
Haven't gone through the whole site, but so far this seems to be the only component / usecase having issues.

Steps to Reproduce

Setup NX project with

  • Gatsby 5 based website connecting to graphql that consumes component library in the same project
  • Component library using typescript (.ts and .tsx files) that gets built using rollup ("@nx/rollup": "19.1.0") & babel ("@babel/core": "^7.19.6")

yarn nodeLinker set to node-modules in yarnrc.yml

Terminal command: yarn set version berry; rm -rf node_modules; yarn install; yarn clean; yarn develop
(yarn clean and yarn develop execute gatsby clean and gatsby develop respectively)
Result: no errors in terminal, but opening the page with the component results in Unhandled Runtime Error message " can only be used inside an component." popup from gatsby + error boundary triggered & log in console.

Terminate the develop process in terminal and run yarn set version classic; rm -rf node_modules; yarn install; yarn clean; yarn develop
Result: everything works as intended, no error messages.

Nothing else changed apart from the yarn version and reinstalling packages between the 2 runs.

Environment
  • Library version: @vis.gl/react-google-maps@^1.1.0
  • Google maps version: weekly (no specific version passed to the APIProvider)
  • Browser and Version: Firefox 127.0.2 & Chrome 126.0.6478.127 (ARM 64)
  • OS: macOS Sonoma 14.5
  • yarn versions: 1.22.22 & 4.3.x
  • yarn nodeLinker for 4.3 set to node-modules for compatibility
Logs
helpers.js:124 Uncaught Error: <Map> can only be used inside an <ApiProvider> component.
    at Map (index.modern.mjs:847:11)
    at renderWithHooks (react-dom.development.js:15486:18)
    at mountIndeterminateComponent (react-dom.development.js:20098:13)
    at beginWork (react-dom.development.js:21621:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at HTMLUnknownElement.sentryWrapped (helpers.js:102:17)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27485:7)
    at performUnitOfWork (react-dom.development.js:26591:12)
    at workLoopSync (react-dom.development.js:26500:5)
    at renderRootSync (react-dom.development.js:26468:7)
    at recoverFromConcurrentError (react-dom.development.js:25884:20)
    at performConcurrentWorkOnRoot (react-dom.development.js:25784:22)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21)


head-export-handler-for-browser.js:72 The above error occurred in the <Map> component:

    at Map (webpack-internal:///../../node_modules/@vis.gl/react-google-maps/dist/index.modern.mjs:839:5)
    at InteractiveMap (webpack-internal:///../../libs/ui-babel/src/lib/modules/DealerOverviewModule/InteractiveMap/InteractiveMap.tsx:52:5)
    at ErrorBoundary (webpack-internal:///../../libs/ui-babel/src/lib/components/ErrorBoundary/ErrorBoundary.tsx:20:30)
    at div
    at section
    at DealerOverviewModule (webpack-internal:///../../libs/ui-babel/src/lib/modules/DealerOverviewModule/DealerOverviewModule.tsx:89:5)
    at ErrorBoundary (webpack-internal:///../../libs/ui-babel/src/lib/components/ErrorBoundary/ErrorBoundary.tsx:20:30)
    at PageItems (webpack-internal:///./src/ui-lib/components/Modules/PageItems/index.tsx:16:3)
    at BasicPage (webpack-internal:///./src/ui-lib/components/templates/BasicPage/BasicPage.tsx:44:3)
    at div
    at APIProvider (webpack-internal:///../../node_modules/@vis.gl/react-google-maps/dist/index.umd.js:537:26)
    at main
    at O (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:32:23383)
    at div
    at render
    at O (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:32:23383)
    at div
    at render
    at O (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:32:23383)
    at MainLayout (webpack-internal:///./src/ui-lib/components/Layout/MainLayout.tsx:78:3)
    at eval (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:32:28363)
    at ErrorBoundary (webpack-internal:///../../libs/ui-babel/src/lib/components/ErrorBoundary/ErrorBoundary.tsx:20:30)
    at Layout (webpack-internal:///./src/components/layout/index.tsx:363:3)
    at G (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9074)
    at BasicPage (webpack-internal:///./src/templates/BasicPage.tsx?export=default:42:3)
    at nt (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:32:20177)
    at IntlProvider (webpack-internal:///../../node_modules/react-intl/lib/src/components/provider.js:39:47)
    at PageWrapper (webpack-internal:///./src/ui-lib/components/Layout/PageWrapper.tsx:26:3)
    at ErrorBoundary (webpack-internal:///../../libs/ui-babel/src/lib/components/ErrorBoundary/ErrorBoundary.tsx:20:30)
    at PageRenderer (webpack-internal:///./.cache/page-renderer.js:22:47)
    at PageQueryStore (webpack-internal:///./.cache/query-result-store.js:24:5)
    at RouteHandler
    at div
    at re (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9865)
    at ee (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9680)
    at ae (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:10957)
    at oe (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:10831)
    at ScrollHandler (webpack-internal:///../../node_modules/gatsby-react-router-scroll/scroll-handler.js:23:35)
    at RouteUpdates (webpack-internal:///./.cache/navigation.js:227:5)
    at EnsureResources (webpack-internal:///./.cache/ensure-resources.js:17:5)
    at LocationHandler (webpack-internal:///./.cache/root.js:39:1)
    at eval (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:8283)
    at F (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:7181)
    at H (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:7483)
    at WithErrorBoundary()
    at G (webpack-internal:///../../node_modules/@gatsbyjs/reach-router/dist/index.modern.mjs:36:9074)
    at Root
    at Ge (webpack-internal:///../../node_modules/styled-components/dist/styled-components.browser.esm.js:32:15933)
    at StaticQueryStore (webpack-internal:///./.cache/query-result-store.js:97:5)
    at SliceDataStore (webpack-internal:///./.cache/query-result-store.js:135:5)
    at ErrorBoundary (webpack-internal:///./.cache/fast-refresh-overlay/components/error-boundary.js:14:5)
    at DevOverlay (webpack-internal:///./.cache/fast-refresh-overlay/index.js:112:3)
    at RootWrappedWithOverlayAndProvider
    at App (webpack-internal:///./.cache/app.js:134:50)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue in the reported NX/Gatsby setup by switching between Yarn 1.22.22 and Yarn 4.3 with the node-modules linker. Start from the APIProvider and Map entry points, then inspect the context behavior shown in the stack trace around InteractiveMap.tsx. Done means a Map nested through the component library renders successfully under both Yarn versions.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, node.js, react, typescript
Domain
frontend, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.