Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pick up tsconfig from non-top-level folder #815

Open
eyalsk opened this issue Jun 8, 2018 · 36 comments

Comments

@eyalsk
Copy link

commented Jun 8, 2018

Issuehunt badges

  • I have searched through existing issues
  • I have read through docs
  • I have read FAQ

Info

Version 1.24.0
Commit 6a6e02cef0f2122ee1469765b704faf5d0e0d859
Date 2018-06-06T17:35:40.560Z
Shell 1.7.12
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64
OS: Version: Windows 10.0.17134 Build 17134
Vetur version: 0.12.5

Problem

Error:
{
"resource": "/d:/Users/Eyal/Projects/Clients/DigitalTV/Web/experiment/dashboard/src/views/Home.vue",
"owner": "generated_diagnostic_collection_name#0",
"code": "undefined",
"severity": 8,
"message": "Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.",
"startLineNumber": 17,
"startColumn": 22,
"endLineNumber": 17,
"endColumn": 26
}

Image:
image

tsconfig.js file

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "node",
      "mocha",
      "chai"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "es2015",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Reproducible Case

  1. mkdir experiment && cd $_

  2. npm init

  3. npm install -D @vue/cli

  4. ./node_modules/.bin/vue create dashboard

  5. I've used the following options:

    • Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
    • Use class-style component syntax? Yes
    • Use Babel alongside TypeScript for auto-detected polyfills? Yes
    • Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
    • Pick a linter / formatter config: TSLint
    • Pick additional lint features: Lint on save
    • Pick a unit testing solution: Mocha
    • Pick a E2E testing solution: Cypress
    • Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
    • Save this as a preset for future projects? No
  6. code .

  7. Then navigate to dashboard/src/views/Home.vue


IssueHunt Summary

Backers (Total: $5.00)

Become a backer now!

Or submit a pull request to get the deposits!

Tips


IssueHunt has been backed by the following sponsors. Become a sponsor

@minawalphonce

This comment has been minimized.

Copy link

commented Jun 10, 2018

I have the same problem

@lxfater

This comment has been minimized.

Copy link

commented Jun 17, 2018

I also suffer the same problem。

@jessehallam

This comment has been minimized.

Copy link

commented Jun 26, 2018

I also have this problem. See this ticket for a repo which experiences this issue.

@ryanjaeb

This comment has been minimized.

Copy link

commented Jul 10, 2018

I'm running into this while experimenting with ASP.NET Core + Vue. A common project layout would put a Vue project inside a .NET Core project. Here's a stripped down repo layout:

C:.
│   .gitignore
│   RyanJaeb.Vetur815.sln
│
└───src
    └───RyanJaeb.Vetur815.Web
        │   RyanJaeb.Vetur815.Web.csproj
        │
        └───vue-client
            │   package.json
            │   tsconfig.json
            │
            ├───public
            │       index.html
            │
            └───src
                    App.vue

I know there are some limitations when it comes to handling multiple Vue projects in the same repo, but, for cases like the one above, there's only one Vue project and one tsconfig.json. Would it be possible for Vetur to figure out that my Vue project root is in a sub-directory in those cases?

My preferred layout would separate the Vue client and .NET Core projects completely, but most editors / IDEs struggle with it:

C:.
│   .gitignore
│
├───dotnet-core-api
│   │   RyanJaeb.Vetur815.sln
│   │
│   └───src
│       └───RyanJaeb.Vetur815.Web
│               Program.cs
│               RyanJaeb.Vetur815.Web.csproj
│               Startup.cs
│
└───vue-client
    │   package.json
    │   tsconfig.json
    │
    ├───public
    │       index.html
    │
    └───src
            App.vue

#424 might be a practical option for that type of layout, but when there's only one tsconfig.json it would be really awesome if I could open the directory with VSCode / Vetur and have everything work automatically.

@jessehallam

This comment has been minimized.

Copy link

commented Jul 19, 2018

@ryanjaeb It seems to me that Vetur should adopt the same logic as TS itself: Navigate up the tree, one level at a time, until a tsconfig.json file is discovered.

Instead it seems to be using the opposite logic of starting at the project root and looking for a tsconfig. If one isn't found, it kacks out.

@mythz

This comment has been minimized.

Copy link

commented Jul 26, 2018

