search

sveltejs / template

Template for building basic applications with Svelte
1.74k stars 810 forks source link

Unable to import a typescript file from main.ts or a Svelte component. #171

Closed olibos closed 3 years ago

olibos commented 4 years ago

Hello,

I'm trying the new Typescript support in Svete. If I'm working within :

<script lang="ts">...</script>

Everything seems OK but if I'm making an import to another ts file from main.ts or a Svelte component I've a rollup error telling me to add a plugin if I want to use something else than Javascript...

You can find my test scenario here: https://github.com/olibos/test-svelte-ts

And the command executed:

rollup -c

src/main.ts → public/build/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
C:\Projects\Wavenet\RD\svelte\src\Test.ts (3:6)
1: export class TestClass
2: {
3:     id: number;
         ^
4: }
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:5211:30)
    at Module.error (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:9714:16)
    at tryParse (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:9628:23)
    at Module.setSource (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:10025:30)
    at ModuleLoader.addModuleSource (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18158:20)
    at ModuleLoader.fetchModule (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18212:9)
    at async Promise.all (index 1)
    at ModuleLoader.fetchStaticDependencies (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18236:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18213:9)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! svelte-app@1.0.0 build: `rollup -c`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the svelte-app@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\ob\AppData\Roaming\npm-cache\_logs\2020-09-07T16_05_53_922Z-debug.log
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command npm run build" terminated with exit code: 1.
dummdidumm commented 4 years ago

I am unable to reproduce this with the given repo.

olibos commented 4 years ago

On your end it works?

rollup --version rollup v2.26.10

node --version v12.16.1

What's your versions?

dummdidumm commented 4 years ago

Yes. I suggest you remove node_modules and do another npm install to see if the error is gone then.

olibos commented 4 years ago

Same, even if I start from scratch with "npx degit sveltejs/template ."

dummdidumm commented 4 years ago

I don't have rollup globally installed. Node is 14.5.0

olibos commented 4 years ago

I'll try with that node version to see if there is a difference...

olibos commented 4 years ago

Hum, still the same error: node --version v14.5.0 npm --version 6.14.8

olibos commented 4 years ago 
svelte-check

Loading svelte-check in workspace: p:\Wavenet\RD\svelte
Getting Svelte diagnostics...
====================================

====================================
svelte-check found no errors and no warnings

But still:

rollup -c

src/main.ts → public/build/bundle.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
C:\Projects\Wavenet\RD\svelte\src\Test.ts (3:6)
1: export class TestClass
2: {
3:     id: number;
         ^
4: }
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:5211:30)
    at Module.error (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:9714:16)
    at tryParse (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:9628:23)
    at Module.setSource (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:10025:30)
    at ModuleLoader.addModuleSource (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18158:20)
    at ModuleLoader.fetchModule (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18212:9)
    at async Promise.all (index 1)
    at ModuleLoader.fetchStaticDependencies (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18236:34)
    at async Promise.all (index 0)
    at ModuleLoader.fetchModule (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18213:9)
halfnelson commented 4 years ago

What rollup typescript plugin are you using?

On Tue, 8 Sep 2020, 3:08 am Olivier Bossaer, notifications@github.com wrote:

svelte-check Loading svelte-check in workspace: p:\Wavenet\RD\svelte Getting Svelte diagnostics...

==================================== svelte-check found no errors and no warnings

But still: rollup -c

src/main.ts → public/build/bundle.js... [!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) C:\Projects\Wavenet\RD\svelte\src\Test.ts (3:6) 1: export class TestClass 2: { 3: id: number; ^ 4: } Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) at error (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:5211:30) at Module.error (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:9714:16) at tryParse (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:9628:23) at Module.setSource (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:10025:30) at ModuleLoader.addModuleSource (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18158:20) at ModuleLoader.fetchModule (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18212:9) at async Promise.all (index 1) at ModuleLoader.fetchStaticDependencies (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18236:34) at async Promise.all (index 0) at ModuleLoader.fetchModule (P:\Wavenet\RD\svelte\node_modules\rollup\dist\shared\rollup.js:18213:9)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/sveltejs/template/issues/171#issuecomment-688441024, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEGS5CFMQ6RKEJ3K32IVILSEUHPTANCNFSM4Q6QQLRQ .

