Import csv into Nextjs and read with d3

Question

I'm having trouble importing csv data into my nextjs app to read with d3.

I understand that static files must be in the public directory and only absolute paths will work, but although I get the absolute path with process.cwd(), it doesn't seem to find the file. I can't import the csv at the top of the js file either?

My index.js is

import { useState, useEffect } from 'react'
import path from 'path'
import Head from 'next/head'
import { csv }  from "d3"

export async function getStaticProps(context) {

  const dataPath = path.join(process.cwd(), 'public/data/harry_potter.csv')
  console.log("DATA PATH: ", typeof dataPath)
  const data = await csv(dataPath)

  console.log("DATA", data)

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

export default function Home(props) {  

  useEffect(() => {
    console.log("DATA", props)

  }, [])

  return (
    <div className="container">
      <Head>
        <title>d3 exercise</title>
      </Head>

      <main>
        
      </main>
    </div>
  )
}

My path is:

C:\Users\david\Documents\d3-pluralsight\ex1\public\data\harry_potter.csv

And the nextjs app directory is

C:\Users\david\Documents\d3-pluralsight\ex1

But I still get:

TypeError: Only absolute URLs are supported

I can't import like this either

import harry from '../public/data/harry_potter.csv'

Am I missing something? Does Next not recognise csv files without extra config?

EDIT: using csv-loader loads the csv, but doesn't give access to d3's powerful type conversion functions. If I just write my own function js runs out of memory with csvs with 20000 rows

You could add `csv-loader` to Next.js webpack config to be able to import the file directly, as described here: https://stackoverflow.com/a/55343501/1870780. — juliomalves, Jan 06 '21 at 16:44

score 2 · Answer 1 · answered Jan 06 '21 at 19:19

d3.csv is expecting a URL, not a file path (older versions of d3.csv would start a XHR request; newer versions retrieve via fetch). If you want to read the file off the filesystem (as opposed to serving it via HTTP), just read it into a string with something like fs and then pass the string to d3.csvParse.

Import csv into Nextjs and read with d3

1 Answers1