react-relay/lib/relay-hooks can't resolve @babel/runtime modules

[mhwang08]

Error for ./node_modules/react-relay/lib/relay-hooks/useEntryPointLoader.js:

Module not found: Can't resolve '@babel/runtime/helpers/createForOfIteratorHelper' in '/Users/{redacted...}/node_modules/react-relay/lib/relay-hooks'

The same module resolution error will occur for several files in the react-relay and react-runtime dependencies. The module definitely exists in the node_modules directory. Several other dependencies rely on the module and specify the latest minor version for it, including react-relay. Directly installing @babel/runtime also does not fix the problem.

package.json: { "name": "@coreui/coreui-free-react-admin-template", "version": "2.0.3", "description": "CoreUI React Open Source Bootstrap 4 Admin Template", "author": "Parmar Akshay", "homepage": "", "copyright": "", "license": "MIT", "private": true, "repository": { "type": "git", "url": "git@github.com:coreui/coreui-free-react-admin-template.git" }, "dependencies": { "@auth0/auth0-react": "^1.3.0", "@coreui/coreui": "^2.0.1", "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0", "@coreui/icons": "^0.2.0", "@coreui/react": "^2.0.0", "@reduxjs/toolkit": "^1.5.0", "axios": "^0.21.1", "babel-polyfill": "^6.26.0", "bootstrap": "^4.1.1", "chart.js": "^2.7.2", "classnames": "^2.2.5", "core-js": "^2.5.6", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", "flag-icon-css": "^3.0.0", "font-awesome": "^4.7.0", "isomorphic-fetch": "^2.2.1", "isomorphic-style-loader": "^5.1.0", "jquery": "^3.4.1", "lodash": "^4.17.15", "perfect-scrollbar": "^1.4.0", "popper.js": "^1.16.0", "prop-types": "^15.6.1", "query-string": "^6.13.1", "react": "^16.12.0", "react-autosuggest": "^9.4.3", "react-chartjs-2": "^2.7.2", "react-cookie": "^4.0.3", "react-dom": "^16.12.0", "react-loadable": "^5.4.0", "react-redux": "^7.1.1", "react-relay": "^11.0.2", "react-router": "^5.1.2", "react-router-config": "^1.0.0-beta.4", "react-router-dom": "^5.2.0", "react-select": "^3.0.8", "react-test-renderer": "^16.12.0", "react-toast-notifications": "^2.4.0", "react-toastify": "^6.0.2", "reactstrap": "^6.0.1", "redux": "^4.0.0", "redux-devtools-extension": "^2.13.8", "redux-refresh-token": "^0.1.0", "redux-thunk": "^2.3.0", "relay-runtime": "^11.0.2", "request": "latest", "simple-line-icons": "^2.4.1", "universal-cookie": "^4.0.3" }, "devDependencies": { "babel-eslint": "^10.0.3", "babel-jest": "^22.4.4", "babel-plugin-relay": "^11.0.2", "cross-env": "^5.0.1", "eslint-config-react-app": "^5.1.0", "eslint-plugin-flowtype": "^3.13.0", "eslint-plugin-import": "^2.19.1", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-react": "^7.17.0", "eslint-plugin-react-hooks": "^1.7.0", "graphql": "^15.5.0", "immutable": "^4.0.0-rc.12", "node-sass-chokidar": "^1.3.0", "npm-run-all": "^4.1.2", "prettier": "^1.5.3", "react-cookies": "^0.1.1", "react-scripts": "2.0.0", "reactjs-popup": "^1.5.0", "relay-compiler": "^11.0.2", "relay-config": "^11.0.2" }, "scripts": { "build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss", "watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive", "start-js": "react-scripts start", "start": "cross-env REACT_APP_ENV=local npm-run-all -p watch-css start-js", "build-js": "react-scripts build", "build": "npm-run-all build-css build-js", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "relay": "relay-compiler --src ./src --schema ./data/schema.graphql --extensions js jsx" }, "bugs": { "url": "https://github.com/coreui/coreui-free-react-admin-template/issues" }, "lint-staged": { "*.js": [ "eslint", "prettier --parser flow --write", "git add" ] }, "browserslist": [ ">0.2%", "not dead", "not ie <= 11", "not op_mini all" ] }

.babelrc: { "plugins": [ "relay" ] }

Followed all setup instructions from here: https://relay.dev/docs/getting-started/installation-and-setup/

[mhwang08]

Fixed by updating bundler (react-scripts) to latest version.

[captbaritone]

I think that because we actually ship code that includes code compiled with babel, we need to pin to a specific version of @babel/runtime.

For example, our compiled version of relay-runtime/lib/utils/RelayReplaySubject.js includes the line:

var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));

But createForOfIteratorHelper.js does not exist in more recent versions of @babel/runtime.

[alloy]

@captbaritone Perhaps helpful, twice already I've had to debug and (re)figure out that at least @babel/runtime@7.13.9 is necessary to deal correctly with ESM targets. Otherwise I would run into:

Uncaught TypeError: _interopRequireDefault is not a function
    at eval (RelayStoreUtils.js?5f90:14:1)
    at ../../../node_modules/relay-runtime/lib/store/RelayStoreUtils.js (main.js:1950:1)