Materuial-UI namespace import is not defined

[dvakatsiienko]

Bug report

We use namespace approach to import Material-UI 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.

It is very odd because previously the build were fine (we migrated entire app from CRA couple of weeks ago) — the compilation was okay and at some point this issue appeared. The thing is that we have entire application stitched with this kind of imports, and the build output does not give any trails to look where.

Next.js version: 9.4.4

Does anyone had this problem?
It is possible to debug with better tracing details?

Thanks!

[dvakatsiienko]

Found a not defined mui namespace variable in build file.

Here is the source file that contains the use of that namespace variable along with the import statement.

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 particular module is missed for some reason....

[dvakatsiienko]

I've changed the import type from namespace to named only for this particular file, and build succeeded.
It is very odd, and indeed related to next.js compilation approach.
I guess I need to create a bug report on this.