TS2307: Cannot find module, webpack, vuejs2 and typescript

Question

I'm trying to setup a single file component architecture, but I can't seem to import a component into an other one. I believe I managed to get webpack.config.js the right way, and so my tsconfig.json and vue-shims.d.ts

Would you guys have an idea about how to fix it ?

Here is the error message :

[tsl] ERROR in /assets/components/vue/vue-components/myffgolf-my-golf-add-favorites/myffgolfAddFavoriteGolf.vue.ts(116,46)
      TS2307: Cannot find module './MyffgolfAddFavoriteGolfThumbnail.vue' or its corresponding type declarations.

My webpack.config.js :

Encore.reset();
Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .enablePostCssLoader()
    .enableReactPreset()
    .enableSingleRuntimeChunk()
    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
    .enableTypeScriptLoader((ts) => { ts.appendTsSuffixTo = ['\\.vue$'] }
    )
    .copyFiles({
        from: './assets/images',
        to: 'images/[path][name].[ext]',
        pattern: /\.(png|svg|json)$/
    })
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    }, { exclude: /(node_modules|bower_components|vendor)/ })
    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    // purge Css
    .addPlugin(new PurgeCssPlugin({
        paths: glob.sync([
            path.join(__dirname, 'templates/**/*.html.twig'),
            path.join(__dirname, 'assets/**/*.vue')
        ]),
        content: ["**/*.twig"],
        safelist: [
            /-(leave|enter|appear)(|-(to|from|active))$/,
            /^(?!(|.*?:)cursor-move).+-move$/,
            /^router-link(|-exact)-active$/
            ],
        defaultExtractor: (content) => {
            const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
            return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
        }
    }))
    .configureFontRule({
        filename: 'fonts/[name][ext]'
    })
    .copyFiles({
        from: './node_modules/share-api-polyfill',
        to: 'assets/js/share-api-polyfill/[path][name].[ext]',
        pattern: /\.(js|css|png)$/
    })
    .copyFiles({
        from: './node_modules/tarteaucitronjs',
        to: 'assets/js/tarteaucitron/[path][name].[ext]',
        pattern: /\.(js|css)$/
    })
    .addEntry('ffgolf', './assets/ffgolf.js')
    .addEntry('ffgolf-calendars', './assets/ffgolf-calendars.js')
    .addEntry('myffgolf', './assets/myffgolf.js')

;

const projectConfig = Encore.getWebpackConfig();

module.exports = [
    eZConfig,
    ...customConfigs,
    projectConfig
];


projectConfig.resolve.alias = {
    'vue$': 'vue/dist/vue.esm.js'
}

vue-shims.d.ts :

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

My tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "isolatedModules": false,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": false,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "files": [
      "./assets/vue-shims.d.ts"
    ],
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
}

And finally my components:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import AddFavoriteGolfThumbnail from "./AddFavoriteGolfThumbnail.vue";
import { Prop } from 'vue-property-decorator'

@Component({
  components: {
    'favorite-thumbnail': AddFavoriteGolfThumbnail
  },
})
export default class AddFavoriteGolf extends Vue {
  @Prop({ required: true, type: Boolean }) isFavorite!: boolean

  public mounted() {

  }
}
</script>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Prop } from 'vue-property-decorator'

@Component
export default class AddFavoriteGolfThumbnail extends Vue {

  @Prop({ required: true, type: Boolean }) isFavorite!: boolean

  public mounted() {

  }
}
</script>

Any idea would be appreciated! I think that I tried tons of things before asking, but feel free to redirect me somewhere if needed

EDIT: So I tried tons of thing and finaly managed to make it work, but an ugly way : by specifying "composite": true, my .vue files are now compilated and generated in the same folder of my components.

Here is the tsconfig file :

{
  "compilerOptions": {
    "composite": true,
    "target": "es5",
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2022",
    "moduleResolution": "Node",
    "isolatedModules": false,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "noImplicitThis": false,
    "strictNullChecks": false,
    "removeComments": true,
    "suppressImplicitAnyIndexErrors": true,
    "paths": {
      "@/*": [
        "./*"
      ]
    }
  },
  "files": [
    "./assets/vue-shims.d.ts"
  ]
}

I realy don't think that it's the good way to go, so if anyone has an advice, it would be very welcomed :)