olibos commented 4 years ago

The one from the template: "@rollup/plugin-typescript": "^4.0.0" And if check package-lock.json, it resolves to 4.1.2 Here is a npm ls if it helps:

svelte-app@1.0.0 P:\Wavenet\RD\svelte
+-- @rollup/plugin-commonjs@14.0.0
| +-- @rollup/pluginutils@3.1.0
| | +-- @types/estree@0.0.39
| | +-- estree-walker@1.0.1 deduped
| | `-- picomatch@2.2.2
| +-- commondir@1.0.1
| +-- estree-walker@1.0.1
| +-- glob@7.1.6
| | +-- fs.realpath@1.0.0
| | +-- inflight@1.0.6
| | | +-- once@1.4.0 deduped
| | | `-- wrappy@1.0.2
| | +-- inherits@2.0.4
| | +-- minimatch@3.0.4
| | | `-- brace-expansion@1.1.11
| | |   +-- balanced-match@1.0.0
| | |   `-- concat-map@0.0.1
| | +-- once@1.4.0
| | | `-- wrappy@1.0.2 deduped
| | `-- path-is-absolute@1.0.1
| +-- is-reference@1.2.1
| | `-- @types/estree@0.0.39 deduped
| +-- magic-string@0.25.7
| | `-- sourcemap-codec@1.4.8 deduped
| `-- resolve@1.17.0
|   `-- path-parse@1.0.6
+-- @rollup/plugin-node-resolve@8.4.0
| +-- @rollup/pluginutils@3.1.0 deduped
| +-- @types/resolve@1.17.1
| | `-- @types/node@14.6.4
| +-- builtin-modules@3.1.0
| +-- deep-freeze@0.0.1
| +-- deepmerge@4.2.2
| +-- is-module@1.0.0
| `-- resolve@1.17.0 deduped
+-- @rollup/plugin-typescript@4.0.0
| +-- @rollup/pluginutils@3.1.0 deduped
| `-- resolve@1.17.0 deduped
+-- @tsconfig/svelte@1.0.10
+-- UNMET PEER DEPENDENCY rollup@2.26.10
| `-- UNMET OPTIONAL DEPENDENCY fsevents@2.1.3
+-- rollup-plugin-livereload@2.0.0
| `-- livereload@0.9.1
|   +-- chokidar@3.4.2 deduped
|   +-- livereload-js@3.3.1
|   +-- opts@2.0.2
|   `-- ws@6.2.1
|     `-- async-limiter@1.0.1
+-- rollup-plugin-svelte@6.0.0
| +-- require-relative@0.8.7
| +-- rollup-pluginutils@2.8.2
| | `-- estree-walker@0.6.1
| `-- sourcemap-codec@1.4.8
+-- rollup-plugin-terser@7.0.2
| +-- @babel/code-frame@7.10.4
| | `-- @babel/highlight@7.10.4
| |   +-- @babel/helper-validator-identifier@7.10.4
| |   +-- chalk@2.4.2
| |   | +-- ansi-styles@3.2.1
| |   | | `-- color-convert@1.9.3
| |   | |   `-- color-name@1.1.3
| |   | +-- escape-string-regexp@1.0.5
| |   | `-- supports-color@5.5.0
| |   |   `-- has-flag@3.0.0
| |   `-- js-tokens@4.0.0
| +-- jest-worker@26.3.0
| | +-- @types/node@14.6.4 deduped
| | +-- merge-stream@2.0.0
| | `-- supports-color@7.2.0
| |   `-- has-flag@4.0.0
| +-- serialize-javascript@4.0.0
| | `-- randombytes@2.1.0
| |   `-- safe-buffer@5.2.1
| `-- terser@5.3.0
|   +-- commander@2.20.3
|   +-- source-map@0.6.1
|   `-- source-map-support@0.5.19
|     +-- buffer-from@1.1.1
|     `-- source-map@0.6.1 deduped
+-- sirv-cli@1.0.6
| +-- console-clear@1.1.1
| +-- get-port@3.2.0
| +-- kleur@3.0.3
| +-- local-access@1.0.1
| +-- sade@1.7.3
| | `-- mri@1.1.6
| +-- semiver@1.1.0
| +-- sirv@1.0.6
| | +-- @polka/url@1.0.0-next.11
| | +-- mime@2.4.6
| | `-- totalist@1.1.0
| `-- tinydate@1.3.0
+-- svelte@3.24.1
+-- svelte-check@1.0.37
| +-- chalk@4.1.0
| | +-- ansi-styles@4.2.1
| | | +-- @types/color-name@1.1.1
| | | `-- color-convert@2.0.1
| | |   `-- color-name@1.1.4
| | `-- supports-color@7.2.0
| |   `-- has-flag@4.0.0
| +-- chokidar@3.4.2
| | +-- anymatch@3.1.1
| | | +-- normalize-path@3.0.0 deduped
| | | `-- picomatch@2.2.2 deduped
| | +-- braces@3.0.2
| | | `-- fill-range@7.0.1
| | |   `-- to-regex-range@5.0.1
| | |     `-- is-number@7.0.0
| | +-- UNMET OPTIONAL DEPENDENCY fsevents@2.1.3
| | +-- glob-parent@5.1.1
| | | `-- is-glob@4.0.1 deduped
| | +-- is-binary-path@2.1.0
| | | `-- binary-extensions@2.1.0
| | +-- is-glob@4.0.1
| | | `-- is-extglob@2.1.1
| | +-- normalize-path@3.0.0
| | `-- readdirp@3.4.0
| |   `-- picomatch@2.2.2 deduped
| +-- glob@7.1.6 deduped
| +-- minimist@1.2.5
| +-- svelte-language-server@0.10.116
| | +-- chokidar@3.4.2 deduped
| | +-- cosmiconfig@6.0.0
| | | +-- @types/parse-json@4.0.0
| | | +-- import-fresh@3.2.1
| | | | +-- parent-module@1.0.1
| | | | | `-- callsites@3.1.0
| | | | `-- resolve-from@4.0.0
| | | +-- parse-json@5.1.0
| | | | +-- @babel/code-frame@7.10.4 deduped
| | | | +-- error-ex@1.3.2
| | | | | `-- is-arrayish@0.2.1
| | | | +-- json-parse-even-better-errors@2.3.1
| | | | `-- lines-and-columns@1.1.6
| | | +-- path-type@4.0.0
| | | `-- yaml@1.10.0
| | +-- estree-walker@2.0.1
| | +-- lodash@4.17.20
| | +-- prettier@2.1.1
| | +-- prettier-plugin-svelte@1.2.1
| | +-- source-map@0.7.3
| | +-- svelte@3.24.1 deduped
| | +-- svelte-preprocess@4.2.1 deduped
| | +-- svelte2tsx@0.1.104
| | | +-- dedent-js@1.0.1
| | | `-- pascal-case@3.1.1
| | |   +-- no-case@3.0.3
| | |   | +-- lower-case@2.0.1
| | |   | | `-- tslib@1.13.0
| | |   | `-- tslib@1.13.0
| | |   `-- tslib@1.13.0
| | +-- UNMET PEER DEPENDENCY typescript@3.9.7 deduped
| | +-- vscode-css-languageservice@4.2.0
| | | +-- vscode-languageserver-textdocument@1.0.1
| | | +-- vscode-languageserver-types@3.15.1 deduped
| | | +-- vscode-nls@4.1.2
| | | `-- vscode-uri@2.1.2 deduped
| | +-- vscode-emmet-helper@1.2.17
| | | +-- @emmetio/extract-abbreviation@0.1.6
| | | +-- jsonc-parser@1.0.3
| | | `-- vscode-languageserver-types@3.15.1 deduped
| | +-- vscode-html-languageservice@3.0.4-next.15
| | | +-- vscode-languageserver-textdocument@1.0.1 deduped
| | | +-- vscode-languageserver-types@3.15.1 deduped
| | | +-- vscode-nls@4.1.2 deduped
| | | `-- vscode-uri@2.1.2 deduped
| | +-- vscode-languageserver@6.1.1 deduped
| | +-- vscode-languageserver-types@3.15.1 deduped
| | `-- vscode-uri@2.1.2 deduped
| +-- vscode-languageserver@6.1.1
| | `-- vscode-languageserver-protocol@3.15.3 deduped
| +-- vscode-languageserver-protocol@3.15.3
| | +-- vscode-jsonrpc@5.0.1
| | `-- vscode-languageserver-types@3.15.1 deduped
| +-- vscode-languageserver-types@3.15.1
| `-- vscode-uri@2.1.2
+-- svelte-preprocess@4.2.1
| +-- @types/pug@2.0.4
| +-- @types/sass@1.16.0
| | `-- @types/node@14.6.4 deduped
| +-- detect-indent@6.0.0
| `-- strip-indent@3.0.0
|   `-- min-indent@1.0.1
+-- tslib@2.0.1
`-- UNMET PEER DEPENDENCY typescript@3.9.7

