Cannot find module - Vue + TS

[lucasctd]

Expected Behavior

Compile file without any error

Actual Behavior

It keeps throwing an error saying the file does not exist.

Steps to Reproduce the Problem

In my case, I have a Laravel + InertiaJS project with some Vue components.

I am importing the question.vue component inside the questionBuilder.vue, but, for some reason, it keeps throwing that error, I have no idea why. The file is there, my IDE (PHPStorm) identifies the file as it's on a valid path. Also, the changes I made are actually being compiled to the bundle.js file, so do you guys have any idea of what could be wrong? I have also written my own webpack.config.js to see if it's related to laravel mix but I had the same issue.

Thanks in advance.

webpack.config.js

const path = require('path')

module.exports = {
    resolve: {
        extensions: ['.ts', '.js', '.styl'],
        alias: {
            '@components': path.resolve(__dirname, 'resources/js/components'),
            '@data': path.resolve(__dirname, 'resources/js/data'),
            '@layouts': path.resolve(__dirname, 'resources/js/layouts'),
            '@pages': path.resolve(__dirname, 'resources/js/pages'),
            '@': path.resolve(__dirname, 'resources/js'),
            '@css': path.resolve(__dirname, 'resources/css')
        }
    },
    module: {
        rules: [
            {
                test: /\.mjs$/,
                resolve: { fullySpecified: false },
                include: /node_modules/,
                type: 'javascript/auto'
            },
            {
                test: /\.pug$/,
                loader: 'pug-plain-loader'
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                options: { appendTsSuffixTo: [/\.vue$/] },
                exclude: /node_modules/
            }
        ]
    }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        // this enables stricter inference for data properties on `this`
        "strict": true,
        "noPropertyAccessFromIndexSignature": true,
        "noUncheckedIndexedAccess": true,
        "noImplicitAny": false,
        "jsx": "preserve",
        "moduleResolution": "node",
        "baseUrl": ".",
        "paths": {
            "@/*": ["resources/js/*"],
            "@components/*": ["resources/js/components/*"],
            "@data/*": ["resources/js/data/*"],
            "@layouts/*": ["resources/js/layouts/*"],
            "@pages/*": ["resources/js/pages/*"]
        }
    }
}

webpack.mix.js (laravel mix)

const mix = require('laravel-mix')

mix.js('resources/js/app.ts', 'public/js')
    .vue()
    .stylus('resources/css/global.styl', 'public/css/')
    .webpackConfig(require('./webpack.config'))

if (mix.inProduction()) {
    mix.version()
}

Location of a Minimal Repository that Demonstrates the Issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lucasctd]

I still have no clue what's going on. Probably going to try Parcel or Rollup I dunno :/

[xiaobaiku]

I also ran into this problem, how did you solve it?

[lucasctd]

I also ran into this problem, how did you solve it?

Actually I didn't.

[s00d]

need create shim in root dir

shims-vue.d.ts

declare module '*.vue' {
  import { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

and add to tsconfig.json

{
// ....
"include": ["shims-vue.d.ts"],
}