Rollup-plugin-typescript2: ENOENT: no such file or directory, open '...?rollup-plugin-vue=script.d.ts'

Created on 7 Jul 2018  ·  11Comments  ·  Source: ezolenko/rollup-plugin-typescript2

What happens and why it is wrong

Get this error when using with rollup-plugin-vue when set declaration to true in tsconfig.json.

Error: ENOENT: no such file or directory, open '<path to project directory>\dist\components\Hello.vue?rollup-plugin-vue=script.d.ts'

Repo to Repro: https://github.com/gluons/rollup-plugin-typescript2-issue-97

Environment

OS: Windows 10
Node: v10.4.1
Yarn: 1.7.0

Versions

  • typescript: 2.8.4
  • rollup: 0.62.0
  • rollup-plugin-typescript2: 0.15.1

rollup.config.js

import { resolve } from 'path';

import ts from 'rollup-plugin-typescript2';
import vue from 'rollup-plugin-vue';

export default {
    input: resolve(__dirname, './src/index.ts'),
    output: [
        {
            file: resolve(__dirname, './dist/hello-plugin.umd.js'),
            format: 'umd',
            sourcemap: true,
            name: 'HelloPlugin',
            globals: {
                vue: 'Vue'
            }
        },
        {
            file: resolve(__dirname, './dist/hello-plugin.es.js'),
            format: 'es',
            sourcemap: true
        }
    ],
    plugins: [
        ts({
            verbosity: 3 // Debug
        }),
        vue()
    ],
    external: ['vue']
};

tsconfig.json

{
    "compilerOptions": {
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "lib": [
            "dom",
            "es2015"
        ],
        "esModuleInterop": true,
        "sourceMap": true,
        "declaration": true
    },
    "include": [
        "src"
    ]
}

package.json

