Arrow functions not transpiled and causing error on IE11

sage
1

Hi there,

I am working on a website using Sage 10 and seems like the app.[hash].js file generated using yarn build doesn’t have arrow functions transpiled, and so when testing the website on IE11 it outputs a SCRIPT1002: Syntax error on console. Below you can see the => on the javascript.

public/app.[hash].js

(self.webpackChunkarkmount=self.webpackChunkarkmount||[]).push([[143],{757:function(t,r,e){t.exports=e(666)},329:function(t,r){"use strict";Object.defineProperty(r,"__esModule",{value:!0}),r.default=t=>{window.requestAnimationFrame...

This is my first project using Sage and I am not familiar with Bud or Babel, but I have been trying different options for Babel preset, and this is what I have a this moment:

bud.config.js

...
module.exports = async (app) => {

  app.babel.setPresetOptions('@babel/preset-env', {
    targets: {
      browsers: ["IE 11"],
    },
    forceAllTransforms: true,
    modules: "commonjs",
  })

  app
    .entry({
...

I have third-party libraries like bootstrap, slick and fancybox imported inside resources/scripts/app.js for this projects, but at this moment I have removed all the imports and any code from inside the const main = async (err) => { ... } just to have the very basics exported and try to find the source of problem, but still the issue is hapening.

Does anyone ever faced the same issue, or would be able to point me to the right direction on how to get this sorted?

Thank you

2

obligatory RIP to IE11

(RIP)

assuming you can’t just not support this dead browser, you’ll have a way easier time doing this with browserslist config (babel pays attention to it).

something like last 2 versions, > 0.5%, ie >= 11

3

Thanks for your suggestion.

Unfortunately this project needs support for IE11.

I tried your suggested values on browserslist inside package.json, but seems the arrow function is still there in the outputted app.[hash].js.

Also tried to run yarn build after removing all the contents of resources/scripts/app.js and having it as an empty file, and apparently the arrow function is gone. So it leads me to thing it’s due to the imported modules are not being transpiled, as the error was gone when removing import {domReady} from '@roots/sage/client';. Does that make sense?

Thank you

4

I think this is injected by webpack 5 itself, by default. it happens after babel runs. Check out the babel-loader README:

In bud.js you would do this:

    app.hooks.on('build.output.environment', (env) => ({
      ...(env ?? {}),
      arrowFunction: false,
    }))
5

@kellymears thanks again.

Another try

I’ve tried adding your suggestion like this:

bud.config.js

module.exports = async (app) => {
  
  app.hooks.on('build.output.environment', (env) => ({
    ...(env ?? {}),
    arrowFunction: false,
  }));

  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app', '@scripts/map'],
      editor: ['@scripts/editor', '@styles/editor'],
      admin: ['@scripts/admin', '@styles/admin'],
    })

But after running yarn build the arrow function is still there.

public/vendor/app.[hash].js

... e.default=t=>{window.requestAnimationFrame((function ...

Temporary solution

I found a workaround to remove the arrow function for now, probably not the best practise, but will need to use it as can’t spend more time on this right now. I might be looking into this again over the next while to make it work properly, but just adding this for the record and in case someone gets stuck with the same issue and couldn’t find a better solution.

It consists in switching domReady for jQuery( document ).ready:

resources/scripts/app.js

// 1. Remove this import
// import {domReady} from '@roots/sage/client'; 

// 2. Replace this async arrow function with a basic one
// const main = async (err) => {
//     // handle hmr errors
//     if (err) { 
//         console.error(err);
//     }
// };

function main() {
// Application code here
}

// 3. Call the main function using jQuery instead of domReady
// domReady(main);

jQuery( document ).ready(function() {
    main();
});

app/setup.php

// 4. Add jquery as a dependency when enqueueing the app JS
//bundle('app')->enqueue(); // Replace this line
bundle('app')->enqueueCss()->enqueueJs(true, ['jquery']); // With this line

Thank you

6

i’m glad you got it sorted.

i think you can just import $ from 'jquery' in your app code, by the way. it’ll automatically be added as a wp dependency and replaced with the import from window.wp in the bundle.