如何使用 next.js 导入带有空格的文件？

Question

我正在摆弄 next.js。我有一个 CSV 文件，其中包含一些我想在表格中显示的数据。当我尝试导入 csv 时遇到一个奇怪的错误。

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

字符 66 是一个空格

当我删除空格时，它会在下一个空格上出错。我不确定我应该采取什么不同的做法。

代码：

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');

Answer 1

next.config.js在文件中尝试这个

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

    return config;
  },
};