Installing TypeScript w/Vue CLI returns *Cannot find module 'eslint-plugin-@typescript-eslint'*

Question

I'm trying to install TypeScript to our Marketing Site. Using:

vue add typescript

Once installed I get the error:

Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'

Things I've tried:

1. Installing eslint-plugin-@typescript-eslint
2. Updating NPM packages, including @vue/eslint-config-typescript
3. Using require instead of import in main.ts
4. Messing around with configs in vue.config.js but no luck
5. Updating the Vue CLI

Currently using @vue/cli 4.1.2 Any ideas?

vue.config.js file:

const preRender = require('prerender-spa-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const isProd = process.env.NODE_ENV === 'production';
const path = require('path');

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .loader('vue-svg-loader');
  },

  configureWebpack: () => {
    {
      isProd
        ? [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                drop_console: true
              }
            }
          })
        ]
        : [];
    }

    if (process.env.NODE_ENV !== 'production') return;

    return {
      plugins: [
        new preRender(path.resolve(__dirname, 'dist'), [
          '/',
        ])
      ],
      watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
      }
    };
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "@/app.scss";'
      }
    },
    sourceMap: true
  }
};

tsconfig.json file;

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

main.ts file:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import VueTouch from 'vue-touch';
import VueAnalytics from 'vue-analytics';

const isProd = process.env.NODE_ENV === 'production';

Vue.use(VueAnalytics, {
  id: process.env.VUE_APP_GA,
  router,
  debug: {
    enabled: false,
    sendHitTask: isProd
  }
});

Vue.use(VueTouch);
Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

Answer 1

Try this

Inside your src folder add below type definition file (creating a new ts definition file)

ambient.d.ts

and declare the module like below

declare module 'eslint-plugin-@typescript-eslint'