Error fix: Can’t import the named export ‘TimeUnit’ from non EcmaScript module (only default export is available)

Background

shopify app rails + reactjs

Rails 6.0.3.4
"@rails/webpacker": "4.3.0",

after install “@shopify/react-i18n”

yarn add @shopify/react-i18n
"@shopify/react-i18n": "^5.3.0",

in components jsx, add

import {useI18n} from ‘@shopify/react-i18n’;

Error

build error

$ ./bin/webpack-dev-server
ERROR in ./node_modules/@shopify/react-i18n/build/esm/i18n.mjs 640:68-76
Can't import the named export 'TimeUnit' from non EcmaScript module (only default export is available)
    at HarmonyImportSpecifierDependency._getErrors (/Users/<app_path>/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:88:6)
    at HarmonyImportSpecifierDependency.getErrors (/Users/<app_path>/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/<app_path>/node_modules/webpack/lib/Compilation.js:1463:22)
    at /Users/<app_path>/node_modules/webpack/lib/Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/<app_path>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/<app_path>/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/Users/<app_path>/node_modules/webpack/lib/Compilation.js:1253:28)
    at /Users/<app_path>/node_modules/webpack/lib/Compiler.js:672:17
    at _done (eval at create (/Users/<app_path>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (/Users/<app_path>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:22)
ERROR in ./node_modules/@shopify/react-i18n/build/esm/i18n.mjs 460:13-24
Can't import the named export 'formatDate' from non EcmaScript module (only default export is available)
    at HarmonyImportSpecifierDependency._getErrors (/Users/<app_path>/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:88:6)
    at HarmonyImportSpecifierDependency.getErrors (/Users/<app_path>/node_modules/webpack/lib/dependencies/HarmonyImportSpecifierDependency.js:68:16)
    at Compilation.reportDependencyErrorsAndWarnings (/Users/<app_path>/node_modules/webpack/lib/Compilation.js:1463:22)
    at /Users/<app_path>/node_modules/webpack/lib/Compilation.js:1258:10
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/<app_path>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/<app_path>/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.finish (/Users/<app_path>/node_modules/webpack/lib/Compilation.js:1253:28)
    at /Users/<app_path>/node_modules/webpack/lib/Compiler.js:672:17
    at _done (eval at create (/Users/<app_path>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:9:1)
    at eval (eval at create (/Users/<app_path>/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:22)

Fix

add rules in <app_path>/config/webpack/environment.js

const { environment } = require('@rails/webpacker')
environment.config.merge( {
  module: {
    rules: [
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: "javascript/auto"
      }
    ]
  }
})
module.exports = environment
$ ./bin/webpack-dev-server
ℹ ｢wds｣: Project is running at http://localhost:3035/
ℹ ｢wds｣: webpack output is served from /packs/
ℹ ｢wds｣: Content not from webpack is served from /Users/<app_path>/public/packs
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: Hash: 58f893e039dd09444c13
Version: webpack 4.44.2
Time: 9287ms
Built at: 03/21/2021 12:22:55 AM
                                     Asset       Size       Chunks                         Chunk Names
    js/application-1b5a35de69e2f3f0adc4.js   6.14 MiB  application  [emitted] [immutable]  application
js/application-1b5a35de69e2f3f0adc4.js.map   5.16 MiB  application  [emitted] [dev]        application
                             manifest.json  364 bytes               [emitted]              
ℹ ｢wdm｣: Compiled successfully.

Ref

https://github.com/rails/webpacker/blob/4-x-stable/docs/webpack.md

https://github.com/graphql/graphql-js/issues/1272

https://lifesaver.codes/answer/webpack-4-compatibility-issue