Vetur: Crashed when importing non-existing .vue.ts file

Created on 9 Jul 2017 · 13Comments · Source: vuejs/vetur

[x] I searched through existing issues.
[x] I have looked through docs at https://vuejs.github.io/vetur/

Info

Platform: macOS Sierra 10.12.6
Vetur version: 0.9.0
VSCode version: 1.13.1

Problem

I don't know if this problem only happened to me, but when I installed and imported Vue-Awesome into my project, the Vetur extension seemed to crash due to ENOENT: no such file or directory.

The error message said:

vetur initialized
fs.js:902
  return binding.lstat(pathModule._makeLong(path));
                 ^

Error: ENOENT: no such file or directory, lstat '/Users/boik/Documents/lulumi-browser/node_modules/vue-awesome/components/Icon.vue.ts'
    at fs.lstatSync (fs.js:902:18)
    at Object.fs.lstatSync (ELECTRON_ASAR.js:244:16)
    at Object.realpathSync (fs.js:1542:21)
    at Object.fs.realpathSync (ELECTRON_ASAR.js:321:29)
    at Object.realpath (/Users/boik/.vscode/extensions/octref.vetur-0.9.0/client/node_modules/vue-language-server/node_modules/typescript/lib/typescript.js:3989:32)
    at realpath (/Users/boik/.vscode/extensions/octref.vetur-0.9.0/client/node_modules/vue-language-server/node_modules/typescript/lib/typescript.js:26373:42)
    at tryResolve (/Users/boik/.vscode/extensions/octref.vetur-0.9.0/client/node_modules/vue-language-server/node_modules/typescript/lib/typescript.js:26360:87)
    at nodeModuleNameResolverWorker (/Users/boik/.vscode/extensions/octref.vetur-0.9.0/client/node_modules/vue-language-server/node_modules/typescript/lib/typescript.js:26342:68)
    at nodeModuleNameResolver (/Users/boik/.vscode/extensions/octref.vetur-0.9.0/client/node_modules/vue-language-server/node_modules/typescript/lib/typescript.js:26321:16)
    at Object.resolveModuleName (/Users/boik/.vscode/extensions/octref.vetur-0.9.0/client/node_modules/vue-language-server/node_modules/typescript/lib/typescript.js:26110:30)

I know there is no Icon.vue.ts in that directory which causes Vetur crashed, but I'm curious why '.ts' is appended to that file. I thought I made some mistakes to config file at first, an I even removed the line appendTsSuffixTo: [/\.vue$/]. However, Vetur just keeps complaining the same error. :(

My webpack.config

...
module: {
    rules: [
      {
        test: /\.(ts)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: {
          loader: 'tslint-loader'
        }
      },
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          }
        }
      },
      {
        test: /\.js$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: {
          loader: 'eslint-loader',
          options: {
            formatter: require('eslint-friendly-formatter')
          }
        }
      },
      {
        test: /\.(less|css)$/,
        use: ExtractTextPlugin.extract({
          use: [{
            loader: "css-loader"
          }, {
            loader: "less-loader"
          }],
          fallback: "style-loader"
        })
      },
      {
        test: /\.html$/,
        use: 'vue-html-loader'
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        include: [ path.resolve(__dirname, '../src/guest/renderer') ],
        exclude: /node_modules/
      },
      {
        test: /\.pug$/,
        use: 'pug-html-loader'
      },
      {
        test: /\.node$/,
        use: 'node-loader'
      },
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            extractCSS: process.env.NODE_ENV === 'production',
            loaders: {
              pug: 'pug-html-loader',
              sass: 'vue-style-loader!css-loader!less-loader!sass-loader?indentedSyntax=1',
              scss: 'vue-style-loader!css-loader!less-loader!sass-loader',
              less: 'vue-style-loader!css-loader!less-loader'
            },
          },
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          query: {
            limit: 10000,
            name: 'imgs/[name].[ext]'
          }
        },
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          query: {
            limit: 10000,
            name: 'fonts/[name].[ext]'
          }
        },
      }
    ]
  },
...

Reproducible Case

Clone the repo@typescript and open VSCode with Vetur installed.

bug

Source

qazbnm456

Most helpful comment

This should be fixed in 0.9.1.

HerringtonDarkholme on 13 Jul 2017

🎉3 👍3 ❤2 😄2

All 13 comments

I get the same issue with the package vue-spinner. Trying to mess with configuration didn't help. It worked fine before yesterday.

OfekA on 9 Jul 2017

@OfekA Yup, I didn't encounter the problem before yesterday either. So Weird.

qazbnm456 on 9 Jul 2017

Sadly, there is no perfect fix for this.

The best fix I can see so far is stop reading component in the node_modules directory.

HerringtonDarkholme on 9 Jul 2017

@HerringtonDarkholme why is this happening? Why is it looking up a file that doesn't exist? (in particular adding .ts afterwards when trying to read them)

OfekA on 9 Jul 2017

@HerringtonDarkholme Think the cause is here? https://github.com/vuejs/vetur/pull/310/files/64ca430039b5c8274129de0504c90fe473bc4e19#diff-3da884033e59974c36d7c1a57a067d8d

octref on 9 Jul 2017

👍1

How can I in node modules stops reading components

pawoma on 10 Jul 2017

When bug can be repaired, has affected my normal work

pawoma on 11 Jul 2017

tim 20170711095025
i got the same issue with vetur 0.9.0, but 0.8.6 work well. I'm using typescript 2.4.1, and made my own d.ts file to declare the vue component in node_modules, but it still searches for a *.vue.ts file in component directory. Is it a bug in typescript?