Change to .mjs breaks usage in Expo web (React Native)

[4lun]

Just updated @portabletext/react to v1.0.4, unfortunately the package no longer functions out of the box under Expo web.

Looks to be related to the change to using .mjs. Can confirm it works when downgrading back to v1.0.3.

Might be related to this: facebook/metro#535, however the package seems to work fine under other (native) Expo targets (Android/iOS).

Minimum repo here: https://github.com/4lun/expo-portabletext-react (run yarn web)

Error from expo-cli:

###/node_modules/@portabletext/react/dist/react-portable-text.mjs 162:54-73
Can't import the named export 'LIST_NEST_MODE_HTML' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 307:15-29
Can't import the named export 'buildMarksTree' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 144:38-51
Can't import the named export 'createContext' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 186:8-27
Can't import the named export 'isPortableTextBlock' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 180:8-35
Can't import the named export 'isPortableTextListItemBlock' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 177:8-33
Can't import the named export 'isPortableTextToolkitList' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 183:8-33
Can't import the named export 'isPortableTextToolkitSpan' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 189:8-37
Can't import the named export 'isPortableTextToolkitTextNode' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 162:17-26
Can't import the named export 'nestLists' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 250:12-27
Can't import the named export 'spanToPlainText' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 163:27-37
Can't import the named export 'useContext' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 149:16-23
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 164:21-28
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 167:21-28
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
###/node_modules/@portabletext/react/dist/react-portable-text.mjs 33:0-52
Can't reexport the named export 'toPlainText' from non EcmaScript module (only default export is available)

Error in browser console:

Uncaught TypeError: undefined is not a function
    at Module.../../node_modules/@portabletext/react/dist/react-portable-text.mjs (static/js/bundle.js:6036:83)

Not clear to me if this is mostly an issue with Expo, and/or if there's potentially some sort of webpack config change I can make to resolve it. Any pointers greatly appreciated.

[rexxars]

Interesting. This does sound like an expo/metro bug - maybe you could try the approach outlined here? https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#notices

...but instead of cjs, use mjs?

[fernandofleury]

This issue can also be seen when trying to run portable text in storybook (v6) actually.

[fernandofleury]

You can fix it in storybook by adding it this to the main.ts config:

webpackFinal: async (config) => {

// this depends on whether or not you are using webpack-merge, but the relevant rule is:
{
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
  }
return config;
}

[4lun]

Got it working similar to @fernandofleury, introduced a webpack.config.js file at the root of the Expo project

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.module.rules.push(
    {
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto"
  });

  return config;
};

Tried the apollo-client approach (tweaking the metro config), but no change. It does look to be more related to the webpack config Expo uses for web, rather than an issue with Metro (as it works in native contexts without modification). Looks like maybe something Expo web should be handling out of the box, I'll open an issue on Expo. Raised as a query on the Expo discord

Thanks for the pointers 👍