use with react-native-web

[chrisdrackett]

I'm trying to use this with react-native-web and so far haven't figured out how to tell bundless / esbuild to replace react-native with react-native-web so far I've been tried to do this within tsconfig.json as mentioned here: https://dev.to/dalcib/esbuild-react-native-web-i-afn

but get the following when running dev:

✖ Error: Build failed with 6 errors:
node_modules/react-native-gesture-handler/DrawerLayout.js:30:7: error: Unexpected "type"
node_modules/react-native-gesture-handler/Swipeable.js:14:7: error: Unexpected "type"
node_modules/react-native/Libraries/Image/AssetRegistry.js:13:7: error: Unexpected "type"
node_modules/react-native/Libraries/Image/AssetSourceResolver.js:13:7: error: Unexpected "type"
node_modules/react-native/Libraries/Image/resolveAssetSource.js:18:12: error: Expected "from" but found "{"
…

[chrisdrackett]

I'm trying to tackle this using a esbuild plugin, but are bundlessConfig options picked up as part of dev? Seems like when I add a plugin it has no effect.

[chrisdrackett]

this is the current plugin I'm trying for this, so far I'm running into issues that probably have to do with me not really fully understanding esbuild yet.

const rewriteRNW = {
  name: 'RewriteRNW',
  setup(build) {
    let fs = require('fs')

    build.onLoad({ filter: /\.(tsx?|jsx?)$/ }, async (args) => {
      try {
        let text = await fs.promises.readFile(args.path, 'utf8')
        const contents = text.replace('react-native', 'react-native-web')
        return {
          contents,
        }
      } catch (err) {
        return undefined
      }
    })
  },
}

I'm getting errors like the following when running this:

[bundless] Cannot resolve './exports/render' from '/Users/cwd/Developer/calm/node_modules/react-native-web/dist/index.js' during traversal, using yarn pnp: false
 > external-but-keep-in-metafile:/Users/cwd/Developer/calm/node_modules/react-native-web/dist/index.js:4:34: error: Could not resolve "./exports/render" (the plugin "traversal-RewriteRNW" didn't set a resolve directory)
    4 │ export { default as render } from './exports/render';
      ╵                                   ~~~~~~~~~~~~~~~~~~

[remorses]

I am planning to add support for vite and other possible bundlers, you will soon be able to pass alias config to vitro

Currently the bundler is bundless, it currently does not have support for alias (it can be added, but vite will come sooner)

[chrisdrackett]

exciting! Can't wait to start using this :)

[jeffreyyoung]

Normal NPM packages ship transpiled code, while react-native packages are shipped untranspiled. I believe the "unexpected type" errors you are seeing are the result of the react-native packages not being transpiled. To use react-native-web you need to do 2 things, ensure the bundler always loads the react-native package instead of the react-native-web, and also ensure the bundler transpiles all the react-native module code.