Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록

목록
1. Next.js, 웹뷰 도입 과정(1) - Expo 설치
2. Next.js, 웹뷰 도입 과정(2) - 디버그 환경 구축
3. [현재 글] Next.js, 웹뷰 도입 과정(3) - 오류 해결 목록

 

본 글은 웹뷰를 도입하면서 경험한 오류 해결 과정입니다.
리액트 네이티브의 확장 표준 라이브러리 Expo(v52), 안드로이드 스튜디오(v21)를 사용합니다.

 

" React Native WebView does not support this platform. "

웹뷰를 웹에서 확인할 때 출력되는 문구입니다. 웹은 웹뷰를 지원하지 않습니다. 이는 정상 출력으로 웹뷰 문제가 아닙니다. 다만, 스마트폰이나 애뮬레이터에서 확인할 때 웹뷰가 아닌 흰 배경이 출력된다면 리액트 네이티브 코드*를 다시 확인해야 합니다.

* 웹뷰를 작성한 코드, <WebView ... />

웹뷰가 출력되지 않는다면 다음과 같은 사항을 확인해보세요.

1. 스타일링
2. URI

웹뷰는 부모 태그나 본인에게 크기 스타일링이 되어 있지 않으면 출력되지 않습니다. 리액트 네이티브 StyleSheet을 생성해 style 속성을 부여하는 객체를 할당해야 합니다.

<WebView style={style.container} />

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Expo WebView 공식문서 확인

또한 웹뷰는 잘못된 URI를 받으면 출력되지 않습니다. 웹사이트 주소를 URI*로 할당해 문제 원인을 찾을 수 있습니다.

* www.naver.com, 모바일 화면으로 Naver 웹 사이트가 출력됩니다

 

"' RNCWebView' could not be found. "

Expo 앱으로 확인 중 웹뷰에서 발생하는 오류였습니다. 이 문제는 주로 웹뷰의 스타일링, 빌드, 캐시 문제입니다. react-native-webview 이슈 카테고리에서 관련 내용을 확인할 수 있지만 이는 몇 년 전 해결 방법으로 현재 v52에서는 버전을 다운그레이드 하지 않고 스타일링 부여, 캐시 초기화로 해결할 수 있습니다.

# 캐시 초기화
> npx expo start --clear

# node_modules 삭제 후 재설치
> npm install

이전 빌드 내역이 남아 있어 제대로 빌드되지 않는 경우도 있습니다. 이때 터미널에서 'r'을 입력해 프로젝트 새로고침을 시도하거나 Expo 프로젝트를 재구동 하면 됩니다.

 

" Encountered an error loading page "

웹뷰에서 할당된 URI를 찾을 수 없을 때 발생하는 오류였습니다. 터미널에서 해당 오류 문구와 객체를 출력합니다. 객체를 통해 원인을 확인할 수 있습니다.

// Expo 프로젝트 터미널 객체 출력
{
  "canGoBack": false, 
  "canGoForward": false, 
  "code": -2, 
  "description": "net::ERR_ADDRESS_UNREACHABLE", 
  "loading": false, 
  "target": 16, 
  "title": "", 
  "url": "http://192.82.0.0:192/"
}

위 예시에서는 URL 프로퍼티가 잘못되어 웹뷰를 출력할 수 없었습니다. 웹뷰에 URI를 할당할 때 호스트네임은 현재 접속 IP주소를 할당해야 웹뷰가 출력되었습니다.

 

" expo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. "

JAVA_HOME 환경 변수가 설정되지 않아 발생한 오류였습니다. CMD에서 직접 환경 변수 경로를 설정하거나 컴퓨터를 다시 시작하면 해결할 수 있습니다.  

 

" Configure project :app ?뱄툘 Applying gradle plugin
'expo-dev-launcher-gradle-plugin' (expo-dev-launcher@5.0.29) "

빌드하면서 gradle 플러그인을 적용할 때 발생한 오류였습니다. 원인은 출력 로그 * What went wrong: 부분에서 확인할 수 있습니다.

* What went wrong:
A problem occurred evaluating root project 'my-app'.
> Failed to apply plugin 'com.facebook.react.rootproject'.
   > A problem occurred configuring project ':app'..
      > SDK location not found. 
        Define a valid SDK location with an ANDROID_HOME environment variable ...

위 예제처럼 해당 오류는 SDK 위치가 설정되지 않아 발생하고 있습니다. ANDROID_HOME 환경변수를 다시 설정해야 합니다.

 

" Task :react-native-reanimated:buildCMakeDebug[arm64-v8a] FAILED "

안드로이드 애뮬레이터를 빌드할 때 발생한 오류였습니다. 해당 오류는 babel.config.js 설정하거나 해당 모듈을 삭제하면 됩니다.

// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    // plugins 코드 추가
    plugins: ['react-native-reanimated/plugin'],
  };
};

Expo 프로젝트를 초기화한 경우, babel.config.js 파일도 함께 삭제되었을 수도 있습니다. Expo 프로젝트 기본적으로 babel 모듈이 설치되어 있어 babel.config.js 파일을 바로 생성할 수 있습니다.

Expo babel.config.js 공식문서 확인

# 모듈 삭제

> npm uninstall react-native-reanimated

 

" Task :app:buildCMakeDebug[arm64-v8a] FAILED
C/C++: ninja: error: Stat(...): Filename longer than 260 characters "

안드로이드 애뮬레이터를 빌드 할 때 발생한 오류였습니다. 해당 오류는 Stat(...)의 주소 길이가 260자를 초과함을 의미합니다. 프로젝트 디렉터리 경로를 더 짧은 곳으로 옮기면 됩니다. 

 

" Next.js, cookies undefined "

Next에서 설정한 쿠키가 WebView에서 연계되지 않아 발생한 오류였습니다. 해당 오류는 WebView에서 CookieManager 라이브러리를 사용하여 해결할 수 있습니다.

네이티브에서 쿠키를 선언하고 sharedCookiesEnabled 값이 참으로 할당되어야 웹과 쿠키가 연동됩니다.

// WebView sharedCookiesEnabled 설정
<WebView source={{ uri }} sharedCookiesEnabled={true} />

리액트 네이티브 웹뷰, sharedCookiesEnabled
리액트 네이티브, Cookie Manager