在NextJS中导入geojson

Question

我试图在NextJS上导入GeoJSON文件，但它说:

Module parse failed: Unexpected token (2:8)

你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件。看到https://webpack.js.org/concepts装载机

当项目在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数据到谷歌地图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文件!

但现在，另一个问题。图层没有加载!所以我阅读了谷歌地图API，并尝试了另一种方法来加载geojson.

map.data.addGeoJson(imported_file.geojson)

它成功了!希望它能帮助到有困难的人。