Client side module can not access dependent module when using webpack

Question

I migrated my project to Webpack. What it looked like before:

HTML:

...
<script src="d3.v4.js"></script>
<script src="techan.js"></script>
<script src="main.js"></script>
...

Which main.js is dependent on techan.js and d3.v4.js. thechan.js is dependent on d3.v4.js.

After migrating to webpack:

HTML:

<script src="dist/main.js"></script>

main.js:

import d3 from './d3.v4.min'
import techan from './techan'
...

Now techan.js do not recognize d3. It is expecting a global variable with the name of d3 and throws this error:

Uncaught TypeError: Cannot read property 'min' of undefined

At this line:

require('./heikinashi')(indicatorMixin, accessor.ohlc, d3.min, d3.max),

How I can fix this issue without touching techan.js and d3.v4.js code?

Answer 1

I changed main.js to:

window.d3 = require('./d3.v4.min');
window.techan = require('./techan');
...

It is fixed now!