I have a folder structure that looks like:

.vscode/
MyApp/
    node_modules/
    src/
        tsconfig.json      // contains "experimentalDecorators": true
MyApp.sln

Every time I open a .Vue SFC I get the same "Set the 'experimentalDecorators' option to remove this warning" error message reported here, I've tried adding in both by VSCode's User Settings and Workspace Settings:

"javascript.implicitProjectConfig.experimentalDecorators": true

The only way I've been able to get rid of these error messages is to place a dummy tsconfig.json at the root of my project folder:

/tsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        "allowJs": true
    }
}

Reiterating @jessehallam comment above, it would be nice if vetur could instead resolve the closest tsconfig.json it can find from the .vue SFC it's analyzing.

@icfr

This comment has been minimized.

Copy link

commented Jul 28, 2018

for me it's not exactly the same problem but if vue project is not in the root of vscode project there no inteliSence ... i have to open a new vscode and open vue project as root and all work great

@KytoSai

This comment has been minimized.

Copy link

commented Aug 16, 2018

I have same issue

@Daniel-Alderman77

This comment has been minimized.

Copy link

commented Aug 17, 2018

I also have the issue where I have /backend and /frontend at the root level. Creating a dummy tsconfig.json like @mythz said fixed the issue for me.

@kazazes

This comment has been minimized.

Copy link

commented Sep 8, 2018

This is a particularly tough issue to deal with in monorepo workspaces, polluting the root of a shared project with a dummy tsconfig.json isn't possible in most cases.

@kazazes

This comment has been minimized.

Copy link

commented Sep 8, 2018

The fix also doesn't seem triviable; Vetur only searches the workspace root for ts configurations.

Adding a VSCode option to specify Vetur project root(s) would work.

@RizziFrank

This comment has been minimized.

Copy link

commented Oct 14, 2018

I ran into this issue because I'd used the Vue CLI to create my project. It creates the project folder below the folder I'm in. Because of this I had the parent folder open in VSCode as the root, so the tsconfig.json file wasn't the root of what I had open with VSCode. Closing that folder and re-opening the child folder fixed this issue. The reason for the issue was the same as @mythz described.

Don't forget to move the .vscode, if you have one.

@alperencaliskan

This comment has been minimized.

Copy link

commented Oct 20, 2018

I had mentioned that issue here #349 with a small modification to overcome this problem. https://github.com/vuejs/vetur/pull/349/files
I am using this like for a year.

Latest binary is here
https://github.com/alperencaliskan/vetur/releases/tag/0.13.0-tsconfig-fix

@xiaocongWang

This comment has been minimized.

Copy link

commented Nov 12, 2018

I have the same problem.

@paleo

This comment has been minimized.

Copy link

commented Nov 12, 2018

I have the same problem.

A solution is given above: #815 (comment) .

@kendallroth

This comment has been minimized.

Copy link

commented Nov 14, 2018

Unfortunately the mentioned solution does not work for me. I am not using TypeScript in the project so I used a jsconfig.json file instead (but also tried tsconfig.json). No matter where I put the file, or what value I set the implicit value to, I cannot get the errors to go away. In normal JS files, however, there is no error (as expected).

I have been unable to test whether the file actually has a project configuration, as I appear to have no > JavaScript: Go to project configuration options in the command palette.

@lcc19941214

This comment has been minimized.

Copy link

commented Nov 22, 2018

for me it's not exactly the same problem but if vue project is not in the root of vscode project there no inteliSence ... i have to open a new vscode and open vue project as root and all work great

This really really helps!
As for me, modifying javascript.implicitProjectConfig.experimentalDecorators and tsconfig.json and restarting vscode had no effect. For I opened my vue + ts project under another one is vscode.

@FlorianWendelborn

This comment has been minimized.

Copy link

commented Dec 28, 2018

Are there any plans to fix this issue? It pretty much makes using typescript impossible with vetur.

@7sempra

This comment has been minimized.

Copy link

commented Dec 30, 2018

Modification of the workaround; avoids most duplication:

/tsconfig.json

{
  "extends": "./path/to/real/tsconfig.json"
}
@zhump

This comment has been minimized.

Copy link

commented Jan 22, 2019

Are there any plans to fix this issue? It pretty much makes using typescript impossible with vetur.

