relay: [modern] calling preloadQuery causes "Object(...) is not a function" error

Hello. When running preloadQuery, I’m running into an issue where I get this message:

×
TypeError: Object(...) is not a function
App
src/App.tsx:19
  16 |   }
  17 | `;
  18 | function App() {
> 19 |   const rootQuery = preloadQuery(
  20 |     environment,
  21 |     AppQuery,
  22 |     { userId: "2" },
View compiled
▼ 16 stack frames were expanded.
renderWithHooks
node_modules/react-dom/cjs/react-dom.development.js:14803
mountIndeterminateComponent
node_modules/react-dom/cjs/react-dom.development.js:17482
beginWork
node_modules/react-dom/cjs/react-dom.development.js:18596
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:188
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:237
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:292
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js:23203
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:22157
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js:22130
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:21756
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:21188
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:24373
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:24758
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:21903
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:24757
render
node_modules/react-dom/cjs/react-dom.development.js:24840
▲ 16 stack frames were expanded.
Module../src/index.tsx
src/index.tsx:9
   6 | import { RelayEnvironmentProvider } from "react-relay/hooks";
   7 | import { environment } from "./RelayEnvironment";
   8 | 
>  9 | ReactDOM.render(
  10 |   <React.StrictMode>
  11 |     <RelayEnvironmentProvider environment={environment}>
  12 |       <React.Suspense fallback="loading...">
View compiled
__webpack_require__
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
fn
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:670:18
__webpack_require__
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:784
  781 | };
  782 | 
  783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  785 | 
  786 | // Flag the module as loaded
  787 | module.l = true;
View compiled
checkDeferredModules
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
/Users/user/code/microservices-nodejs/front-end-service/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:87
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

RelayEnvironment is taken straight from here and App.tsx, which is where the call to preloadQuery is happening is here:

import React from "react";
import { CreatePost } from "./CreatePost";
import "./App.css";
import { usePreloadedQuery, preloadQuery } from "react-relay/hooks";
import graphql from "babel-plugin-relay/macro";
import AppQuery from "./__generated__/AppQuery.graphql";
import { environment } from "./RelayEnvironment";

export const query = graphql`
  query AppQuery($userId: String!) {
    posts(userId: $userId) {
      userId
      title
      postId
    }
  }
`;
function App() {
  const rootQuery = preloadQuery(
    environment,
    AppQuery,
    { userId: "2" },
    { fetchPolicy: "store-or-network" }
  );
  // const data = usePreloadedQuery(query, rootQuery);
  // console.log("dat>>>", data);
  return (
    <div className="App">
      <CreatePost />
    </div>
  );
}

export default App;

this is on the following versions:

    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-relay": "^10.0.0", // also tried "0.0.0-experimental-7f19cb58"