react-native-blob-util preset에 대한 도움이 필요합니다.

[Eclipses-Saros]

Package information

• [react-native-blob-util@0.19.11]

Configuration

/**
 * @type {import('@react-native-esbuild/core').Config}
 */
exports.default = {
  cache: true,
  logger: {
    disabled: false,
    timestamp: null,
  },
  resolver: {
    mainFields: ['react-native', 'browser', 'main', 'module'],
    sourceExtensions: [
      /* internal/lib/defaults.ts */
    ],
    assetExtensions: [
      /* internal/lib/defaults.ts */
    ],
  },
  transformer: {
    jsc: {
      transform: {
        react: {
          runtime: 'automatic',
        },
      },
    },
    additionalTransformRules: {
      babel: [
        {
          test: (path, code) => {
            return (
              /node_modules\/react-native-reanimated\//.test(path) ||
              code.includes('react-native-reanimated')
            );
          },
          options: {
            plugins: ['react-native-reanimated/plugin'],
            babelrc: false,
          },
        },
      ],
    },
    stripFlowPackageNames: ['react-native'],
  },
};

Additional context 안녕하세요, esbuild 에 관심이 생겨서 한번 사용해보고자 현재 개발 중인 프로젝트에 한 번 적용시켜 봤습니다. 그런데, 번들링 도중 특정 라이브러리에서 에러가 나고 있어 확인해본 결과, 함부로 건들기 어려운 에러가 나는 것이 발견되었습니다.

react-native-blob-util 인데, 해당 라이브러리가 어째서인지 js 파일임에도 ts 문법 (심지어 ts가 올바르지도 않습니다)을 사용하고 있어서, 다양한 문제를 일으키고 있는 상황입니다. 파일 하나가 아니라 거의 모든 파일이 이런 식으로 돌아가고 있다 보니 조금 고쳐서 될 정도의 레벨이 아닌 것 같습니다.

그렇다고 해당 라이브러리를 버리고 다른 걸 사용하자니, RN에서 파일 다운로드 기능을 지원하는 라이브러리가 많지 않고, 가이드라인에 나와 있는 rn-fetch-blob은 현재 2019년에 개발이 중지된 상태라 사용하기도 곤란한 실정입니다.

[leegeunhyeok]

어떤 에러가 발생했는지 로그를 첨부해주실 수 있을까요?

코드 변환에 문제가 생긴 것이 원인일 가능성이 높은데, 아래와 같이 구성에 추가해본 후 이슈가 여전히 재현되는지 확인 한 번 부탁드립니다

{
  ...,
  transformer: {
    fullyTransformPackageNames: ['react-native-blob-util'],
  },
}

[Eclipses-Saros]

 » esbuild  An extremely fast bundler 
           v0.1.0-beta.12

warn core could not resolve configuration file
debug core configuration load error 
{
  "code": "MODULE_NOT_FOUND",
  "requireStack": [
    "/Users/magicworld/twenty-app/node_modules/@react-native-esbuild/core/dist/index.js",
    "/Users/magicworld/twenty-app/node_modules/@react-native-esbuild/cli/dist/index.js"
  ]
}

info dev-server dev server listening on http://localhost:8081

info cli > press 'r' to reload
info cli > press 'd' to open developer menu

error core ✘ [ERROR]   × Expected ',', got ':'... 98.43% (1034/1085)
    ╭─[/Users/magicworld/twenty-app/node_modules/react-native-blob-util/fs.js:38:1]
 35 │     LegacySDCardDir: constants.LegacySDCardDir, // Depracated
 36 │ };
 37 │ 
 38 │ function addCode(code: string, error: Error): Error {
    ·                      ─
 39 │     error.code = code;
 40 │     return error;
 41 │ }
    ╰────

