Loading D3 with Nuxt/Vue

Question

I am trying to implement D3 in an app I am building with Nuxt. I have successfully imported it into a view in the <script> section with import * as d3 from 'd3' however because the app is being rendered server-side D3's functionality doesn't work (i.e. d3.select(...)) due to the lack of browser. In the Nuxt plugin documentation it suggests a pattern for client-only external plugins:

module.exports = {
  plugins: [
    { src: '~plugins/vue-notifications', ssr: false }
  ]
}

I attempted to implement the pattern in the nuxt.config.js of my project:

module.exports = {
  head: {
    title: 'My Demo App',
    meta: [...],
    link: [...]
  },

  loading: {...},

  plugins: [
     { src: '~node_modules/d3/build/d3.js', ssr: false}
  ]
}

However D3 throws a ReferenceError while looking for document and Nuxt throws a SyntaxError in the console pointing to something in the plugins field of nuxt.config.js.

For reference, demo.vue:

<template>
  <div class="demo-container"></div>
</template>

<script>
  import * as d3 from 'd3';
  d3.select('.demo-container');
</script>

Would someone be able to point to what I'm doing wrong?

Answer 1

I was getting an error:

Must use import to load ES Module: .../node_modules/d3/src/index.js require() of ES modules is not supported. require() of .../node_modules/d3/src/index.js from .../node_modules/vue-server-renderer/build.dev.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from .../node_modules/d3/package.json.

I solved it by reading this: https://github.com/nuxt/nuxt.js/issues/9223

which indicates you can add this to your nuxt.config.js file:

  build: {
    standalone: true,
  }

This allowed the d3 import to work.

import * as d3 from "d3";

Answer 2

For anyone coming to this page looking for a solution, these suggestions from piyushchauhan2011 here on GitHub sent me in the right direction.

All I needed to do:

• import d3 in my single-file component, and then
• do any DOM manipulation with d3 only within mounted()

Before all this, I had to of course add d3 to my project with yarn add d3 (or npm install d3).

[Edit: removed link that no longer works. It wasn't that relevant anyway.]