sarukomine's avatar

How can Laravel Mix build JS files with Vue 3 + TypeScript?

I try to run npm run dev to build file but it always give me this TS2307 error as below... I googled many time still can't fix it so far...

error message

ERROR in /.../laravel-sample/resources/js/app.ts
./resources/js/app.ts 2:16-27
[tsl] ERROR in /.../laravel-sample/resources/js/app.ts(2,17)
      TS2307: Cannot find module '@/App.vue' or its corresponding type declarations.

webpack compiled with 1 error

VS Code could detecting this App.vue file, but Webpack couldn't...

these files i using as following~ I don't know what I'm missing...

resources/js/app.ts

import { createApp } from 'vue';
import App from '@/App.vue';

const app = createApp(App);

resources/js/App.vue

<script lang="ts">
    import { defineComponent } from 'vue';

    export default defineComponent({
        name: 'App',
    });
</script>

webpack.mix.js

const mix = require('laravel-mix');
const path = require('path');

const alias = {
    '@': path.resolve(__dirname, 'resources/js'),
};

mix.vue()
   .alias(alias)
   .ts('resources/js/app.ts', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

mix.webpackConfig({
    resolve: {
        extensions: [ '.vue', '.ts', '.js' ],
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_module/,
                options: { appendTsSuffixTo: [/\.vue$/] }
            },
        ],
    },
});

tsconfig.json

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "strict": true,
        "jsx": "preserve",
        "moduleResolution": "node",
        "baseUrl": "resources/js",
        "paths": {
            "@/*": [ "*" ]
        }
    }
}

package.json

{
    "private": true,
    ...
    "devDependencies": {
        "axios": "^0.25",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^5.0.0",
        "sass": "^1.49.7",
        "sass-loader": "^12.6.0",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.5",
        "vue": "^3.2.31",
        "vue-loader": "^16.8.3",
    }
}
0 likes
7 replies
MohamedTammam's avatar

I'm not sure whether you are doing this in the right order or not, but try that way.

const mix = require('laravel-mix');
const path = require('path');

mix.webpackConfig({
    resolve: {
        extensions: [ '.vue', '.ts', '.js' ],
		alias: {
        	'@': __dirname + '/resources/js',
		}
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader',
                exclude: /node_module/,
                options: { appendTsSuffixTo: [/\.vue$/] }
            },
        ],
    },
});

mix.vue()
   .ts('resources/js/app.ts', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

The error says it can't find the file, try to import it without aliases and if it works make sure the setup the aliases correctly.

sarukomine's avatar

@MohamedTammam tried before~ not working...

ERROR in /.../laravel-sample/resources/js/app.ts
./resources/js/app.ts 2:16-27
[tsl] ERROR in /.../laravel-sample/resources/js/app.ts(2,17)
      TS2307: Cannot find module './App.vue' or its corresponding type declarations.

webpack compiled with 1 error

btw I installed Typescript as global via NPM, its version is 4.5.5

Please or to participate in this conversation.