Caused by:
    Syntax Error [plugin react-native-runtime-transform-plugin]

    node_modules/react-native-blob-util/index.js:6:15:
      6 │ import fs from './fs';
        ╵                ~~~~~~

  This error came from the "onLoad" callback registered here:

    node_modules/@react-native-esbuild/plugins/dist/index.js:419:10:
      419 │     build.onLoad({ filter: /\.(?:[mc]js|[tj]sx?)$/ }, async (args...
          ╵           ~~~~~~

    at setup (/Users/magicworld/twenty-app/node_modules/@react-native-esbuild/plugins/dist/index.js:419:11)
    at handlePlugins (/Users/magicworld/twenty-app/node_modules/esbuild/lib/main.js:1293:21)
    at buildOrContextImpl (/Users/magicworld/twenty-app/node_modules/esbuild/lib/main.js:979:5)
    at Object.buildOrContext (/Users/magicworld/twenty-app/node_modules/esbuild/lib/main.js:788:5)
    at /Users/magicworld/twenty-app/node_modules/esbuild/lib/main.js:2223:68
    at new Promise (<anonymous>)
    at Object.context (/Users/magicworld/twenty-app/node_modules/esbuild/lib/main.js:2223:27)
    at Object.context (/Users/magicworld/twenty-app/node_modules/esbuild/lib/main.js:2048:58)
    at _ReactNativeEsbuildBundler.getOrCreateBundleTask (/Users/magicworld/twenty-app/node_modules/@react-native-esbuild/core/dist/index.js:887:53)

error.txt 이런 식으로 js - ts 관련해서 파서 에러가 뜹니다. 사실 어떻게 돌아가는지조차도 의문인 코드이긴 합니다.

 » esbuild  ✖ [android, dev] failed!
╭───────────╯
├─ 0 warnings
├─ 14 errors
╰─ 0.342

14개 에러라고 하는데, 해당 오류들을 어거지로 다 고치면 또 새로운 에러가 발생합니다. 사실상 이건 못 고친다고 봐야 할 것 같습니다.

transformer: {
    jsc: {
      transform: {
        react: {
          runtime: 'automatic',
        },
      },
    },
    additionalTransformRules: {
      babel: [
        {
          test: (path, code) => {
            return (
              /node_modules\/react-native-reanimated\//.test(path) ||
              code.includes('react-native-reanimated')
            );
          },
          options: {
            plugins: ['react-native-reanimated/plugin'],
            babelrc: false,
          },
        },
      ],
    },
    fullyTransformPackageNames: ['react-native-blob-util'],
    stripFlowPackageNames: ['react-native'],
  },

이런 식으로 넣는 게 맞을까요?

[leegeunhyeok]

넵 맞습니다. 해당 패키지를 확인해본 결과 fs.js 파일의 경우 Flow 구문으로 작성되어있음을 확인했습니다.

stripFlowPackageNames 옵션에 추가하여 Flow 구문을 제거할 수 있도록 구성해본 뒤 다시 시도해볼 수 있을까요?

{
  transformer: {
    stripFlowPackageNames: ['react-native', 'react-native-blob-util'], // <- 추가
  }
}

[Eclipses-Saros]

error core ✘ [ERROR]   × Expected ',', got '{'
   ╭─[/Users/magicworld/twenty-app/node_modules/react-native-blob-util/polyfill/Fetch.js:4:1]
 1 │ import Log from '../utils/log.js';
 2 │ import Blob from './Blob';
 3 │ import {config as RNconfig} from "../fetch";
 4 │ import type {ReactNativeBlobUtilConfig} from "../types";
   ·             ─
 5 │ import URIUtil from "../utils/uri";
 6 │ import {FetchBlobResponse} from "../class/ReactNativeBlobUtilBlobResponse";
   ╰────

옵션을 변경해도 에러가 계속 지속됩니다. 이런 식으로 애초에 문법에 문제가 있어 오류가 뜨는 것으로 보입니다. 라이브러리 전체 파일 곳곳에 이런 게 너무 많이 있어서 수정하는 것도 벅찬 상황입니다.

[leegeunhyeok]

위에서 말씀드렸다시피 해당 모듈은 Flow 구문을 사용하고 있습니다 (JS 확장자이지만, 변환이 필요함)

제안드린 옵션을 통해 Flow -> JS 변환 과정을 거치고, 문제가 해결되는 것을 기대했는데 에러를 보면 모종의 이유로 변환이 되지 않은 것으로 확인됩니다.

구성을 변경했지만 캐싱된 리소스를 읽고 있을 수 있어보이는데, 커맨드 실행할 때 --reset-cache 옵션을 한 번 추가한 뒤 시도해보시겠어요?

해당 모듈에 대한 테스트는 조만간 시간내서 진행해보도록 하겠습니다.

[Eclipses-Saros]

--reset-cache 옵션을 추가했지만, 동일한 오류가 계속해서 지속됩니다.

다만, 지금 좀 이상한 점이, esbuild가 configuration 파일을 계속해서 못 찾고 있습니다.

warn core could not resolve configuration file
debug core configuration load error 
{
  "code": "MODULE_NOT_FOUND",
  "requireStack": [
    "/Users/magicworld/twenty-app/node_modules/@react-native-esbuild/core/dist/index.js",
    "/Users/magicworld/twenty-app/node_modules/@react-native-esbuild/cli/dist/index.js"
  ]
}

프로젝트 최상단 폴더에 react-native-esbuild.js 에 만들었는데, 여기가 아닌가요? 가이드에서는 And create react-native-esbuild.js to project root. 라고 적혀 있었습니다.