{
  "name": "rolup-vue-ts-issue",
  "version": "0.0.0",
  "description": "A repo to repro Rollup + Vue + TypeScript with declaration bundling issue.",
  "private": true,
  "scripts": {
    "prebuild": "rimraf dist/*",
    "build": "rollup -c rollup.config.ts"
  },
  "author": "Saran Tanpituckpong <[email protected]>",
  "license": "UNLICENSED",
  "devDependencies": {
    "@types/node": "8",
    "postcss": "^6.0.23",
    "rimraf": "^2.6.2",
    "rollup": "^0.62.0",
    "rollup-plugin-typescript2": "^0.15.1",
    "rollup-plugin-vue": "^4.3.0",
    "typescript": "~2.8",
    "vue-template-compiler": "^2.5.16"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

plugin output with verbosity 3

rpt2: typescript version: 2.8.4
rpt2: tslib version: 1.9.2
rpt2: rollup-plugin-typescript2 version: 0.15.1
rpt2: plugin options:
{
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue/.rpt2_cache",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "typescript": "version 2.8.4",
    "useTsconfigDeclarationDir": false,
    "tsconfigOverride": {},
    "transformers": [],
    "tsconfigDefaults": {}
}
rpt2: rollup config:
{
    "external": [
        "vue",
        "",
        ""
    ],
    "inlineDynamicImports": false,
    "input": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue\\src\\index.ts",
    "chunkGroupingSize": 5000,
    "perf": false,
    "plugins": [
        {
            "name": "rpt2"
        },
        {
            "name": "VuePlugin"
        }
    ],
    "entry": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue\\src\\index.ts"
}
rpt2: built-in options overrides: {
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "inlineSourceMap": false,
    "outDir": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue/.rpt2_cache/placeholder",
    "moduleResolution": 2,
    "declarationDir": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue"
}
rpt2: parsed tsconfig: {
    "options": {
        "module": 5,
        "moduleResolution": 2,
        "target": 1,
        "lib": [
            "lib.dom.d.ts",
            "lib.es2015.d.ts"
        ],
        "esModuleInterop": true,
        "sourceMap": true,
        "declaration": true,
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "noEmit": false,
        "inlineSourceMap": false,
        "outDir": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue/.rpt2_cache/placeholder",
        "declarationDir": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue",
        "configFilePath": "C:\\Users\\Saran\\my-projects\\rolup-vue-ts-issue/tsconfig.json"
    },
    "fileNames": [
        "C:/Users/Saran/my-projects/rolup-vue-ts-issue/src/index.ts",
        "C:/Users/Saran/my-projects/rolup-vue-ts-issue/src/sfc.d.ts"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "module": "es2015",
            "moduleResolution": "node",
            "target": "es5",
            "lib": [
                "dom",
                "es2015"
            ],
            "esModuleInterop": true,
            "sourceMap": true,
            "declaration": true
        },
        "include": [
            "src"
        ]
    },
    "errors": [],
    "wildcardDirectories": {
        "C:/Users/Saran/my-projects/rolup-vue-ts-issue/src": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "src"
        ],
        "validatedIncludeSpecs": [
            "src"
        ],
        "wildcardDirectories": {
            "C:/Users/Saran/my-projects/rolup-vue-ts-issue/src": 1
        }
    }
}
rpt2: included:
'[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]'
rpt2: excluded:
'[
    "*.d.ts",
    "**/*.d.ts"
]'
rpt2: Ambient types:
rpt2:     C:/Users/Saran/my-projects/rolup-vue-ts-issue/src/sfc.d.ts
rpt2:     C:/Users/Saran/my-projects/rolup-vue-ts-issue/node_modules/@types/estree/index.d.ts
rpt2:     C:/Users/Saran/my-projects/rolup-vue-ts-issue/node_modules/@types/node/index.d.ts
rpt2: ambient types changed, redoing all semantic diagnostics
rpt2: transpiling 'C:\Users\Saran\my-projects\rolup-vue-ts-issue\src\index.ts'
rpt2:     cache: 'C:\Users\Saran\my-projects\rolup-vue-ts-issue/.rpt2_cache/022f423b186edc509d0bfc04874ea603a25c1eb2/code/cache/9d9555d93b34027372939bd4a0a4dc41c41e13ac'
rpt2:     cache miss
rpt2:     cache: 'C:\Users\Saran\my-projects\rolup-vue-ts-issue/.rpt2_cache/022f423b186edc509d0bfc04874ea603a25c1eb2/syntacticDiagnostics/cache/9d9555d93b34027372939bd4a0a4dc41c41e13ac'
rpt2:     cache miss
rpt2:     cache: 'C:\Users\Saran\my-projects\rolup-vue-ts-issue/.rpt2_cache/022f423b186edc509d0bfc04874ea603a25c1eb2/semanticDiagnostics/cache/9d9555d93b34027372939bd4a0a4dc41c41e13ac'
rpt2:     cache miss
rpt2: generated declarations for 'C:/Users/Saran/my-projects/rolup-vue-ts-issue/src/index.ts'
rpt2: transpiling 'C:\Users\Saran\my-projects\rolup-vue-ts-issue\src\components\Hello.vue?rollup-plugin-vue=script.ts'
rpt2:     cache: 'C:\Users\Saran\my-projects\rolup-vue-ts-issue/.rpt2_cache/022f423b186edc509d0bfc04874ea603a25c1eb2/code/cache/53ea992621b40f9ced3a2ea5f2f0b86e2cb028b1'
rpt2:     cache miss
rpt2:     cache: 'C:\Users\Saran\my-projects\rolup-vue-ts-issue/.rpt2_cache/022f423b186edc509d0bfc04874ea603a25c1eb2/syntacticDiagnostics/cache/53ea992621b40f9ced3a2ea5f2f0b86e2cb028b1'
rpt2:     cache miss
rpt2:     cache: 'C:\Users\Saran\my-projects\rolup-vue-ts-issue/.rpt2_cache/022f423b186edc509d0bfc04874ea603a25c1eb2/semanticDiagnostics/cache/53ea992621b40f9ced3a2ea5f2f0b86e2cb028b1'
rpt2:     cache miss
rpt2: generated declarations for 'C:/Users/Saran/my-projects/rolup-vue-ts-issue/src/components/Hello.vue?rollup-plugin-vue=script.ts'
rpt2: generating target 1
rpt2: rolling caches
rpt2: writing declarations for 'C:/Users/Saran/my-projects/rolup-vue-ts-issue/src/index.ts' to 'C:\Users\Saran\my-projects\rolup-vue-ts-issue\dist\index.d.ts'
rpt2: writing declarations for 'C:/Users/Saran/my-projects/rolup-vue-ts-issue/src/components/Hello.vue?rollup-plugin-vue=script.ts' to 'C:\Users\Saran\my-projects\rolup-vue-ts-issue\dist\components\Hello.vue?rollup-plugin-vue=script.d.ts'

