Webpack externals doesn't seem to work for nested objects.

Question

I was using my webpack externals like this and it works fine.

externals: {
    react: {
       root: React
    }
  }

But now I am injecting the webpack script for a child window , so instead of Window , React is now available in window.parent. So basically any calls to import React should fallback to window.parent.React

How do i do this using externals ? I have tried like this

externals: {
    react: {
       root: ["parent", "React"]
    }
  }

But it doesn't work. What am I missing ?

score 2 · Accepted Answer · answered Jul 28 '18 at 13:04

2

Finally found the answer to this

externals: {
  react: "parent.React"
}

is the correct way

answered Jul 28 '18 at 13:04

Abhik

1,920
7
27
50

score 0 · Answer 2 · answered Jul 28 '18 at 08:21

0

You should specify how it will be on the global, try that:

externals: {
  react: {
    root: "window.parent.React"
  }
}

answered Jul 28 '18 at 08:21

felixmosh

32,615
9
69
88

I did try this , but didnt work. I searched for the string "window.parent.React" in the bundle that webpack made and only place it appears is a comment like // EXTERNAL MODULE: external {"root":"window.opener.React"} var external___root___window_opener_React__ = __webpack_require__("275976081ce1abf67779"); var external___root___window_opener_React___default = /*#__PURE__*/__webpack_require__.n(external___root___window_opener_React__); – Abhik Jul 28 '18 at 09:02

Webpack externals doesn't seem to work for nested objects.

2 Answers2