import problems d3 version 5 about d3-legend

[ppeer]

In the end there was nothing wrong with my set of webpack rules. I had to attach the d3 plugins to the d3 library like
const d3 = Object.assign(d3Base, { legendColor, lineChunked })
I followed the suggestion described in the following article:
https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/

Problem solved.

[susielu]

d3-svg-legend should be including its own set of d3 versions as dependencies, maybe I'm missing something, do you have more details? Can you give me some more information? how did you include d3v5 in your project? Are both installed via a package.json ?

[ppeer]

Hi Susielu,
My webpack contains:
"dependencies": { "d3": "^5.9.2", "d3-scale-chromatic": "^1.3.3", "d3-svg-legend": "^2.25.6", "vue-bootstrap-typeahead": "^0.2.6", "vue-router": "^3.0.6", "vuex": "^3.1.0" }

I am importing d3 and d3-svg-legend in a vue component as I do (succesfully) with other modules as well.

The components are bundled in a app.js by using webpack.
In webpack there are some rules regarding svg in file names, eg.
rules.push({ // only include svg that doesn't have font in the path or file name by using negative lookahead test: /(\.(png|jpe?g|gif|webp)$|^((?!font).)*\.svg$)/, loaders: [{ blablabla } ] })

and
// Add support for loading fonts. rules.push({ test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/, loader: 'file-loader'})

My regex test on "d3-svg-legend" suggests no conflicts with the defined rules, but I might be wrong: as well on my regex conclusion or on my suggestion regarding a fault triggered by webpack. I hope you can help me a bit.

regards,
ppeer

[susielu]

I'm not well versed in regex, but there was another person that posted this solution for an exclusion, they make sure the dot is in front of all of the options, so it only looks at .svg file extentions: #79

[susielu]

Ahhh excellent, thanks for posting the solution!