Important

The problem was a file in the wrong directory. This will likely not help you...

The question

I'm using Vue.js single file components and want to import a .json file in one of them but I can't figure out how to do it. Here's what I want to do:

src/App.vue contains:

import data from './tree.json'; // This does not work!

export default {
  /* Component def */
};

Webpack then gives the following error:

ERROR in ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve './tree.json' in 'C:\src'
 @ ./src/App.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&) 8:0-31
 @ ./src/App.vue?vue&type=script&lang=js&
 @ ./src/App.vue
 @ ./src/app.js
 @ multi ./src/app.js

Webpack configuration (simplified):

module.exports = {
  mode: 'development',

  entry: [
    './src/app.js',
  ],

  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
      },
    ],
  },
};

I am using Vue.js 2.5 and Webpack 4.28.

Trying to import the same .json file in a "vanilla" .js file however does work:

// In src/app.js
import data from './tree.json';

This leads me to think there is something specific to the vue-loader that doesn't work with Webpack's native handling of .json imports, but I have no idea what.