Destructuring assignment of dynamically imported JSON files broken in 5.80.0

[jessevanassen]

Bug report

const { default: json } = await import("./file.json");

When destructuring the default out of a dynamically imported JSON file containing an object or array, the import will result in an empty container ({} for a JSON file containing a filled object, [] for a JSON file containing a filled array) instead of the actual import.

What is the current behavior?
Only the empty container is returned, not the actual contents.

If the current behavior is a bug, please provide the steps to reproduce.
I've added the following test cases on this branch: https://github.com/jessevanassen/webpack/tree/dynamic-import-destructuring-assignment-json (comparison with main: main...jessevanassen:webpack:dynamic-import-destructuring-assignment-json)

it("should support importing objects from JSON files", async () => {
	const { default: json } = await import("./dir1/object.json"); // Contains `{ "a": 1 }`
	expect(json).toBe({ a: 1 });
});

it("should support importing arrays from JSON files", async () => {
	const { default: json } = await import("./dir1/array.json"); // Contains `["a"]`
	expect(json).toBe(["a"]);
});

it("should support importing primitives from JSON files", async () => {
	const { default: json } = await import("./dir1/primitive.json"); // Contains `"a"`
	expect(json).toBe("a");
});

Only the last test succeeds. The others fail like this:

 FAIL  test/TestCasesModule.test.js
  ● TestCases › module › chunks › destructuring-assignment › exported tests › should support importing objects from JSON files

    expect(received).toBe(expected) // Object.is equality

    - Expected  - 3
    + Received  + 1

    - Object {
    -   "a": 1,
    - }
    + Object {}

      191 | it("should support importing objects from JSON files", async () => {
      192 |     const { default: json } = await __webpack_require__.e(/*! import() */ 2).then(__webpack_require__.t.bind(__webpack_require__, /*! ./dir1/object.json */ 3, 19));
    > 193 |     expect(json).toBe({ a: 1 });
          |                  ^
      194 | });
      195 |
      196 | it("should support importing arrays from JSON files", async () => {

      at test/js/module/chunks/destructuring-assignment/bundle.mjs:193:15

  ● TestCases › module › chunks › destructuring-assignment › exported tests › should support importing arrays from JSON files

    expect(received).toBe(expected) // Object.is equality

    - Expected  - 3
    + Received  + 1

    - Array [
    -   "a",
    - ]
    + Array []

      196 | it("should support importing arrays from JSON files", async () => {
      197 |     const { default: json } = await __webpack_require__.e(/*! import() */ 3).then(__webpack_require__.t.bind(__webpack_require__, /*! ./dir1/array.json */ 4, 19));
    > 198 |     expect(json).toBe(["a"]);
          |                  ^
      199 | });
      200 |
      201 | it("should support importing primitives from JSON files", async () => {

      at test/js/module/chunks/destructuring-assignment/bundle.mjs:198:15

The following constructs do work:

const json = (await import("./file.json")).default;

const imported = await import("./file.json");
const json = imported.default;

This leads me to believe that the recently merged #16995 might be the cause.

What is the expected behavior?
The parsed JSON should be imported.

Other relevant information:
webpack version: v5.80.0
Node.js version: v20.0.0
Operating System: Ubuntu 22.04.2 LTS

[alexander-akait]

/cc @vankop Can you look at this?

[alexander-akait]

@jessevanassen Weird, I can't reproduce, can you provide example? Reproduced

[jessevanassen]

For completeness, here's my reproduction.
reproduction.zip

[TheLarkInn]

@jessevanassen as a work around can you get by this by dynamically importing an esm module which import the json instead? We're still looking into the fix for this.

[jessevanassen]

@jessevanassen as a work around can you get by this by dynamically importing an esm module which import the json instead? We're still looking into the fix for this.

As a workaround, we rewrote it to the following which also works, but doesn't require a separate file:

const json = (await import("./file.json")).default;

It's purely the combination of dynamic imports and destructuring that triggers it, by taking out the destructuring the bug doesn't occur.

[alexander-akait]

@vankop friendly ping, do you need help with it?

[vankop]

@alexander-akait hi, feel free to pick this up. dont have time for this now

---

basically, you need to fix how used exports are detected in this case

[alexander-akait]

@vankop any hints where this is potentially being processed and needs to be fixed?)

[vankop]

FlagDependencyUsagePlugin. for me sounds like we need option in ImportDependency like importNamespace=true in this case.. since module export is exportsType=default for json module

[alexander-akait]

Another intresting bug:

const { default: json, bar } = await import("./file.json");

console.log(json);
console.log(bar);

json keep bar if it exists in file.json, but should not, because there is only default

[webpack-bot]

This issue had no activity for at least three months.

It's subject to automatic issue closing if there is no activity in the next 15 days.

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.