[react-form] Not working with Shopify embedded app

[denisgoryaynov]

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';

[dahukish]

Thanks @denisgoryaynov. Will take a look.

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

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

[gmcgibbon]

Seems related to #1698

cc @ismail-syed

[ismail-syed]

What @denisgoryaynov suggested is correct. You'll need to update your bundler's config to consume ESM modules (.mjs files). In this it's the bundler is webpack. I agree, we should update the shopify-cli docs to reflect this.

[d12]

@denisgoryaynov's fix worked for me. For anyone using webpack loaders instead of rules, this loader works:

module.exports = {
  test: /\.mjs$/,
  include: /node_modules/,
  type: "javascript/auto",
}

[camelmasa]

We are using @shopify/react-form with CRA. I think CRA doesn't support changing webpack config without ejecting. Can we avoid the bug using any workaround?

[camelmasa]

We are using @shopify/react-form with CRA. I think CRA doesn't support changing webpack config without ejecting. Can we avoid the bug using any workaround?

I added older versions. It was solved.

[mubbo]

any movement on this?

I created my app using create-react-app wanted to start working on translating and got this 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)

[camelmasa]

@ismail-syed We are using CRA. I think hard to modify webpack.config.js in CRA. Do we need to change CRA's webpack.config.js? Or, Should we wait until the fixed this issue?

[geraldoandradee]

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)

I'm experiencing same error of @mubbo using library "@shopify/react-i18n": "^5.2.3",, cannot even import the import {useI18n} from '@shopify/react-i18n';

[mubbo]

Workaround for CRA folks (its what I did)
npm install react-app-rewired --save-dev

then set up a config-overide.js file with the following

var webpack = require('webpack');
module.exports = function override(webpackConfig, env) {

        webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
        });

    return webpackConfig;
  }

this solved the issue for me.. not sure what it will do to my build size though.. but at least it works now.

[brycepolly]

Yeah this a problem for CRA apps, not willing to modify our web pack or eject just for this.

[ismail-syed]

Hi folks, sorry for the delay.

Do we need to change CRA's webpack.config.js? Or, Should we wait until the fixed this issue?

Yes, we recommend apps to change their bundler configs to add support for ESM (.mjs) files. There are various examples in this thread on how to do so.

As first-class support for ESM (.mjs files) in the front-end tooling land (webpack 5, Node 14) gains more adoption, we want our libraries to be evolving into the future.

I've open a PR in the Shopify embedded node app template repo so this works out of the box, Shopify/shopify-app-template-node#569. Once that's merged, I will close this issue.