如何使用 next.js 导入带有空格的文件? [英] How do I import a file with a space using next.js?

问题描述

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

./static/data.csv 1:66模块解析失败:意外令牌 (1:66)您可能需要一个合适的加载器来处理这种文件类型.

字符66是一个空格

当我删除空间时，它会在下一个空间出错.我不确定我应该做些什么不同的事情.

代码:

从'next/link'导入链接；从反应"导入反应；从下一个/头"导入头；从'../components/Header'导入标题；从'../components/NavBar'导入导航栏；导出默认值 () =>(<div><title>测试</title><div class="title"><p><img className="logo" src="/static/logo.png"/><h1>测试</h1></p><br/>

<小时/>

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

解决方案

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

module.exports = {webpack: (config, options) =>{config.module.rules.push({测试:/\.csv$/,loader: 'csv-loader',选项: {动态类型:真，标题:真实，跳过空行:真}})返回配置}}

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

解决方案

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

这篇关于如何使用 next.js 导入带有空格的文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！