Webpack: Failed to Import d3 in vue script

[brucejcw]

vue init webpack my-project
...
npm install d3 --save

in Hello.vue

<script>
import d3 from 'd3'
console.log(d3) //undefined
</scrip>

The only way to get d3 is to set it in plugins

plugins: [
        new webpack.ProvidePlugin({
            "d3": "d3",
        })
    ]

but I don't want to set it global, how to use it by import

当我自己写了一个简单的demo的时候, import是能拿到d3的, 但是用了这个手脚架, 就import不进去了, 不知道哪里的设置问题, 能帮忙看下吗? 谢谢, 很简单的流程, 就只是这点代码量

[hekigan]

You have to import like that:
import * as d3 from 'd3';

[brucejcw]

@hekigan Thanks, it works. But it was very strange. I write a simple webpack script, and using import d3 from 'd3', it works, but failed to work in the vue cli project, anyway, thanks for your help

[hekigan]

@Awakening-j : basically, if you look at the D3 package.json in the node_modules folder, you would see which file is being called as 'main'.

I am not 100% sure, but it looks like depending if you are using ES5 or ES6, you have to use either import * as d3 from 'd3'; or import d3 from 'd3';

So I don't think it is related to Vue cli :)

[guoweish]

you can import specific d3 module like this: import {csv} form 'd3-request', instead of import all d3 package with: import * as d3 from 'd3'. d3 is too large, I always use what i need~~