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?

score 0 · Accepted Answer · answered Apr 21 '20 at 15:13

0

I changed main.js to:

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

It is fixed now!

answered Apr 21 '20 at 15:13

Ali Gonabadi

I have the same error but I don't understand your fix. Paths that start with a './' means a local file in your project, not in the node_modules library. Are you saying you extracted the d3 and techan js files and put them in your project path? I added window.d3 = require(d3.min); window.techan = require('techan'); But it did nothing. – user3217883 Mar 20 '21 at 14:47
What is main.js? I also added new webpack.ProvidePlugin({ // d3: "d3", // if you add this line you can remove the import in the code "window.d3": "d3" // this adds d3 in the window object for techan }) in the webpack.config.js file as I read in another post. But it did nothing. – user3217883 Mar 20 '21 at 14:48

1 Answers1