Блог

Я пытаюсь импортировать файл GeoJSON в NextJS, но он говорит:

Сбой синтаксического анализа модуля: неожиданный токен (2: 8)

Для обработки этого типа файлов может потребоваться соответствующий загрузчик, в настоящее время загрузчики не настроены для обработки этого файла. См. 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,
  },
}));
 

Может кто-нибудь помочь мне добиться этого?

Ладно, ребята, мне удалось это сделать!

Я попытаюсь объяснить, чего я хотел достичь, что происходило и что я сделал.

Я хотел загрузить данные geojson из файла в google maps 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)

И это сработало! Надеюсь, это поможет тем, кто попал в беду.