Ошибка при добавлении Typescript в существующий проект Vue. Js 2 - PullRequest
Новая
       34

Ошибка при добавлении Typescript в существующий проект Vue. Js 2

1 голос
/ 24 апреля 2020

У нас есть существующий проект vue. js 2, и мы пытаемся использовать машинопись в нашем проекте, выполнив команду vue add typcript. Я получаю Cannot find module 'eslint-plugin-@typescript-eslint. ошибку. Я также вижу, что vue cli добавил "@ vue / cli-plugin-typescript": "^ 4.3.1", хотя моя версия "@ vue / cli-service" - "^ 3.7.0". Может ли это быть причиной ошибки ниже? Что я мог упустить?

Stacktrace: 

ERROR  Failed to compile with 1 errors                                                                       7:55:10 AM
 error  in ./src/main.ts

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'

.eslintr c. js: 

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

babel.config. js: 

module.exports = {
  presets: [
    '@vue/app'
  ]
}

vue .config. js: 

module.exports = {
  publicPath: '/',
  transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ],
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    }
  }
}

tsconfig . json: 

{
  "compilerOptions": {
    // this aligns with Vue's browser support
    "target": "es5",
    // this enables stricter inference for data properties on `this`
    "strict": true,
    // if using webpack 2+ or rollup, to leverage tree shaking:
    "module": "es2015",
    "moduleResolution": "node",
"experimentalDecorators": true
  }
}

пакет. json: 

    {
  "name": "video-audio-transcription",
  "version": "4.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/pubsub": "^2.1.1",
    "@chenfengyuan/vue-countdown": "^1.1.2",
    "@react-native-community/netinfo": "^5.5.0",
    "ag-grid-community": "^21.0.1",
    "ag-grid-vue": "^21.0.1",
    "algoliasearch": "^3.33.0",
    "apexcharts": "^3.6.12",
    "auth0-js": "^9.10.4",
    "aws-amplify": "^3.0.8",
    "aws-amplify-vue": "^2.1.1",
    "axios": "^0.19.0",
    "chart.js": "^2.8.0",
    "core-js": "2.6.5",
    "echarts": "^4.2.1",
    "file-saver": "2.0.1",
    "firebase": "^6.0.4",
    "instantsearch.css": "^7.3.1",
    "jsonwebtoken": "^8.5.1",
    "material-icons": "^0.3.1",
    "perfect-scrollbar": "^1.4.0",
    "postcss-rtl": "^1.5.0",
    "prismjs": "^1.16.0",
    "vee-validate": "^2.2.8",
    "vue": "^2.6.11",
    "vue-acl": "4.0.7",
    "vue-apexcharts": "^1.3.5",
    "vue-awesome-swiper": "^3.1.3",
    "vue-backtotop": "^1.6.1",
    "vue-chartjs": "^3.4.2",
    "vue-clipboard2": "^0.3.0",
    "vue-context": "4.0.0",
    "vue-echarts": "^4.0.3",
    "vue-feather-icons": "^5.0.0",
    "vue-flatpickr-component": "^8.1.2",
    "vue-form-wizard": "^0.8.4",
    "vue-fullcalendar": "^1.0.9",
    "vue-i18n": "^8.11.2",
    "vue-instantsearch": "^2.2.1",
    "vue-perfect-scrollbar": "^0.1.0",
    "vue-prism-component": "^1.1.1",
    "vue-property-decorator": "^7.2.0",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.6",
    "vue-select": "^3.1.0",
    "vue-simple-calendar": "^4.2.2",
    "vue-simple-suggest": "^1.9.5",
    "vue-star-rating": "^1.6.1",
    "vue-tour": "^1.1.0",
    "vue-tree-halower": "^1.8.0",
    "vue-video-player": "^5.0.2",
    "vue2-google-maps": "^0.10.6",
    "vue2-hammer": "^2.1.2",
    "vuedraggable": "^2.21.0",
    "vuejs-datepicker": "^1.5.4",
    "vuesax": "3.11.1",
    "vuex": "^3.1.1",
    "xlsx": "^0.15.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.2.0",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-service": "^3.7.0",
    "axios-mock-adapter": "^1.17.0",
    "node-sass": "^4.12.0",
    "purgecss": "^1.3.0",
    "sass-loader": "^7.1.0",
    "script-loader": "0.7.2",
    "tailwindcss": "^1.0.1",
    "vue-template-compiler": "^2.6.10"
  }
}

опции, выбранные при добавлении машинописи с использованием vue cli: 

? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Convert all .js files to .ts? No
? Allow .js files to be compiled? No
...