如何使用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
  }
}