0

Desejo criar um monorepo com yarn para trabalhar com react-native, isto é necessário pois quero manter backend frontend e app no mesmo repositório. Meu problema ocorre ao carregar o app para meu emulador, vou descrever o que tenho até aqui.

Crio o projeto com o comando yarn react-native init App dentro do diretório packages, em seguida removo o arquivo yarn.lock e o diretório node_modules de dentro do projeto recem criado. Volto a raiz do meu projeto e executo yarn para que as dependências sejam reinstaladas.

Em seguida preciso alterar algumas configurações de caminhos para poder instalar o App no emulado, essas alterações consistem em incrementar "../../" nos arquivos descritos abaixo.

App/android/settings.gradle

apply from: file("../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)

App/android/app/build.gradle

apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

Os trechos descritos a cima correspondem ao resultado final após sua edição. Agora posso executar yarn android na aplicação e a mesma vai instalar meu App no emulador "corretamente".

Após instalar o App no emulado (ou antes disso, tenho ambas as tentativas), executo yarn start para inicializar o bundle do meu App, esse comando executa sem nenhum erro (até aqui), mas quando executo o reload no meu app no emulador obtenho o seguinte erro:

error: Error: Unable to resolve module @babel/runtime/helpers/interopRequireD efault from index.js: @babel/runtime/helpers/interopRequireDefault could not be found within the project.

Apenas para destacar, o app foi instalado no emulador mas em nenhum momento executou corretamente, caso eu execute o bundle antes de instalar o app no mobile, após executar o yarn android o aplicativo será aberto e o mesmo erro é emitido imediatamente no bundle.

Minha estrutura de diretórios é a seguinte:

node_modules
packages
- Server
- Web
- App
- - node_modulos
- - android
- - ios
- - package.json
- - *outros arquivos
package.json
yarn.lock

Alguns links me foram muito úteis, mas não resolveram meu problema
https://github.com/react-native-community/cli/issues/591
https://github.com/react-native-community/cli/issues/656
https://github.com/react-native-community/cli/issues/877
https://stackoverflow.com/questions/49373181/babel-preset-not-loading-on-monorepo-project

Dados do ambiente:
OS: Ubuntu 16.04 LTS
Yarn: 1.22.4
Emulador: Android Studio

Nota: o projeto funciona normalmente se seu não colocar o mesmo dentro da estrutura de monorepo do yarn, o que indica que não há qualquer problema com o emulador.

Agradeço muito se alguém puder dizer o que estou deixando passar aqui.

1 Resposta 1

0

Encontrei a solução para o problema, para que o app possa encontrar todas as dependências do projeto é preciso incluir o parâmetro watchFolders ao arquivo metro.config.js, o resultado final deste arquivo é o seguinte

const path = require('path');

module.exports = {
  watchFolders: [path.resolve(__dirname, '..', '..')],
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
};

Aponte watchFolders para a pasta raiz do seu projeto.

Caso seu plicativo feche automaticamente ao ser aberto após a alteração anterior, acesse o arquivo App/android/app/build.gradle e edite os parâmetros enableSeparateBuildPerCPUArchitecture e universalApk para true. Mais detalhes sobre isso em https://github.com/facebook/react-native/issues/28489

Caso a alteração anterior não funcionar, retorne os parâmetros ao valor padrão e siga os passos abaixo.

Inclua a dependência react-native ao package.json da raiz do seu projeto, você pode fazer isso usando yarn add react-native -W, exclua a pasta node_modules de dentro do App e execute yarn para instalar as dependências novamente (só por garantia).

Acesse a seguinte lista de arquivos:

  • App/android/build.gradle
  • App/android/app/build.gradle
  • App/ios/Podfile
  • App/ios/App.xcodeproj/project.pbxproj

Nota: a pasta que contém o arquivo project.pbxproj estará com o nome do seu projeto.

Em cada um dos arquivos localize qualquer menção a node_modules/react-native e inclua ao inicio do caminho ../../ (o caminho final após ser modificado precisa corresponder ao node_modules da raiz do seu projeto)

Após fazer isso inicialize o bundle do seu projeto yarn start e depois yarn android, agora tudo deve funcionar bem.

Não testei a solução para ios, se alguém puder testar e deixar nos comentários seria legal.

Dependendo das necessidades do seu projeto, mais alterações são necessárias para executa-lo, esse link pode ser útil: https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .