[@expo/config-plugins] - plugin can't be used with the exports package json setup.

[gladiuscode]

Hi all!

Introduction

My library is set up as a backward compatible turbo module, with a companion expo plugin to make it possible for devs to load the library in their expo application as well as the bare one

Since I'm not sure this can be treat as a bug, I'm not opening an issue in any repository of sorts, because my knowledge of the expo framework is not solid, as well as the whole nodejs way to load commonjs or esm module and the insane compatibility topic between them.

I hope this can be of help to you!

Neat Stuff

I though I'd share with you my findings because I've spent quite the amount of time trying to figure out how to fix the following error with my library's expo plugin:

PluginError: Package "react-native-orientation-director" does not contain a valid config plugin.
Learn more: https://docs.expo.dev/guides/config-plugins/#creating-a-plugin

Unexpected token 'typeof'
SyntaxError: Unexpected token 'typeof'

If you experience this, it may be due to how you've setup your package.json: if you've configured it to use the exports keyword as per latest changes, be aware that you will not be able to create an expo plugin that makes your library installable on expo with the prebuild setup.
The Expo documentation says, in Plugin and Mods, says that:

If an app.plugin.js file is present in the root of a Node module's directory, it'll be used instead of the package's main file.

It doesn't mention compatibility with the exports keyword, so I think we do not have it yet available, even tho the ecosystem is closing the gap with the ESM adoption.

That said, the fix is quite simple at the moment, you simply need to avoid using the exports keyword and rely on the old way, see below:

{
  "main": "./lib/module/index.js",
  "module": "./lib/module/index.js",
  "types": "./lib/typescript/src/index.d.ts",
}

This makes sure that your library, built with create-react-native-library, can be used in both bare and expo environments.

Additional

Here you can find my PR that brings support to react-native 79 plus sdk 53: feat: upgrade react native to 79.2

[satya164]

you need to explicitly expose any files that you want to be readable by other tools with exports, so the config plugin needs to be specified under exports

See Node.js docs for exports: https://nodejs.org/api/packages.html#package-entry-points
Also #834

[KiwiKilian]

We have a Expo plugin and configured exports: https://github.com/maplibre/maplibre-react-native/blob/main/package.json#L48-L74

We also compile the plugin using bob.

[gladiuscode]

Hi all!

Thank you for your precious insights, I didn't know how to properly use the exports keyword and your comments helped me out.

So, to share knowledge, my current exports configuration is the following:

{
  "main": "./lib/module/index.js",
  "types": "./lib/typescript/module/src/index.d.ts",
  "exports": {
    ".": {
      "import": {
        "types": "./lib/typescript/module/src/index.d.ts",
        "default": "./lib/module/index.js"
      },
      "require": {
        "types": "./lib/typescript/commonjs/src/index.d.ts",
        "default": "./lib/commonjs/index.js"
      }
    },
    "./package.json": "./package.json",
    "./app.plugin.js": "./app.plugin.js"
  }
}

My builder-bob is as follows:

{
  "react-native-builder-bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      ["commonjs", {
        "esm": true,
        "sourceMaps": false }],
      ["module", { "esm": true }],
      "typescript"
    ]
  }
}

I've tested it out with the latest react-native bare (.80) and expo (53) releases, everything works pretty good!

So, if I've understood it correctly, now I'm telling metro bundler that my setup can be consumed as CommonJS or ESM, because I've told bob to emit both module types.
To support Expo prebuild plugin, instead, I simply needed to add the app.plugin.js as you've suggested in this PR: #834.

I hope that this can help other people out!

Thanks again!