在 NextJS 中导入 geojson

Question

我正在尝试在 NextJS 上导入 GeoJSON 文件，但它显示：

Module parse failed: Unexpected token (2:8)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

当项目在 ReactJS 中使用 create-react-app 时它工作正常，但现在我们迁移到 NextJS 时它没有。

也许我需要在 next.config.js 上配置一些加载程序，但我不知道该怎么做

这是我的 next.config.js:

const withCSS = require("@zeit/next-css")
const withLess = require('@zeit/next-less');
const withImages = require('next-images')
module.exports = withCSS(withLess({
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  },
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
}));

有人可以帮我实现这个吗？

Answer 1

好的伙计们，我做到了！

我将尝试解释我想要完成的事情、正在发生的事情以及我做了什么。

我想将文件中的 geojson 数据加载到 google 地图中 api 以加载一些图层，所以我想在 map.data.loadGeoJson(imported_file.geojson)

上使用它

首先，我需要让 Nextjs 从源加载我的文件，所以我安装了 json-loader

npm i --save-dev json-loader

然后添加到next.config.js

const withCSS = require("@zeit/next-css")
const withLess = require('@zeit/next-less');
const withImages = require('next-images')
module.exports = withCSS(withLess({
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });
    config.module.rules.push({
      test: /\.geojson$/,
      use: ["json-loader"]
    });

    return config;
  },
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
}));

然后，导入 geojson 文件时不再出现错误消息！

但是现在，另一个问题。图层没有加载！所以我阅读了 Google Maps API 并尝试了另一种方法来加载 geojson。

map.data.addGeoJson(imported_file.geojson)

而且成功了！希望能帮到有困难的人。

在 NextJS 中导入 geojson

Import geojson in NextJS

import

geojson

next.js