This document highlights common issues encountered when working on quick brick apps in plugin workspaces, and how to solve them:

Eliminating the usual suspects

Before reporting an issue, try the following steps:

  1. delete all your node_modules in all directories, and run yarn again you can use a npm script like rm -rf node_modules packages/*/node_modules plugins/*/node_modules The lock file shouldn't be deleted though. At least, restore the latest version of the lock file saved in your SVC
  2. delete the prepared app and prepare it again.
  3. make sure you are running the latest version of @applicaster/zapplicaster-cli, you could also try the latest nightly build by installing @applicaster/zapplicaster-cli@next
  4. check your plugins & workspace dependencies and make sure all these rules are respected:
  • you have react & react-native set to the proper version in your workspace root
  • you don't have any package in your workspace having react or react-native in dependencies or devDependencies
  • you don't have any of the Quick Brick package in dependencies or devDependencies

Common errors

error Unable to resolve module \warnOnce` from ... warnOnce could not be found within the project`


Because React Native requires to run exactly the same version of React Native on the native and the javascript side, the QuickBrick framework currently restricts which version of React Native can be used. The issue above happens usually when a plugin has an explicit dependency to a different version of react-native.

How to fix it

Don't add react-native or react as dependency or devDependency in your plugin's package.json. You should however declare react@16.11.0 and react-native@0.62.2 as peerDependencies. In order for your plugin workspace to work properly, you should, however, have the same version of react and react-native declared in your workspace's main package.json in dependencies. Run yarn -W add react@16.11.0 react-native@0.62.2 to achieve that. Notice that the version numbers are fixed versions, and are not using ^ to resolve higher patches, as this could cause runtime issues

Could not retrieve configuration files. Error: Request failed with status code 403


This error can happen when running zapplicaster-cli prepare command. It usually means that one of the config file from zapp was referenced in the build params of the app, but doesn't exist (AWS returns 403 status when a file doesn't exist instead of 404). There shouldn't be a reason for this to happen unless you are trying to prepare a new app version or switching to a new layout.

How to fix it

Simply trigger a build in Zapp after your app version was created or the layout was changed. The outcome of the build doesn't matter, it will simply ensure that all the required configuration files are properly created and put on s3. You should then be able to run the zapplicaster-cli prepare command properly

Failed getting build params from Zapp - Request failed with 403


This error happens when the zapplicaster-cli prepare command cannot successfully reach zapp's build_params endpoint to retrieve the build params for the app version that you try to prepare

Hot to fix it

  • Check your app version id, your zapp token, and make sure you have access to this app version in zapp
  • Check that Zapp status is fully operational

Could not install npm dependencies - Error: Request failed with status code 503


This error usually means that the npm or the yarn registry is returning a 503 status code when installing packages or dependencies.

How to fix it

Check out the status of the npm registry as it may be suffering from a downtime. Try again to install later to see if the error goes away

Tvos App is not running properly


Since react 62, the tvos code has moved from react-core to a dedicated npm package. If you try to run a quick brick app that has the core react-native package as a dependency on tvos, the app won't run properly.

How to fix it

switch the react-native package you are using when running a tvos app. You will need to switch it back when preparing an app for another platform afterwards, but the zapplicaster-cli should warn you when you need to switch that package. npm now allows you to "proxy" packages, so you can install another package and make it pass for another. This is what's needed for react-native-tvos, so you will have to run this command at the root of your workspace:

yarn -W add react-native@npm:react-native-tvos@0.62.2-0

This means that your app will resolve imports from react-native to target react-native-tvos instead, without having to declare any module aliasing in webpack or the metro bundler

Cannot resolve module ... from ...


You will see this error when running the react-native packager if the metro bundler cannot find a dependency in the Haste map. Most of the time, simply installing the missing dependency in your plugin package will fix the issue.

Sometimes, however, you may encounter this issue on dependencies that are actually installed in some of the package. The issue then is that the haste resolver will try to find the module in <workspace_root>/node_modules but if that dependency is declared in only one package, yarn will keep it in <workspace_root>/plugin/<some_package>/node_modules instead of hoisting it tp the top of the repo

How to fix it

declare that dependency with the same version in another package or the root of your workspace. This will make yarn hoist that dependency in the right place and it will be resolved properly. This can happen specifically with some of the core modules we are using like

  • @babel/preset-typescript
  • react-native-svg@9.13.6
  • react-native-webview@9.1.1