Won't run on expo: Can't import the named export 'Children' from non EcmaScript module (only default export is available)

[jsamr]

To see this error in "action", check the package.json file of this snack and hover @mobility/stacks entry:

https://snack.expo.io/@jsamr/stacks-webpack-issue

This issue happens with the Webpack bundler v4 (it works just fine with metro) when resolving index.mjs. I believe the issue comes from incompatibilities between ESM and CommonJS modules. The index.mjs ESM cannot import non-ESM named exports.

So I guess replacing

import {
  createElement
} from "react";

with

import React from "react";
const {
  createElement
} = React;

would do the trick.

Workaround (expo)

Create / edit your webpack.config.js and add:

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

// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Allow named imports from CJS into ESM modules
  config.module.rules.push({
    type: 'javascript/auto',
    test: /\.mjs$/,
    use: []
  });

  return config;
};

[Frexuz]

Same issue. I'm using webpack and react-native-web tho :) , but added the same module rule.

[mobily]

@jsamr thanks for reporting this issue! fixed in v1.1.4 🚀

[jsamr]

@mobily thanks!