How do I import csv file?

[Djordjenp]

Hello, I am trying to import csv from assets folder into my JS file:

import continentsCSV from '../../assets/SixContinentFirst.csv'
import * as d3 from 'd3'

 useEffect(() => {
        d3.csv(continentsCSV).then(data => console.log(data))
    }, [])

But I get Back an error: Uncaught SyntaxError: The requested module '/src/assets/SixContinentFirst.csv?import' does not provide an export named 'default'

If I try to just pass path like this without importing:

 useEffect(() => {
        d3.csv('../../assets/SixContinentFirst.csv').then(data => console.log(data))
    }, [])

I get 404 not found error.

Here is how my csv file looks:

Dates,Africa,Asia,Europe,North-America,Oceania,South-America,Grand-Total
Jan-20,0,9333,17,11,9,0,9370
Feb-20,3,73839,1485,50,17,4,75398
Mar-20,5764,96833,454715,207358,5238,14507,784415
Apr-20,32993,342990,931818,964294,3085,165773,2440953
May-20,108124,618468,604273,849767,465,725850,2906947

[tony19]

Install @rollup/plugin-dsv as a dev dependency:

npm i -D @rollup/plugin-dsv

...and configure Vite to use it:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import dsv from '@rollup/plugin-dsv' 👈

export default defineConfig({
  plugins: [
    vue(),
    dsv(), 👈
  ],
})

Then importing a .csv file would produce the object array, as you were expecting:

<script>
// MyComponent.vue
import csv from './filmList.csv'
console.log(csv) // => [{'name':'Parasite','year':'2019','href':'parasite-2019','src':'film-poster/4/2/6/4/0/6/426406-parasite-0-460-0-690-crop.jpg'}]
</script>

demo

[Djordjenp]

Tnx it works

[ghysc]

I spent a few hours trying to understand, so if it may help someone else,
using it with TypeScript, you need to add these lines in your .d.ts file:

declare module "*.csv" {
    export default <{ [key: string]: any }>Array;
}

[chioio]

Dose there one solution for excel file support?

[luokuning]

For those who just want a URL that point to the origin file, append ?url at the end of the file path: import continentsCSV from '../../assets/SixContinentFirst.csv?url'.

[craigyu]

This worked.
Could you explain how the ?url works please? Where can I find documentation about this? Thank you.

[wyq730]

@craigyu Here is the vite documentation on this: https://vitejs.dev/guide/assets#explicit-url-imports