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
  }
}

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

1 个答案: