Why does 'npm run build' command fail in my custom app after ECMAScript module upgrade?

[alfredafutu]

I upgraded my app to a ECMAScript module with dependencies updated and when i run the "npm run build" command, it fails with the trace:

info - Collecting page data ..TypeError: Class extends value #<Object> is not a constructor or null
at 91 (path/to/.next/server/pages/_app.js:107:21)
at __webpack_require__ (path/to/.next/server/webpack-runtime.js:25:42)
at __webpack_exec__ (path/to/.next/server/pages/_app.js:142:39)
at path/to/.next/server/pages/_app.js:143:66
at __webpack_require__.X (path/to/.next/server/webpack-runtime.js:96:21)
at path/to/.next/server/pages/_app.js:143:47
at Object.<anonymous> (path/to/.next/server/pages/_app.js:146:3)
at Module._compile (node:internal/modules/cjs/loader:1275:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
at Module.load (node:internal/modules/cjs/loader:1133:32)

> Build error occurred
Error: Failed to collect page data for /
at path/to/node_modules/next/dist/build/utils.js:916:15
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
type: 'Error'
}

Here is my _app.js:

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import App from "next/app";
import { AppProvider } from "@shopify/polaris";
import { Provider, useAppBridge } from "@shopify/app-bridge-react";
import { authenticatedFetch } from "@shopify/app-bridge-utils";
import { Redirect } from "@shopify/app-bridge/actions";
import "@shopify/polaris/build/esm/styles.css"
import translations from "@shopify/polaris/locales/en.json";

function userLoggedInFetch(app) {
const fetchFunction = authenticatedFetch(app);

return async (uri, options) => {
const response = await fetchFunction(uri, options);

if (
response.headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1"
 ) {
const authUrlHeader = response.headers.get(
"X-Shopify-API-Request-Failure-Reauthorize-Url"
 );

const redirect = Redirect.create(app);
redirect.dispatch(Redirect.Action.APP, authUrlHeader || `/auth`);
return null;
 }

return response;
 };
}

function MyProvider(props) {
const app = useAppBridge();

const client = new ApolloClient({
fetch: userLoggedInFetch(app),
fetchOptions: {
credentials: "include",
 },
 });

const Component = props.Component;

return (
<ApolloProvider client={client}>
<Component {...props} />
</ApolloProvider>
 );
}

class MyApp extends App {
render() {
const { Component, pageProps, host } = this.props;
return (
<AppProvider i18n={translations}>
<Provider
config={{
apiKey: API_KEY,
host: host,
forceRedirect: true,
 }}
>
<MyProvider Component={Component} {...pageProps} />
</Provider>
</AppProvider>
 );
 }
}

MyApp.getInitialProps = async ({ ctx }) => {
return {
host: ctx.query.host,
 };
};

export default MyApp;

and my next.config.js

import dotenv from "dotenv";
import webPack from "webpack";

const { parsed: localEnv } = dotenv.config();

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

export default {
  webpack: (config) => {
    const env = { API_KEY: apiKey };
    config.plugins.push(new webPack.DefinePlugin(env));

    // Add ESM support for .mjs files in webpack 4
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });
    return config;
 },
};

Any help would be greatly appreciated as i am running out of ideas. Thanks