@snowpack/plugin-webpack: Typescript project with 'target' as 'es5'

[skylarrikin]

G'day all.

I just started playing around with Snowpack for a TypeScript project. I am not an expert in either TypeScript or Webpack for that matter, so pardon me should I sound like a n00b.

So, here are the steps that I followed:

1. Create Snowpack App (CSA): $ npx create-snowpack-app new-game-dir --template @snowpack/app-template-blank-typescript
2. CD to 'new-game-dir' folder.
   2.1 Install PixiJS: $ npm install pixi.js
   2.2 Install @snowpack/plugin-webpack: $ npm install --save-dev @snowpack/plugin-webpack
3. Update 'snowpack.config.js' for 'installOptions' to include 'polyfillNode: true' (Useful for PixiJS)
4. Update 'snowpack.config.js' for 'plugins' to include:
   plugins: [['@snowpack/plugin-typescript'], ['@snowpack/plugin-webpack', {sourceMap: true}]],

Everything runs fine and I am able to create Production build using 'package.json' -> 'scripts' -> 'build' command.
My only problem is that I am unable to generate the final build.js file as a 'es5' compatible version. As a test, in my source file, I have used 'arrow' functions and the final build.js retains it. Clearly, 'arrow' functions are not part of 'es5'.
This is the function that i am referring to:

    app.ticker.add( (delta) => {
        bunny.rotation += 0.1 * delta;
    })

If it helps, here is my 'tsconfig.json':

{
  "include": ["src", "types"],
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "importsNotUsedAsValues": "error",
    /* more strict checking for errors that per-file transpilers like `esbuild` would crash */
    "isolatedModules": true,
    /* noEmit - We only use TypeScript for type checking. */
    "noEmit": true,
    /* Additional Options */
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "useDefineForClassFields": true,

    // You can't currently define paths in your 'extends' config,
    // so we have to set 'baseUrl' & 'paths' here.
    // Don't change these unless you know what you're doing.
    // See: https://github.com/microsoft/TypeScript/issues/25430
    "baseUrl": "./",
    "paths": { "*": ["web_modules/.types/*"] }
  }
}

and here's my 'snowpack.config.js':

/** @type {import("snowpack").SnowpackUserConfig } */
module.exports = {
  mount: {
    public: '/',
    src: '/_dist_',
  },
  plugins: [
            ['@snowpack/plugin-typescript'], 
            ['@snowpack/plugin-webpack', {sourceMap: false}]
          ],
  install: [
    /* ... */
  ],
  installOptions: {
    installTypes: true,
    polyfillNode: true,
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
  proxy: {
    /* ... */
  },
  alias: {
    /* ... */
  },
};

Any ideas as to what I could be doing wrong? I tried changing 'target' and 'module' in 'tsconfig.json' to 'ES5', but to no avail.

Thank you very much in advance.

[skylarrikin]

If in the event of someone else getting stuck on this issue again in the future, I found a solution to address this problem: browserslist.
You could just add this to your package.json:

  "browserslist": [
    "defaults"
  ],

Webpack will pick it up and will update its'babel-loader' -> 'targets'with whatever settings you put in the 'browserslist' node.

Hope it helps someone in the future.

[DenisTimofijuk]

Thanks it works!