@RizziFrank

This comment has been minimized.

Copy link

commented Jan 22, 2019

Are there any plans to fix this issue? It pretty much makes using typescript impossible with vetur.

Agreed. But in the mean time, make sure not to miss @7sempra 's workaround. That's been working for me in the interim.

@FlorianWendelborn

This comment has been minimized.

Copy link

commented Jan 22, 2019

@RizziFrank The workaround falls apart in monorepos, unfortunately.

@Smilebags

This comment has been minimized.

Copy link

commented Feb 9, 2019

Putting a file in some place vetur is expecting it seems like a workaround rather than a solution. Is there any better way to resolve this yet?

@octref octref changed the title Vetur doesn't pick tsconfig.json? Pick up tsconfig from non-top-level folder Feb 13, 2019

@greyseer256

This comment has been minimized.

Copy link

commented Mar 19, 2019

I am also experiencing this problem in .vue files in a monorepo using Vetur 0.16.2. My current workaround is to open each package as a root in a VSCode workspace.

@bofcarbon1

This comment has been minimized.

Copy link

commented Apr 29, 2019

If I move the tsconfig.json file anywhere else but in the root my TS script won't build.
The only issue is the experimental decorators.

@MichaelMitchellM

This comment has been minimized.

Copy link

commented Apr 30, 2019

What is the status on fixing this?

@nateonguitar

This comment has been minimized.

Copy link

commented May 4, 2019

I just created a new Angular project and had this error. Fixed it with the help of 7sempra's comment on Dec 30, 2018.

The project is initialized with a tsconfig.app.json instead of a tsconfig.json

So I created a tsconfig.json and its contents are:

{
  "extends": "./tsconfig.app.json"
}

and no more errors for me.

Edit:
I'm mentioning this here for creating an Angular project because this was the top search result from google when entering the error message.

@octref

This comment has been minimized.

Copy link
Member

commented May 9, 2019

I enabled experimentalDecorator by default in #1289. I don't think picking tsconfig.json from non-top folder is easily doable.

@MichaelMitchellM

This comment has been minimized.

Copy link

commented May 13, 2019

@octref Why not apply it to directories that have vue.config.js or some other vue file?

@sqal

This comment has been minimized.

Copy link

commented May 13, 2019

@octref

I don't think picking tsconfig.json from non-top folder is easily doable

Hm.. and what you think about providing user an option where he can explicitly set project directory? Eslint plugin for vscode does similar thing with their eslint.workingDirectories option

@eyalsk

This comment has been minimized.

Copy link
Author

commented May 14, 2019

@MichaelMitchellM don't know if that would help but @sqal suggestion is really good imo.

@jiuneypachevitch

This comment has been minimized.

Copy link

commented May 23, 2019

In VSCode's User Settings

"javascript.implicitProjectConfig.experimentalDecorators": true

and

/tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true,
"allowJs": true
}
}

Works fine for me! Thank you @mythz!!

@octref

This comment has been minimized.

Copy link
Member

commented Jun 18, 2019

@sqal That's a choice, but it might lead to other failures such as Vetur cannot resolve local modules (prettier, typescript, etc).

The problem is Vetur cannot handle multiple tsconfig.json yet (need more TS glue code). Ideally if you have /a/tsconfig.json and /b/tsconfig.json, they would apply to js/ts/vue files in /a and /b respectively.

But as of now, Vetur can only resolve one set of ts configurations.

@kbirger

This comment has been minimized.

Copy link

commented Aug 15, 2019

I enabled experimentalDecorator by default in #1289. I don't think picking tsconfig.json from non-top folder is easily doable.

If TypeScript and a bunch of other software does it, why can't Vetur? It seems like this package is the odd man out here, if everyone else is using a common algorithm for detecting the tsconfig.

@octref

This comment has been minimized.

Copy link
Member

commented Aug 17, 2019

This is the most upvoted open issue and quite some work to implement correctly, while keeping perf issues under control and not breaking existing functionalities.

With that said, I'll work on it. I mostly spend 5 hours of evening / weekend time on Open Source. If you want to see more progress, you can try funding this issue on IssueHunt.

@issuehunt-app

This comment has been minimized.

Copy link

commented Aug 18, 2019

@eyalsk has funded $5.00 to this issue.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.