4
respostas

Fonte parou de carregar depois da última parte.

Olá. Estava fazendo o curso até chegar nessa parte onde dei uma pausa de 1 dia e quando retornei para continuar de onde parei. Fui dar start no projeto e a fonte não funciona mais. Não mexi em nada do projeto e está exatamente igual à que foi feito no curso até então.

Segue mensagem que está dando no terminal:

ERROR  fontFamily "Montserrat Bold" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Meu código do App.js está assim atualmente:

import React from 'react';
import { StatusBar, SafeAreaView, View } from 'react-native';
import { 
  useFonts, 
  Montserrat_400Regular, 
  Montserrat_700Bold,
} from '@expo-google-fonts/montserrat';

import Itens from './src/telas/Cesta';
import mock from './src/mocks/cesta';

export default function App() {
  const [fonteCarregada] = useFonts({
    "Montserrat Regular": Montserrat_400Regular,
    "Montserrat Bold": Montserrat_700Bold,
  });

  return (
    <SafeAreaView>
      <StatusBar />
      <Itens { ...mock }/>
    </SafeAreaView>
  );
}

Alguém teve o mesmo problema ou sabe como posso resolver?

4 respostas

Estou com um problema parecido, mas mais extenso. Segue o console do navegador, a foto o problema no VS code:Insira aqui a descrição dessa imagem para ajudar na acessibilidade

[HMR] Waiting for update signal from WDS...
log.js:59 Uncaught Error: Cannot find module '@expo-google-fonts/montserrat'
    at webpackMissingModule (log.js:59:1)
    at ./App.js (log.js:59:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at ./node_modules/expo/AppEntry.js (AppEntry.js:1:1)
    at __webpack_require__ (bootstrap:789:1)
    at fn (bootstrap:100:1)
    at 1 (tracing.js:7:1)
    at __webpack_require__ (bootstrap:789:1)
    at bootstrap:856:1
    at bootstrap:856:1
webpackMissingModule @ log.js:59
./App.js @ log.js:59
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
./node_modules/expo/AppEntry.js @ AppEntry.js:1
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
1 @ tracing.js:7
__webpack_require__ @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
VM34:2 Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)
4043 @ VM34:2
r @ VM34:2
8048 @ VM34:2
r @ VM34:2
8641 @ VM34:2
r @ VM34:2
(anonymous) @ VM34:2
(anonymous) @ VM34:2
(anonymous) @ VM34:2
e.onload @ index.js:1
be @ index.js:1
de @ index.js:1
handleErrors @ webpackHotDevClient.js:169
../../../opt/homebrew/lib/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
load (async)
be @ index.js:1
de @ index.js:1
handleErrors @ webpackHotDevClient.js:169
../../../opt/homebrew/lib/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 ./App.js:9
Module not found: Can't resolve './src/telas/Cesta'
   7 | } from '@expo-google-fonts/montserrat'
   8 | 
>  9 | import Cesta from './src/telas/Cesta'
  10 | 
  11 | export default function App() {
  12 |   const [fonteCarregada] = useFonts({
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
handleErrors @ webpackHotDevClient.js:174
../../../opt/homebrew/lib/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 ./App.js:3
Module not found: Can't resolve '@expo-google-fonts/montserrat'
  1 | import React from 'react'
  2 | import { StatusBar, SafeAreaView, View } from 'react-native'
> 3 | import {
  4 |   useFonts,
  5 |   Montserrat_400Regular,
  6 |   Montserrat_700Bold
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
handleErrors @ webpackHotDevClient.js:174
../../../opt/homebrew/lib/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 ENOENT: no such file or directory, open '/Users/user/AwesomeProject/assets/favicon.png'
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
handleErrors @ webpackHotDevClient.js:174
../../../opt/homebrew/lib/node_modules/expo-cli/node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213

No terminal do VS code, aparece assim:

Unable to resolve asset "./assets/icon.png" from "icon" in your app.json or app.config.js Error: Problem validating asset fields in app.json. Learn more: https://docs.expo.dev/ • Field: splash.image - cannot access file at './assets/splash.png'. • Field: android.adaptiveIcon.foregroundImage - cannot access file at './assets/adaptive-icon.png'. • Field: icon - cannot access file at './assets/icon.png'. Android Bundling failed 755ms Unable to resolve module @expo-google-fonts/montserrat from /Users/user/AwesomeProject/App.js: @expo-google-fonts/montserrat could not be found within the project or in these directories: node_modules ../node_modules

If you are sure the module exists, try these steps:

  1. Clear watchman watches: watchman watch-del-all
  2. Delete node_modules and run yarn install
  3. Reset Metro's cache: yarn start --reset-cache
  4. Remove the cache: rm -rf /tmp/metro-* 5 | Montserrat_400Regular, 6 | Montserrat_700Bold

    7 | } from '@expo-google-fonts/montserrat' | ^ 8 | 9 | import Cesta from './src/telas/Cesta' 10 |

Resolvi com esse comando instalando as fontes no projeto.

expo install @expo-google-fonts/montserrat expo-font expo-app-loading

Aqui não deu certo Guilherme, continua dando o problema do "fontFamily "Montserrat Bold" is not a system font...

No meu caso, eu precisei instalar o HomeBrew (brew install nvm) para conseguir executar a versão apropriada do node. Depois disso, rodei esse comando nas duas versões do node instaladas.

Tenta rodar no navegador o projeto e dá um expect para gente ver o que aparece.