npm ERR! peer dep missing: rollup@^1.20.0, required by @rollup/plugin-typescript@4.0.0
npm ERR! peer dep missing: typescript@^4.0.2, required by svelte2tsx@0.1.104
npm ERR! peer dep missing: typescript@^4.0.2, required by svelte2tsx@0.1.104
petrmacal commented 3 years ago

Same issue here.

I am on Windows 10, Node v14.13.0,

Steps to reproduce (just fresh project from the template): 1) npx degit sveltejs/template svelte-app 2) node scripts/setupTypeScript.js 3) npm i

After I import any typescript file into main.ts (with TS specific syntax included, e.g. interface or type declaration), I get: Error: Unexpected token (Note that you need plugins to import files that are not JavaScript) at error (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:5252:30) at Module.error (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:9820:16) at tryParse (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:9701:23) at Module.setSource (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:10127:19) at ModuleLoader.addModuleSource (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:18288:20) at ModuleLoader.fetchModule (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:18344:9) at async Promise.all (index 1) at ModuleLoader.fetchStaticDependencies (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:18369:34) at async Promise.all (index 0) at ModuleLoader.fetchModule (C:\Users\myjss\Projects\study\svelte-app\node_modules\rollup\dist\shared\rollup.js:18346:9)

petrmacal commented 3 years ago

Just tried the same scenario inside WSL2 (Debian installed) and it works as expected. The issue is therefore related with something Windows specific that breaks the rollup from resolving the typescript files correctly.

aradalvand commented 3 years ago

I'm having this problem, no solution yet?!

petrmacal commented 3 years ago

@AradAral I was able to hotfix the issue by forcing picomatch (dependency of @rollup/pluginutils createFilter factory function) to unixify all slashes in file paths. Just add posixSlashes: true into node_modules/@rollup/pluginutils/dist/cjs/index.js, node_modules\@rollup\pluginutils\dist\es\index.js respectively, so the result should be:

image

Himujjal commented 3 years ago

I have the issue on a Linux machine.

olibos commented 3 years ago

Hello,

My issue was linked to my Windows configuration. I had a SUBST mapping from my project folder to a drive. And it seems SUBST can drive crazy nodejs.