1

I have a problem and I am a bit desperate as I could not find a solution yet (also because I don't know what to google).
So I have an existing (still almost new) Laravel project and wanted to upgrade from vue2 to vue3 with typescript. So with this tutorial I switched from vue2 to vue3 and with this tutorial, I switched to typescript. When serving the project (php artisan serve) I get an "404 Not Found" error for http://127.0.0.1:8000/js/app.ts. There are also two warning that the with the source "http://127.0.0.1:8000/js/app.ts" and "http://localhost:35729/livereload.js" could not be loaded

Here are some files I changed

// webpack.mix.js
const LiveReloadPlugin = require('webpack-livereload-plugin');

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

mix.webpackConfig({
    plugins: [new LiveReloadPlugin()]
})

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node",
    },
    "include": [
        "resources/js/**/*"
    ]
}

// resources/js/app.ts
import { createApp } from 'vue';
import App from './components/App.vue'

createApp(App)
    .mount('#app');

// resources/shims-vue.d.ts
declare module "*.vue" {
    import { ComponentOptions } from "vue";
    const component: ComponentOptions;
    export default component;
}

Does anyone knows how to fix this? I really appreciate any kind of suggestions.

link
  • 491
  • 1
  • 4
  • 13

1 Answers1

1

When I renamed app.js to app.ts, all occurrences where also renamed. So in my start.blade.php a script referenced app.ts, which obviously does not exists after compilation... I had to change this to app.js and now it works.

link
  • 491
  • 1
  • 4
  • 13