How do I import a file with a space using next.js?

Question

I'm messing around with next.js. I have a CSV with some data that I would like to display in a table. I'm getting a curious error when I try and import the csv.

./static/data.csv 1:66
Module parse failed: Unexpected token (1:66)
You may need an appropriate loader to handle this file type.

Character 66 is a space

When I remove the space, it errors on the next space. I'm not sure what I should be doing differently.

Code:

import Link from 'next/link';
import React from 'react';
import Head from 'next/head';
import Header from '../components/Header';
import NavBar from '../components/NavBar';

export default () => (
  <div>
    <title>Test</title>
    <div class="title">
      <p>
      <img className="logo" src="/static/logo.png" />
      <h1>Test</h1>
      </p>
      <br/>
    </div>
    <hr/>
  </div>
)

const data = import('../static/data.csv');

As the error message says, you need an appropriate loader to import csv files. Do you have one? You can't just import any random file without something to handle it. — JJJ, Mar 25 '19 at 16:11
I did `npm i -s csv-loader` but I'm not sure how to add it to my webpack when using nextjs https://www.npmjs.com/package/csv-loader — Smipims, Mar 25 '19 at 16:15
I gave up on this as it's not a deal breaker. I converted the CSV to JSON and that loaded just fine. — Smipims, Mar 25 '19 at 17:24

score 5 · Accepted Answer · answered Mar 25 '19 at 17:32

Try this in next.config.js file

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
        test: /\.csv$/,
        loader: 'csv-loader',
        options: {
          dynamicTyping: true,
          header: true,
          skipEmptyLines: true
        }
      })

    return config
  }
}

How do I import a file with a space using next.js?

1 Answers1

Linked