Error when running `gatsby build` in Yarn workspace
tlmader opened this issue · comments
Current Behavior
When running gatsby build in a monorepo using Yarn workspaces, the build fails with the following output:
success open and validate gatsby-configs - 0.033s
success load plugins - 2.122s
success onPreInit - 0.029s
success delete html and css files from previous builds - 0.006s
success initialize cache - 0.013s
success copy gatsby files - 0.044s
success onPreBootstrap - 0.020s
success createSchemaCustomization - 0.006s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.058s
success building schema - 0.241s
info Total nodes: 36, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.002s
success Checking for changed pages - 0.001s
success createPagesStatefully - 0.049s
success Cleaning up stale page-data - 0.002s
success update schema - 0.018s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.359s
success write out redirect data - 0.006s
success Build manifest and related icons - 0.066s
success onPostBootstrap - 0.070s
info bootstrap finished - 7.888s
success run static queries - 0.017s - 1/1 60.20/s
success run page queries - 0.011s - 4/4 354.30/s
success write out requires - 0.005s
ERROR
TypeError: Cannot read property 'plugins' of undefined
at customizeExpoJsLoader (/Users/tlmader/dev/indienav/node_modules/gatsby-plugin-react-native-web/gatsby-node.js:37:71)
at Object.onCreateWebpackConfig (/Users/tlmader/dev/indienav/node_modules/gatsby-plugin-react-native-web/gatsby-node.js:69:14)
at runAPI (/Users/tlmader/dev/indienav/node_modules/gatsby/src/utils/api-runner-node.js:460:22)
at resolve (/Users/tlmader/dev/indienav/node_modules/gatsby/src/utils/api-runner-node.js:589:17)
at Promise._execute (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/debuggability.js:384:9)
at Promise._resolveFromExecutor (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/promise.js:518:18)
at new Promise (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/promise.js:103:10)
at Promise.mapSeries.plugin (/Users/tlmader/dev/indienav/node_modules/gatsby/src/utils/api-runner-node.js:588:14)
at tryCatcher (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/util.js:16:23)
at Object.gotValue (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/reduce.js:166:18)
at Object.gotAccum (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/reduce.js:155:25)
at Object.tryCatcher (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/util.js:16:23)
at Promise._settlePromiseFromHandler (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/promise.js:547:31)
at Promise._settlePromise (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/promise.js:604:18)
at Promise._settlePromise0 (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/promise.js:649:10)
at Promise._settlePromises (/Users/tlmader/dev/indienav/node_modules/bluebird/js/release/promise.js:729:18)
not finished Building production JavaScript and CSS bundles - 0.227s
Expected Behavior
gatsby-build should successfully build the application in a Yarn workspace.
Workaround
As a workaround, I hosted gatsby-plugin-react-native-web and its dependencies to the child package.json:
"workspaces": {
"nohoist": [
"react-native",
"react-native-web",
"gatsby-plugin-react-native-web",
"expo"
]
}
However, this causes numerous errors resolving react-native-web in other dependencies installed in the root node_modules, for example:
Can't resolve 'react-native-web/dist/exports/TouchableWithoutFeedback' in '/Users/tlmader/Dev/indienav/node_modules/react-native-elements/src/avatar'
If you're trying to use a package make sure that 'react-native-web/dist/exports/TouchableWithoutFeedback' is installed. If you're trying to use a local file make sure that the path is correct.
error undefined failed
I added react-native-web to the root package.json to prevent these errors.
Web package.json
"dependencies": {
"@stripe/react-stripe-js": "^1.1.2",
"@stripe/stripe-js": "^1.11.0",
"expo": "^39.0.3",
"gatsby": "^2.25.3",
"gatsby-image": "^2.4.21",
"gatsby-plugin-create-client-paths": "^2.3.13",
"gatsby-plugin-manifest": "^2.5.2",
"gatsby-plugin-offline": "^3.3.2",
"gatsby-plugin-react-helmet": "^3.3.14",
"gatsby-plugin-react-native-web": "^3.1.0",
"gatsby-plugin-sharp": "^2.7.1",
"gatsby-plugin-typescript": "^2.5.0",
"gatsby-source-filesystem": "^2.4.1",
"gatsby-source-graphql": "^2.7.7",
"gatsby-transformer-sharp": "^2.5.21",
"isomorphic-fetch": "^2.2.1",
"modal-react-native-web": "^0.2.0",
"react-helmet": "^5.2.1",
"react-native": "0.63.3",
"react-native-dropdownalert": "^4.3.0",
"react-native-gesture-handler": "https://github.com/software-mansion/react-native-gesture-handler.git#95bfb4df7ce9b1e222d50ead99eee7e27cd79043",
"react-native-masked-text": "^1.13.0",
"react-native-smooth-pincode-input": "^1.0.9",
"react-native-web": "~0.11.7",
"ts-loader": "^6.2.2"
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.2.0",
"@types/reach__router": "^1.3.6",
"@types/react-helmet": "^5.0.15",
"@types/react-stripe-elements": "^6.0.4"
},
"workspaces": {
"nohoist": [
"react-native",
"react-native-web",
"gatsby-plugin-react-native-web",
"expo"
]
}
Root package.json
"dependencies": {
"@apollo/client": "^3.2.5",
"@indienav/common": "^1.0.0",
"aws-amplify": "^3.3.11",
"aws-appsync-auth-link": "^3.0.2",
"aws-appsync-subscription-link": "^3.0.3",
"graphql": "^15.4.0",
"lodash": "^4.17.20",
"moment": "^2.22.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "0.63.3",
"react-native-elements": "^3.0.0-alpha.1",
"react-native-vector-icons": "^7.1.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"@graphql-codegen/cli": "^1.19.2",
"@graphql-codegen/introspection": "^1.18.0",
"@graphql-codegen/typescript": "^1.17.11",
"@graphql-codegen/typescript-document-nodes": "^1.17.8",
"@graphql-codegen/typescript-graphql-files-modules": "^1.18.0",
"@graphql-codegen/typescript-operations": "^1.17.10",
"@graphql-codegen/typescript-react-apollo": "^2.1.1",
"@semantic-release/git": "^7.0.16",
"@types/jest": "^25.1.4",
"@types/lodash": "^4.14.165",
"@types/react": "~16.9.35",
"@types/react-native": "^0.63.37",
"husky": "^4.2.3",
"jest": "^25.1.0",
"lerna": "^3.20.2",
"lint-staged": "^10.0.7",
"patch-package": "^6.2.2",
"postinstall-postinstall": "^2.1.0",
"prettier": "^2.0.2",
"query-string": "^6.13.7",
"semantic-release": "^17.2.3",
"ts-jest": "^25.2.1",
"typescript": "^3.8.3"
},
"workspaces": [
"packages/*"
]
Environment Info
System:
OS: macOS 10.15.6
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 608.54 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 10.21.0 - ~/.nvm/versions/node/v10.21.0/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v10.21.0/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v10.21.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.0 - /Users/tlmader/.rvm/gems/ruby-2.6.3/bin/pod
Gradle: 6.1.1 - /usr/local/bin/gradle
Homebrew: 2.5.6 - /usr/local/bin/brew
pip2: 19.2.3 - /usr/local/bin/pip2
pip3: 20.2.3 - /usr/local/bin/pip3
RubyGems: 3.0.6 - /Users/tlmader/.rvm/rubies/ruby-2.6.3/bin/gem
Utilities:
Make: 3.81 - /usr/bin/make
GCC: 4.2.1 - /usr/bin/gcc
Git: 2.25.0 - /usr/local/bin/git
Clang: 1200.0.32.27 - /usr/bin/clang
Servers:
Apache: 2.4.41 - /usr/sbin/apachectl
SDKs:
iOS SDK:
Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Nano: 2.0.6 - /usr/bin/nano
VSCode: 1.51.1 - /usr/local/bin/code
Vim: 8.1 - /usr/bin/vim
Xcode: 12.2/12B45b - /usr/bin/xcodebuild
Languages:
Bash: 3.2.57 - /bin/bash
Java: 12.0.2 - /usr/bin/javac
Perl: 5.18.4 - /usr/bin/perl
PHP: 7.3.11 - /usr/bin/php
Python: 2.7.16 - /usr/bin/python
Python3: 3.8.6 - /usr/local/bin/python3
Ruby: 2.6.3 - /Users/tlmader/.rvm/rubies/ruby-2.6.3/bin/ruby
Databases:
SQLite: 3.28.0 - /Users/tlmader/Library/Android/sdk/platform-tools/sqlite3
Browsers:
Chrome: 87.0.4280.88
Safari: 14.0
Monorepos:
Yarn Workspaces: 1.22.4