Emit JS?

[kaisermann]

I'm currently making a svelte-webpack-template for a somewhat old webkit environment. With babel-preset-env, I'm trying to automatically polyfill my project's and svelte's generated code.

My first attempt was to call babel-loader after svelte-loader was done:

Unfortunately, it stopped working with the last updates of svelte-loader/svelte and now babel-loader tries to read the template file itself ( ¯\_(◕_◕)_/¯ ).

My next thought was probably a dumb question, but... would it make sense to "emit" the js generated by the svelte compiler?

(or maybe there's a better way to do this...)

[Rich-Harris]

eek! I honestly have no idea. Hopefully someone else will...

[kaisermann]

I was able to make it polyfill the svelte/shared.js again by enforcing my .babelrc.js to babel-loader. It wasn't parsing the shared.js because it's looking for a babel config inside the node_modules/svelte directory.

I'm gonna close this since I've already solved my main issue.

PS: regarding sveltejs/svelte#1359, if the output of svelte/compiler will be ES6 code, how would we handle ES5-only browsers?

PS²: @babel/preset-env was actually parsing and polyfilling the code generated by svelte. Its debug log just points to the original .html.

Edit:

If anyone is on the same boat as I was:

Not pretty, but it gets the job done 😸

[green3g]

Wait, I might be running into this too. I'm trying to get babel to transpile the svelte code into IE11 friendly versions and the shared.js file still has arrow functions in it. I'm not really following what you're doing there, can you tell me how to fix this?

{
            test: /\.svelte$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    cacheDirectory: true,
                    sourceMap: true,
                },
            }, {
                loader: 'svelte-loader',
                options: {
                    emitCss: true,
                },
            }],
        },

[martynchamberlin]

@kaisermann Thanks a million for posting this code. I had the exact same problem and your code screenshot was the key. I needed to do the babel-loader in a use array, instead of just having a loader property on the rule.

@roemhildtg I think you're on the right track, you just need to make sure you're also testing for .js files and running the babel-loader on them too.

[martynchamberlin]

@roemhildtg To follow up on this, because I was having the same issue too just now. Since the shared.js file is coming from node_modules/svelte, you'll probably need to make sure your Babel is transpiling that directory. We almost always in our babel config exclude the node_modules wholesale, which is why it isn't picking up that shared.js file.

[borracciaBlu]

Case => function error not transpiled IE11

   // WRONG
   // missing /node_modules\/(?!svelte)/ for js file
   // thus can not pick up node_modules/svelte/shared.js
   {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules/,
   },
   {
       test: /\.svelte/,
       exclude: /node_modules\/(?!svelte)/,
       use: [loaders.babel, loaders.svelte],
   },

   // CORRECT
   {
       test: /\.js$/,
       loader: 'babel-loader',
       exclude: /node_modules\/(?!svelte)/,,
   },
   {
       test: /\.svelte/,
       exclude: /node_modules\/(?!svelte)/,
       use: [loaders.babel, loaders.svelte],
   },