[react-form] Not working with Shopify embedded app

Overview

When trying to use @shopify/react-form I get the following error: ./node_modules/@shopify/react-form/build/esm/validation/validator.mjs Can't import the named export 'isEmpty' from non EcmaScript module (only default export is available)

The error is caused even by just importing the library: import { useField, useForm } from '@shopify/react-form';

[patryk-smc]

Similar issue with @shopify/react-i18n

It seems to be related to Next.js

error - ./node_modules/@shopify/react-i18n/build/esm/i18n.mjs
Can't import the named export 'TimeUnit' from non EcmaScript module (only default export is available)

[denisgoryaynov]

@dahukish I created my project using the Shopify cli: shopify create node and running my project with shopify serve. I actually managed to workaround the issue but it required updating my next.config.js like this:

const { parsed: localEnv } = require("dotenv").config();
const withCSS = require("@zeit/next-css");

const webpack = require("webpack");
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);

module.exports = withCSS({
  webpack: config => {
    const env = { API_KEY: apiKey };
    config.plugins.push(new webpack.DefinePlugin(env));
    /* add this */
    config.module.rules.push({
	test: /\.mjs$/,
	include: /node_modules/,
	type: "javascript/auto",
    });
    /*  */
    return config;
  }
});

Maybe it should be documented somewhere or added to the template generated by shopify-cli?