ReferenceError: Cannot access '__WEBPACK_DEFAULT_EXPORT__' before initialization. App does not compile after fresh start

[VBagmut]

Run next info (available from version 12.0.8 and up)

Operating System:
Platform: linux
Arch: x64
Version: #29-Ubuntu SMP Wed Jan 12 17:36:47 UTC 2022
Binaries:
Node: 12.22.8
npm: 6.14.15
Yarn: 1.22.17
pnpm: N/A
Relevant packages:
next: 12.0.10
react: 17.0.2
react-dom: 17.0.2

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

12.22.8

What browser are you using?

Chrome 97.0.4692.99 (Official Build) (x86_64)

What operating system are you using?

VM of Ubuntu 21.10 in macOS 12.1

How are you deploying your application?

next build && next start, for local development: "next"

Describe the Bug

Facing issue similar to the one from closed issue #32360

App does not compile after fresh start with valid code from third-party library

• Try to make valid code using third-party library.
• Restart next.js
• On the next fresh start build will not compile

I tried with and without { experimental: { esmExternals: false } }, no luck

Expected Behavior

App compiles successfully with valid code from third party-libraries

To Reproduce

npm i reaviz

create and render following code:

import React from 'react';
import { BarChart } from 'reaviz';

export default function TestComponent(props) {
    return (
        <BarChart
            height={300}
            width={300}
            data={[
                { key: 'DLP', data: 13 },
                { key: 'SIEM', data: 2 },
                { key: 'Endpoint', data: 7 },
            ]}
        />
    );
}

[balazsorban44]

Hi, a related issue has just been addressed by #33831, we should see in the next canary release it gets fixed.

Unfortunately given your reproduction, the error I am getting is different:

Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/d3-array/src/index.js from /.../node_modules/reaviz/dist/index.cjs.js not supported.
Instead change the require of index.js in /.../node_modules/reaviz/dist/index.cjs.js to a dynamic import() which is available in all CommonJS modules.

This indicates a wrong usage of ESModules in the reaviz package. Looking at d3-array, it sets the type: "module" attribute and the main and exports. From their v3 release it looks like they are now ESM-only.

Since reaviz@11, their intention seems to be the same, using ESM themselves: https://github.com/reaviz/reaviz/blob/master/CHANGELOG.md#1100---91721

But it is not correctly set up. I suggest reaching out to the reaviz library authors about this, pointing them to this official Node.js documentation: https://nodejs.org/api/packages.html#package-entry-points

TLDR; The package should not use the non-standard module field, but should prefer the exports field instead and should probably set the type: "module" property also.

You can mention this on their open issue at reaviz/reaviz#48

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.