Help Setting up Typescript With Webpack

[zealous ruin]

REPO - https://github.com/devnchill/TSTemplate

I was able to set up Prettier and Eslinter and ESLINT-PRETTIER . However I'm having issues when setting up webpack as my editor is giving me several warning if I open webpack.config.js . What I think the issue is , webpack is using common js style for modules and not import/export .

I would really like if someone could help me set this up.

[opaque ether]

@zealous ruin Those look like eslint warnings - you'd want to tell eslint that webpack.config.js is node file and has node globals available like __dirname and require

[zealous ruin]

no idea what you mean by node file 😅 and node globals

[opaque ether]

NodeJS - it's the environment that most non-browser JS runs in.

Your webpack config does not run in a browser, it run by node.

[zealous ruin]

you mean the runtime node which I can access by typing node in terminal ?

[opaque ether]

Yeah.

[zealous ruin]

oh so aren't all js/ts files written on our local machines via dev server , so aren't they all running node env so shouldn't eslint already know about them ? and it shows warning only for webpack files though , not ts file 🤔

[opaque ether]

If you're using webpack you're probably building code that's going to run in a browser, not node.

Basically you use node/webpack to package your TS code into a bundle and that bundle runs in the browser.

[zealous ruin]

yup

got it

[opaque ether]

Anyway, you should be able to fix this with something like:

{
    files: ["webpack.config.js"],
    globals: {
        ...globals.node
    },
    rules: {
        "no-var-requires": "off"
    }
}

in your eslint config.

[zealous ruin]

you meain in eslint.config.mjs

[opaque ether]

Yes.

[zealous ruin]

alright will try it

[opaque ether]

With import globals from "globals" at the top.

[zealous ruin]

ok

oh it works , I don't see any of those error now . Thanks 😌

[zealous ruin]

um it stopped showing those warning but created wierd issue

// @ts-check

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import eslintConfigPrettier from "eslint-config-prettier";
import globals from "globals";

export default [
  {
    files: ["webpack.config.js"],
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
    rules: {
      "no-var-requires": "off",
    },
  },
  {
    ...eslint.configs.recommended,
    ...tseslint.configs.strict,
    ...tseslint.configs.stylistic,
    ...eslintConfigPrettier,
  },
];```

something's wrong with my eslint config as commenting everything out stops these warnings

// @ts-check

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import eslintConfigPrettier from "eslint-config-prettier";

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.strict,
  tseslint.configs.stylistic,
  eslintConfigPrettier,
);```

This was my eslint earlier which didn't gave these weird warning however didn't recognise *webpack globals and require * as well

[opaque ether]

I can't really tell what's going on in your recording - the full text of the error message may be helpful

But I'm guessing the issue is you shouldn't spread the configs together like that.

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.strict,
  tseslint.configs.stylistic,
  eslintConfigPrettier,
  {
    files: ["webpack.config.js"],
    languageOptions: {
      globals: {
        ...globals.node,
      },
    },
    rules: {
      "no-var-requires": "off",
    },
  }
);

An eslint config is basically an array of configs that are combined together. If you do ... on a bunch of configs you're doing a shallow merge on nested config objects and that's probably not going to end well.

[zealous ruin]

I am doing it from scratch as I was frustated to try make it work , this time instead of setting prettier , eslint and then webpack , I first did typescript,webpack, prettier and now eslint is left , can you refer me to some nice article which would setup esilnt properly in this type of case as I'm noticing different people have different type of eslint.config like one person who's also using webpack with TS has this

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ["**/*.{js,mjs,cjs,ts}"] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];```

so now I'm confused in setting up eslint 😭

I updated my repo as well https://github.com/devnchill/TSTemplate

[zealous ruin]

// @ts-check

import eslint from "@eslint/js";
import tseslint from "typescript-eslint";

export default tseslint.config(
  eslint.configs.recommended,
  tseslint.configs.recommended,
  tseslint.configs.strict,
  tseslint.configs.stylistic,

  {
    files: ["webpack.*.js"],
    languageOptions: {
      sourceType: "commonjs",
    },
    rules: {
      "no-undef": "off",
      "@typescript-eslint/no-var-requires": "off",
      "@typescript-eslint/no-require-imports": "off",
    },
  },
);```