Modules not found after initializing with with-react-native-web

[ubugnu]

Verify canary release

• [X] I verified that the issue exists in the latest Turborepo canary release.

Link to code that reproduces this issue

https://github.com/ubugnu/turborepo-issue-1

What package manager are you using / does the bug impact?

pnpm

What operating system are you using?

Linux

Which canary version will you have in your reproduction?

turbo 1.12.5-canary.2

Describe the Bug

On a freshly created turborepo with command:

npx create-turbo@canary -e with-react-native-web

When I run pnpm run dev I got tons of Module not found errors

[...]
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedList/index.js:31
native:dev: Module not found: Can't resolve 'nullthrows'
native:dev:   29 | import { computeWindowedRenderLimits, keyExtractor as defaultKeyExtractor } from '../VirtualizeUtils';
native:dev:   30 | import invariant from 'fbjs/lib/invariant';
native:dev: > 31 | import nullthrows from 'nullthrows';
native:dev:   32 | import * as React from 'react';
native:dev:   33 | var __DEV__ = process.env.NODE_ENV !== 'production';
native:dev:   34 | var ON_EDGE_REACHED_EPSILON = 0.001;
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 1:0-68
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/classCallCheck' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 2:0-62
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/createClass' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 3:0-90
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/possibleConstructorReturn' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 4:0-68
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/getPrototypeOf' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 5:0-82
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/assertThisInitialized' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js 6:0-56
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/inherits' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js:1
native:dev: Module not found: Can't resolve '@babel/runtime/helpers/extends'
native:dev: > 1 | import _extends from "@babel/runtime/helpers/extends";
native:dev:   2 | import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/createForOfIteratorHelperLoose";
native:dev:   3 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
native:dev:   4 | import _objectSpread from "@babel/runtime/helpers/objectSpread2";
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js:2
native:dev: Module not found: Can't resolve '@babel/runtime/helpers/createForOfIteratorHelperLoose'
native:dev:   1 | import _extends from "@babel/runtime/helpers/extends";
native:dev: > 2 | import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/createForOfIteratorHelperLoose";
native:dev:   3 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
native:dev:   4 | import _objectSpread from "@babel/runtime/helpers/objectSpread2";
native:dev:   5 | var _excluded = ["ItemSeparatorComponent", "SectionSeparatorComponent", "renderItem", "renderSectionFooter", "renderSectionHeader", "sections", "stickySectionHeadersEnabled"];
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js:3
native:dev: Module not found: Can't resolve '@babel/runtime/helpers/objectWithoutPropertiesLoose'
native:dev:   1 | import _extends from "@babel/runtime/helpers/extends";
native:dev:   2 | import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/createForOfIteratorHelperLoose";
native:dev: > 3 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
native:dev:   4 | import _objectSpread from "@babel/runtime/helpers/objectSpread2";
native:dev:   5 | var _excluded = ["ItemSeparatorComponent", "SectionSeparatorComponent", "renderItem", "renderSectionFooter", "renderSectionHeader", "sections", "stickySectionHeadersEnabled"];
native:dev:   6 | /**
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js:4
native:dev: Module not found: Can't resolve '@babel/runtime/helpers/objectSpread2'
native:dev:   2 | import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/createForOfIteratorHelperLoose";
native:dev:   3 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
native:dev: > 4 | import _objectSpread from "@babel/runtime/helpers/objectSpread2";
native:dev:   5 | var _excluded = ["ItemSeparatorComponent", "SectionSeparatorComponent", "renderItem", "renderSectionFooter", "renderSectionHeader", "sections", "stickySectionHeadersEnabled"];
native:dev:   6 | /**
native:dev:   7 |  * Copyright (c) Meta Platforms, Inc. and affiliates.
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/VirtualizedSectionList/index.js:19
native:dev: Module not found: Can't resolve 'fbjs/lib/invariant'
native:dev:   17 | import VirtualizedList from '../VirtualizedList';
native:dev:   18 | import { keyExtractor as defaultKeyExtractor } from '../VirtualizeUtils';
native:dev: > 19 | import invariant from 'fbjs/lib/invariant';
native:dev:   20 | import * as React from 'react';
native:dev:   21 | /**
native:dev:   22 |  * Right now this just flattens everything into one list and uses VirtualizedList under the
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/vendor/emitter/EventEmitter.js 1:0-74
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/toConsumableArray' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/vendor/emitter'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/vendor/emitter/EventEmitter.js 2:0-68
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/classCallCheck' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/vendor/emitter'
native:dev: 
native:dev: ERROR in ./node_modules/react-native-web/dist/vendor/react-native/vendor/emitter/EventEmitter.js 3:0-62
native:dev: Module not found: Error: Can't resolve '@babel/runtime/helpers/createClass' in '/home/ubugnu/Dev/tests/turborepo-with-rn-web/apps/native/node_modules/react-native-web/dist/vendor/react-native/vendor/emitter'
native:dev: 
native:dev: ERROR in ./node_modules/react-dom/cjs/react-dom.development.js:27
native:dev: Module not found: Can't resolve 'scheduler'
native:dev:   25 | }
native:dev:   26 |           var React = require('react');
native:dev: > 27 | var Scheduler = require('scheduler');
native:dev:   28 |
native:dev:   29 | var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
native:dev:   30 |
native:dev: 
native:dev: web compiled with 346 errors and 1 warning

Expected Behavior

I can use the app on both browser and expo like I did when choosing npm or yarn.

To Reproduce

npx create-turbo@canary -e with-react-native-web
# choose pnpm
cd with-react-native-web
pnpm run dev

Additional context

It works perfectly when choosing npm and yarn as package manager.

[anthonyshew]

Is this related to #7024?

[codeogc]

Hi, is this gonna be solved? Have the same problem.

[loclv]

I have the same problem.

[dawidsabat]

Same problem with pnpm on MacOS.

[osvald0]

Why the previous messages were marked as spam? The issues with the with-react-native-web template persist from my side.

[osvald0]

Thanks for your response, this is what I got

[andrewlvr]

Thanks for your response, this is what I got

I actually just updated the dependencies, ran npx expo install --fix, switched to yarn, and got everything to work

"dependencies": {
"@repo/ui": "*",
"expo": "^51.0.12",
"expo-crypto": "^13.0.2",
"expo-status-bar": "~1.12.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.2",
"react-native-web": "^0.19.10"
},
"devDependencies": {
"@babel/core": "^7.23.7",
"@expo/webpack-config": "^19.0.0",
"@types/react": "~18.2.79",
"@types/react-native": "^0.73.0",
"typescript": "~5.3.3"
}

And then I added a webpack.config.js for a crypto error

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) { const config = await createExpoWebpackConfigAsync(env, argv); config.resolve.fallback = { ...config.resolve.fallback, crypto: require.resolve('expo-crypto'), }; return config; };

[anthonyshew]

@osvald0, comments get marked as spam when they're only "me, too" and don't add value. They ping everyone following the issue, creating noise, and we use 👍 emojis on issues to gauge interest on where those of us on the core team need to be pointing our attention.

That said, I'm the keeper of our examples and I admittedly have no React Native knowledge. If the folks that are on this issue have fixes they could contribute back to the repo, I would really, really appreciate the help.

[osvald0]

Thanks for the explanation.