How do I setup vue.config.js with typescript?

Question

Hello I am working with typescript for the first time and when trying to configure vue.config.js

const webpack = require("webpack");
module.exports = {
    plugins: [
      new webpack.DefinePlugin({
        __VUE_I18N_FULL_INSTALL__: true,
        __VUE_I18N_LEGACY_API__: false,
        __VUE_I18N_PROD_DEVTOOLS__: false,
        __INTLIFY_PROD_DEVTOOLS__: false,
      }),
    ],
  },
};

I am getting an error

$ vue-cli-service lint
error: Require statement not part of import statement (@typescript-eslint/no-var-requires) at vue.config.js:1:17:
> 1 | const webpack = require("webpack");
    |                 ^

When creating a js project, everything worked. How can I fix it in ts project

The rule says you can't use require, so you use import instead. — Ohgodwhy
– Ohgodwhy, Commented Nov 14, 2021 at 18:49
@Ohgodwhy require and import aren't easily interchangeable in .js Node files. — Estus Flask
– Estus Flask, Commented Nov 14, 2021 at 19:51
It's linter rule. This isn't directly linked to TS or Vue config. The rule can be disabled if it's unwanted (require has its uses in TS app), or config files can be excluded from linter run. — Estus Flask
– Estus Flask, Commented Nov 14, 2021 at 19:53

Serio · Accepted Answer · 2021-11-15 03:21:46Z

1

Thanks Estus, it was an ESLint error, not sure why, but ESLint is throwing a typescript syntax error in the js file. The solution is

/* eslint @typescript-eslint/no-var-requires: "off" */
const webpack = require("webpack");

answered Nov 15, 2021 at 3:21

Serio

5371 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I setup vue.config.js with typescript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related