Change to .mjs breaks usage in Expo web (React Native) about react-portabletext

[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 👍

[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;
}