watch mode error for non-TS files (Handlebars, Vue)

[mohd-akram]

I import Handlebars template files which should be ignored by the diagnostics.

Error: Could not find file: '/Users/mohamed/project/src/Views/Shared/spaces.hbs'.
    at getValidSourceFile (/Users/mohamed/project/node_modules/typescript/lib/typescript.js:91281:23)
    at Object.getSyntacticDiagnostics (/Users/mohamed/project/node_modules/typescript/lib/typescript.js:91504:52)
    at /Users/mohamed/project/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:629:74
    at /Users/mohamed/project/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:325:80
    at arrayEach (/Users/mohamed/project/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:537:11)
    at Function.forEach (/Users/mohamed/project/node_modules/rollup-plugin-typescript2/node_modules/lodash/lodash.js:9359:14)
    at TsCache.walkTree (/Users/mohamed/project/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:325:9)
    at Object.ongenerate (/Users/mohamed/project/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:628:17)
    at bundle.plugins.forEach.plugin (/Users/mohamed/project/node_modules/rollup/dist/rollup.js:10507:16)
    at Array.forEach (<anonymous>)

[ezolenko]

Do you import them? Does it happen in non-watch build? Could you post your rollup config and tsconfig.json?

[mohd-akram]

I do import them like so:

import template from '../Views/Shared/ads.hbs';

with declaration elsewhere:

declare module '*.hbs' {
  export default function (context: any): string;
}

It doesn't happen in a non-watch build.

rollup.config.js:

import commonjs from 'rollup-plugin-commonjs';
import handlebars from 'rollup-plugin-handlebars-plus';
import json from 'rollup-plugin-json';
import resolve from 'rollup-plugin-node-resolve';
import rootImport from 'rollup-plugin-root-import';
import typescript from 'rollup-plugin-typescript2';
import uglify from 'rollup-plugin-uglify';

const partialRoot = `${__dirname}/src/Views/Shared`;

export default {
  output: {
    format: 'iife'
  },
  plugins: [
    typescript({ clean: true }),
    json(),
    resolve(),
    commonjs(),
    rootImport({ root: partialRoot }),
    handlebars({
      helpers: '../../ts/handlebars',
      partialRoot: partialRoot,
      isPartial: () => true
    }),
    uglify()
  ]
}

tsconfig.json

{
  "compilerOptions": {
    "downlevelIteration": true,
    "lib": [
      "dom",
      "dom.iterable",
      "es2017"
    ],
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "strict": true,
    "target": "es5"
  }
}

[ezolenko]

I'm tempted to blame this on handlebars plugin, but just looking at the code I can't tell why it would be failing this way. Is it possible to reduce the problem to a small self-contained repo?

[mohd-akram]

From the stack trace it seems that the TypeScript library is not recognizing it as a valid source file (which it isn't). Perhaps you could skip non-TypeScript files when walking the tree? I'll try to come up with a smaller example.

[ezolenko]

Yeah, I already skip non-typescript files by default, but this is typescript trying to parse typescript file and not finding one of the imports. Every watch round the plugin grabs diagnostics for all typescript files, not just the ones modified in that round. This likely have something to do with the error. Does spaces.hbs exist in that path normally, or is that a build artifact?

[mohd-akram]

Adding a .ts extension fixes it:

helpers: '../../ts/handlebars.ts',

Not sure why this only happens in watch mode. I've created a small repo. Use npm run build or npm run watch.

[ezolenko]

Can't reproduce on your repo. Did npm install then npm run watch (successful build), modified main.ts and watch did another successful build. Introducing and fixing an error also works as expected. Running watch after build also works.

Running on windows, package.json didn't have typescript set, so it picked up version 2.5.2 installed with vscode.

Is there something specific I need to do to trigger it?

[mohd-akram]

The handlebars plugin wasn't working on Windows by default, seems there's a bug in it. I've modified the repo to bypass that and now you should be able to reproduce it.

[ezolenko]

Heh, you are right, it was trying to load and parse .hbs file.

Try now with master branch

[mohd-akram]

Hah, yeah it seems fine now :D

[hiendv]

Well, I'm experiencing the issue with Vue components. Here's the stack trace.

[!] (rpt2 plugin) Error: Could not find file: '/my/path/src/components/Dashboard.vue?rollup-plugin-vue=script.ts'.
Error: Could not find file: '/my/path/src/components/Dashboard.vue?rollup-plugin-vue=script.ts'.

at getValidSourceFile (/my/path/node_modules/typescript/lib/typescript.js:114851:23)
at Object.getSyntacticDiagnostics (/my/path/node_modules/typescript/lib/typescript.js:115044:52)
at cache.walkTree (/my/path/node_modules/rollup-plugin-typescript2/src/index.ts:282:43)
at lodash_2 (/my/path/node_modules/rollup-plugin-typescript2/src/tscache.ts:174:61)

node: v10.13.0
typescript: v3.1.6

[hiendv]

And yes, only in the watch mode.

[ezolenko]

@hiendv do you use latest versions of vue plugin and this plugin?

[hiendv]

Yes, I do.
Maybe it's irrelevant but I try allowNonTsExtensions and it stays quite for a while :/ Does not work after a while

[ezolenko]

@hiendv could you make a minimal repo with reproduction?

[hiendv]

I'm on it but it's kinda hard because of the random appearance of the error.

[hiendv]

@ezolenko @ezolenko2 Could you look at this? Thanks. https://github.com/hiendv/rpt2-vue-issue-32

Edit 1: Add a screen cast

[ezolenko]

Ok, finally got around to it, @hiendv could you check if master works for you?

[hiendv]

I've been testing the master branch for a while. So far so good. I think this is it. Thank you :D

[hiendv]

It's been two days. Everything is fine. I think you can release the patch now. Thank you.

[ezolenko]

In 0.18.1 now

[hiendv]

Thank you.