Can't open local .geojson files inside Vue Project

Question

I am trying to load static .geojson files inside my VueJS project. Simple .json files are working, but .geojson files gives me the following error:

Uncaught Error: Module parse failed: Unexpected token (1:7)
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
> {"type": "FeatureCollection", "features": []}
    at eval (address.geojson:1)
    at Object../src/venue/amenity.geojson (app.js:1418)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Prodmap.vue?vue&type=script&lang=js&:13)

and so on.. Of course I can switch all files to .json, but this could only be a temporary workaround.

import Address from '@/venue/address.json'; // works
import Address from '@/venue/address.geojson'; // gives me the error

Answer 1

Vue CLI loads JSON natively, but I'm not sure how that can be configured for a different extension. Here's another option:

Install json-loader:

npm install json-loader

Configure json-loader in vue.config.js in your project root (create the file if necessary):

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.geojson$/,
          loader: 'json-loader'
        }
      ]
    }
  }
}