Cannot read properties of undefined (reading 'Z')

[closertb]

Bug report

when open a component, and the page not work,and i found the error "Cannot read properties of undefined (reading 'Z')", read Re;

i.default.createElement("div", {
      className: "cook-design-mixin-list-view-wrap"
  }, r && r.length ? i.default.createElement(Re.Z, {
      scaleable: {
          minChildWIdth: (null == f ? void 0 : f.minChildWIdth) || 400,
          spacing: (null == f ? void 0 : f.spacing) || 8
      },
      className: "cook-design-mixin-list-view-wrap-grid"
  }, r.map((function(e, t) {
      return i.default.createElement(Re.Z.Item, null, a(e, t))
  }

and the origin code is like below:

lib/listview/index.js:

// ...
import Grid from '../../grid'; // lib/grid/index.js

// ...
return (     <div className="cook-design-mixin-list-view-wrap">
        {data && data.length ? (
          <Grid
            scaleable={{
              minChildWIdth: scaleable?.minChildWIdth || 400,
              spacing: scaleable?.spacing || 8,
            }}
            className="cook-design-mixin-list-view-wrap-grid"
          >
            {data.map((item, index) => (
              <Grid.Item>{renderItem(item, index)}</Grid.Item>
            ))}
          </Grid>
        ) : renderEmpty ? (
          renderEmpty()
        ) : (
          <Empty />
        )}
      </div>) 

and i try to found the “Re” defined like this:

var Ce = n(53604);
        if (/^(194|222|302|335)$/.test(n.j))
            var Ne = n(91154);
        if (982 == n.j)
            var Re = n(51944);
        if (982 == n.j)
            var xe = n(40927);
        var Te = n(70709)
          , ke = n(94471)
          , Ie = n(95742)
          , Ae = n(24035);

and In development mode, it worked, no bug, and the origin code is like this:

// lib/index.js， export all components
// ...
export { default as Card } from './card';
export { default as Cascader } from './cascader';
export { default as Checkbox } from './checkbox';
export { default as Decorator } from './decorator';
export { default as Provider } from './provider';
export { default as Grid } from './grid';  // (in prod mode, in some case, the grid is not defined)
export { default as List } from './list';
// ...

and i found the reason: because i use splitChunk to optimize my project; there all 4 chunk out:

pages/merchandise.js (1.23 MiB)
pages/category.js (732 KiB)
pages/batch-setup.js (718 KiB)
pages/attribute.js (823 KiB)

the "Grid" component just directly import in attibute page (page chunk id is 982); so the webpack optimize the code。 but in other page, i use "ListView" component; and It use "Grid" component；they are all the children of the lib，export from lib/index.js

the relation just like this:

What is the current behavior?

it worked in development mode, and it crash in prod compile mode; and it show up after i splitChunk my project, but the split config is some in both mode;

If the current behavior is a bug, please provide the steps to reproduce.

if this is not a bug, how can i prevent this happen:

 if (982 == n.j) 
     var Re = n(51944);

What is the expected behavior?

it worked, no bug;

Other relevant information:
webpack version: 5
Node.js version: 14
Operating System: macos
Additional tools:

[alexander-akait]

Please create a minimal reproducible example, you have provided enough information but it is not enough to isolate the problem, thank you

[closertb]

i try to create a demo to reproduce, but i failed. it seems like the situation just happen in complex project，i need more time

[alexander-akait]

Feel free to ping me, try to use https://github.com/aackerman/circular-dependency-plugin to verify you don't have circular dependecies, somtimes the problem in them