picture gluons

Most helpful comment

Ok, try the master now. There is still a problem of //# sourceMappingURL= and .d.ts.map map itself referencing full block name, which will likely confuse some tools.

@znck can a single vue file contain multiple typescript blocks and will vue plugin turn them into separate virtual modules?

picture ezolenko on 17 Jul 2018
👍2 🎉1

All 11 comments

Should be fixed in master now -- I'm ignoring declarations for vue modules for now. Another option is to cut out everything after ? and write out *.vue.d.ts I guess.

ezolenko picture ezolenko on 9 Jul 2018
👍1

OK. Thank you. 🙇‍♀
ENOENT error is gone now.

I'm not sure whether declaration from Vue file is important or not.
Maybe @znck can give an opinion?
Or any Vue + TypeScript developer who see this issue?

gluons picture gluons on 10 Jul 2018

I get this too with declaration set to true. I'm not using the vue plugin though. I think this is because my file path contains a space, judging by your previous fix.

wenbei picture wenbei on 12 Jul 2018

@hollyleaves could you post details or open a separate case? Space should be a valid character.

ezolenko picture ezolenko on 12 Jul 2018

Declaration files are important.
@ezolenko @gluons Could you tell me what is preventing generation of declaration files?

znck picture znck on 14 Jul 2018
👍1

@znck

@ezolenko has fixed this issue temporarily in f0e466c89f288f5b7434a513370201ef9da56aff and declaration of Vue file will be ignored.
It isn't writed out in dist directory for now.

gluons picture gluons on 14 Jul 2018

@znck should declaration for Hello.vue be named Hello.vue.d.ts? Will all the tools pick it up properly at that?

I can't write them out as Hello.vue?rollup-plugin-vue=script.d.ts because ? is an invalid char for windows file paths.

ezolenko picture ezolenko on 16 Jul 2018

Part after ? is for referencing a block in vue file, you should remove it. I'm not sure if declaration file should be named Hello.d.ts or Hello.vue.d.ts. (@ktsn WDYT?)

znck picture znck on 17 Jul 2018
👍1

Maybe Hello.vue.d.ts?
I'm not sure how the final d.ts output looks like but as the most of TS users write the import statements for SFC with the extension (.vue), the declaration file may also need .vue.

ktsn picture ktsn on 17 Jul 2018
👍1

Ok, try the master now. There is still a problem of //# sourceMappingURL= and .d.ts.map map itself referencing full block name, which will likely confuse some tools.

@znck can a single vue file contain multiple typescript blocks and will vue plugin turn them into separate virtual modules?

ezolenko picture ezolenko on 17 Jul 2018
👍2 🎉1

There would be only one script (typescript) block per file.

znck picture znck on 18 Jul 2018
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

lijialiang picture lijialiang  ·  4Comments
alireza-salemian picture alireza-salemian  ·  4Comments
stakx picture stakx  ·  6Comments
alshdavid picture alshdavid  ·  16Comments
brandon-leapyear picture brandon-leapyear  ·  7Comments