TypeScript support

[tom-on-the-internet]

Hello. Thanks so much for making this loader.

I'm not familiar with webpack or svelte.

Is there a way to make this work with TypeScript?

This is the error I am getting

ERROR in ./resources/ts/Pages/App.svelte
Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ParseError: Unexpected token (2:16)
1: <script lang="ts">
2:   export let name: string;
                    ^
3: </script>
4: 
    at /home/tom/code/toy-app/node_modules/svelte-loader/index.js:86:12

and this is my webpack.mix.js

const mix = require("laravel-mix");
require("laravel-mix-svelte");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  .options({ processCssUrls: false })
  .ts("resources/ts/main.ts", "public/js/main.js")
  .css("resources/css/global.css", "css")
  .copy("resources/favicon.png", "public/favicon.png")
  .webpackConfig({ output: { chunkFilename: "js/[name].js?id=[chunkhash]" } })
  .svelte()
  .version()
  .sourceMaps()
  .setPublicPath("public");

Thank you so much!

[simonvomeyser]

Hey @tom-on-the-internet got that working after trying a bunch of stuff

You'll need to follow the instructions here: https://laravel-news.com/typescript-laravel

gist is run install this (and create a .tsconfig.json)

npm install ts-loader typescript --save-dev

and then add the compiling part of this: https://svelte.dev/blog/svelte-and-typescript#1_Compiling_TypeScript

gist is run install this

npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

My webpack.mix.js looks like this:

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

const autoPreprocess = require('svelte-preprocess');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.ts', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ])
    .svelte ({
        dev:! mix.inProduction (),
        preprocess: autoPreprocess()
    })
    .browserSync(process.env.APP_URL)
    .webpackConfig ({
        output: {chunkFilename: 'js/[name].js?id=[chunkhash]'},
    })
    .version();

Hope this helps, have a good day! Simon vom Eyser

[morpheus7CS]

Hey @simonvomeyser,

thanks for sharing the setup and helping @tom-on-the-internet out.

Hopefully, we will also find a suitable solution to support TypeScript in the future, without having to do the setup manually, but I'm closing the issue for the time being.

Kind regards, g

[simonvomeyser]

@morpheus7CS I hope so

For anyone stumbling across this: Even though it basically works I still faced some issues with importing types after following my instructions above, so hopefully someone will stumble over a better solution than mine!

all the best Simon