Namespace import is not defined during next build (likely webpack ModuleConcatenation error)

Bug report

Describe the bug

We use namespace approach to import Material-UI and other components across entire app like so:

/* Core */
import * as mui from '@material-ui/core';

export const Progress: React.FC<ProgressProps> = props => {
    return <mui.LinearProgress { ...props } />;
};
Progress.defaultProps = {
    color: 'secondary',
};

/* Types */
type ProgressProps = mui.LinearProgressProps;

Recently a next build command started to produce the following output:

$ next build
info  - Loaded env from /Users/furthur/Projects/temy/react-marketplace/.env.production
info  - Loaded env from /Users/furthur/Projects/temy/react-marketplace/.env
info  - Using external babel configuration from /Users/furthur/Projects/temy/react-marketplace/babel.config.js
Creating an optimized production build

Compiled successfully.


> Build error occurred
ReferenceError: mui is not defined
    at Object.Nhdc (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:8181:65)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
    at Object.T0wj (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:12217:18)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
    at Object.a0Wt (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:13839:65)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
    at Object.woEc (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:15878:79)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
    at Object.V4Lr (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:12745:15)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
    at Object.Pw9j (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:10486:15)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
    at Module.hUgY (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:15282:13)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
    at Object.1 (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:7071:18)
    at __webpack_require__ (/Users/furthur/Projects/temy/react-marketplace/.next/server/pages/_app.js:29:31)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Entire application is stitched with this kind of imports, and the build output does not give any trails to look where. Important: the issue appeared occasionally.

To Reproduce

A not defined mui namespace variable is in build file: .next/server/pages/_app.js:8181:65

Here is the source file that contains the use of that namespace variable along with the import statement. So the import is there. So it is not a missed variable issue — the import is present there.

Looks like that compiled _app file uses webpack’s module concatenation feature but that drops that namespace module variable at some point.

Expected behavior

Next.js build must handle all namespace imports and do not have to drop them randomly.

System information

• OS: macOS Catalina 10.15.5 (19F101)
• Version of Next.js: 9.4.4
• Version of Node.js: 12.18.1

Additional context

After ongoing testing I found that this happens to other vendor packages that imported as namespace randomly. Yet I didn’t found any pattern that causes this issue.

At some point in random file can produce ReferenceError: formik | eva is not defined error during next build process.

import * as formik from 'formik';

import * as eva from '@styled-icons/evaicons-solid';

Indeed issue is somehow related to module concatenation resolution process — at some point a namespace variable gets lost its connection to __webpack_require__-d in the scope of a _app built file.

[JanKaifer]

This issue is quite old could someone check if it’s still relevant in next@canary?

[GiancarlosIO]

I have the same error 🤔 , I’m importing an enum from a ts-types npm library and it giving me the following error 😢

import type { CountryPrefix, MembershipTypeMethod } from '@my-org/ts-types';
console.log({ MembershipTypeMethod });

// nextjs server logs
event - compiled successfully
event - build page: /404
wait  - compiling...
event - compiled successfully
ReferenceError: MembershipTypeMethod is not defined