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

Peek/Go To Definition & Click to Open do not work with Webpack alias #16320

Open
damonbauer opened this Issue Dec 1, 2016 · 34 comments

Comments

Projects
None yet
@damonbauer

damonbauer commented Dec 1, 2016

  • VSCode Version: 1.8.0-insider
  • OS Version: OSX El Capitan 10.11.6

Using normal, path based imports, Peek/Go To Definition and CMD+Click to open file from import work wonderfully. When using a Webpack alias, Peek/Go To no longer work. It kind of "fails silently" in that nothing appears (not even an error message).

Steps to Reproduce:

  1. Add an alias to a webpack config file
  2. Import a file using an ES6 import with the path to the file that includes the Webpack alias

Desired Behavior:

  1. Using a Webpack alias inside an ES6 import, Peek/Go To Definition display in the same manner as when using a full path inside an import.
  2. CMD+Click to Open File from import statement works with both full paths and webpack aliases

I've created a reduced repo that demonstrates the behavior: https://github.com/damonbauer/webpack-alias-demo/

I'm setting an alias in the webpack config to map the word app to the path of /src. Then in a file, I'm importing another with ES6 imports.

Edit: I'm also using the PathIntellisense extension with custom mappings so I can get path autocompletion when using an alias in an import. Perhaps there could be something helpful in that repo?

@wanecek

This comment has been minimized.

wanecek commented Jun 12, 2017

EDIT: I only seem to be able to get path autocompletion, not "peek" or "Go to definition" with the feature described below. I've recently switched computers (from a PC to a Mac), and could have sworn it worked on the PC. Will investigate and update once I know more.


It may be of interest to note that the latest release of WebStorm brings this feature. I mention this not to suggest making the switch, but rather to further underline that this could be a very useful feature :)

I'd like to clarify what @damonbauer states above: the feature can be achieved manually with the Path Intellisense extension, by defining path-intellisense.mappings in your vscode settings. The example they provide in the documentation is as follows:

{
    "path-intellisense.mappings": {
        "/": "${workspaceRoot}",
        "lib": "${workspaceRoot}/lib",
        "global": "/Users/dummy/globalLibs"
    },
}
@foisonocean

This comment has been minimized.

foisonocean commented Jun 13, 2017

+1 Very useful to me.

@developering

This comment has been minimized.

developering commented Jul 12, 2017

@wanecek Were you able to get Peek Definition and CMD+Click working with the path-intellisense.mappings? Adding those mappings did allow for suggestions as I'm typing an import statement and using a webpack alias, but didn't seem to change the functionality at all with Peek Definition or CMD+Click. If you were able to get that working somehow, I'd love to see more details on your setup.

@abhilash27n

This comment has been minimized.

abhilash27n commented Jul 14, 2017

+1 would be super awesome to have this. We just moved all the import paths in our project to use webpack aliases and I miss the command clicking. I can only get the autocomplete to work with path-intellisense.mappings.

@AndrewRayCode

This comment has been minimized.

AndrewRayCode commented Aug 7, 2017

You can accomplish this using the "paths" option. Full writeup here. TL;DR add

{
  "compilerOptions": {
    // This must be specified if "paths" is set
    "baseUrl": ".",
    // Relative to "baseUrl"
    "paths": {
      "*": [
        "*",
        "mypath/*"
      ]
    }
  }
}

to your jsconfig.json or tsconfig.json in your project's root.

@chocopowwwa

This comment has been minimized.

chocopowwwa commented Sep 12, 2017

@wesleymostien

This comment has been minimized.

wesleymostien commented Oct 13, 2017

can't get this to work :

"path-intellisense.mappings": {
"/": "${workspaceRoot}",
"components": "${workspaceRoot}/src/components"
},

OR / AND

{
"compilerOptions": {
"target": "es2015",
"lib": ["dom", "es2015", "es2017"],
"module": "commonjs",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
"baseUrl": ".",
"paths": {
"components/": ["", "src/components/"]
}
},
"exclude": ["./node_modules/**/
"]
}

@wanecek

This comment has been minimized.

wanecek commented Oct 13, 2017

Hey @wesleymostien, I ended up solving it by putting a jsconfig.json in the root of my project, with the following content:

{
  // This file is required for VSCode to understand webpack aliases
  "compilerOptions": {
    // This must be specified if "paths" is set
    "baseUrl": ".",
    // Relative to "baseUrl"
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

which works fine for me. I think you might be missing the asterix (*) in your example :)

@wesleymostien

This comment has been minimized.

wesleymostien commented Oct 13, 2017

@wanecek doesn't seem to matter

now I have this :

"baseUrl": "./src",
"paths": {
  "components": ["./components/*"]
}

so, I can import absolute mapping with 'components/....' . That part works!

But the problem is, Intellisense doesn't show me *.vue files, can this be fixed?

@wanecek

This comment has been minimized.

wanecek commented Oct 13, 2017

so, I can import absolute mapping with 'components/....' . That part works!

Not sure I understand this... Did you get the Intellisense features (e.g. the type-hint tooltips on hover) working or not?

If not, you might want to give this a try as well.

"paths": {
  "components/*": ["./components/*"]
}

For the path-intellisense, I have the path-intellisense extension, and have extended it with this in the workspace settings:

"path-intellisense.mappings": {
  "@": "${workspaceRoot}/src"
},
@wesleymostien

This comment has been minimized.

wesleymostien commented Oct 13, 2017

@wanecek

This comment has been minimized.

wanecek commented Oct 13, 2017

Yeah, I've got this working, not sure what's making it work though.
Try installing the veturextension if you haven't already.

However, I think this issue is getting out of topic. Send me an email instead (see my GH profile) and I'll try to help you :)

@plxel

This comment has been minimized.

plxel commented Oct 31, 2017

tried all solutions provided here, no one is correctly working :( ctrl+click still no reaction

@xahon

This comment has been minimized.

xahon commented Nov 5, 2017

I've found solution
I had import SomeComponent from '@/someComponent
Changing it into import SomeComponent from '@/someComponent/index made peek/goto definition working

I have jsconfig.json in my project root with these settings

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": ["./src/*"],
      "@/*": ["./src/components/*"]
    }
}
@xahon

This comment has been minimized.

xahon commented Nov 5, 2017

in general it doesn't matter if there's index in that path. It's important to place another path level after @/something/...(here)...

If you have that file hierarchy Folder -> ComponentFolder -> index.js you can write import component from '@/Folder/ComponentFolder' and it will work if you paths is "@/*": ["./src/"] in this case

@leandrw

This comment has been minimized.

leandrw commented Jan 5, 2018

Do not forget to make sure that in your visual studio code settings "javascript.validate.enable" is true.
In my case I disabled it it, thats why I didn't got intellisense.
Now everything is ok.

Sorry my improvised English

@nickngqs

This comment has been minimized.

nickngqs commented Jan 15, 2018

Somehow I still can't get this to work.

I've got a jsconfig.json

My webpak resolve config

let config = {
	...,
	resolve: {
		modules: [
			path.resolve(__dirname, './src/js'),
			'node_modules'
		]
	},
	...
}

My jsconfig.json

{
	"compilerOptions": {
		"baseUrl": "./",
		"paths": {
			"modules/*": ["./src/modules/*"]
		}
	}
}
@guilima

This comment has been minimized.

guilima commented Jan 18, 2018

@nickngqs , don't know how it works but try this on jsconfig:
"modules/*": ["*", "./src/modules/*"]

I was having trouble and somehow the extra wildcard helped me. Maybe someone could add something about it.

@leandrw

This comment has been minimized.

leandrw commented Jan 18, 2018

My .jsconfig looks like:

{
    "module": "es6",
    "compilerOptions": {
        "module": "es6",
        "target": "es5",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./source/",
        "paths": {
            "*": ["./assets/js/*"],
            "vendor/*": ["./vendors/js/*"]
        }
    },
    "exclude": [
        "node_modules"
    ],
    "compileOnSave": false
}

And works like a charm

@AO17

This comment has been minimized.

AO17 commented Feb 6, 2018

I'm having the same problem, but I do not get any suggestions at all, as soon as I'm in the alias directory...

For Example if I am using:
import Button from 'third/Button'
the "Button" part I would have to type in manually, there is no suggestion.

I have followed this guide, but no success.

My jsconfig.json:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "first": ["./src/first"],
      "second": ["./src/second"],
      "third": ["./src/style/css/home"],
    }
  },
  "exclude": [
    ".gitlab",
    ".storybook",
    ".vscode",
    "node_modules",
    "public"
  ]
}

Any ideas?

@bosung90

This comment has been minimized.

bosung90 commented Mar 14, 2018

If your project structure looks like

src
| Component
| | comp2.js
| hello.js

and you import your file like this

import hello from 'hello'
import comp2 from 'Component/comp2'

then your jsconfig.json should look like

{ "compilerOptions": { "baseUrl": ".", "paths": { "*": ["./src/*"] } } }

@aphillipo

This comment has been minimized.

aphillipo commented Apr 12, 2018

Hello all,

 “moduleResolution”: “node”,

Seems to be necessary if you have your exports from your alias in an index.js file. Ta!

@AO17

This comment has been minimized.

AO17 commented Apr 13, 2018

Both did not work for me. Here is a more detailed setup, can anyone point me to the right direction?

@tomaskikutis

This comment has been minimized.

tomaskikutis commented Apr 16, 2018

See #30290(Go to definition for .jsx does not work). I was trying all the snippets from this thread with no luck until I found that it worked on .js files, but not .jsx, where I did all the testing.

@ronjouch

This comment has been minimized.

ronjouch commented Aug 14, 2018

I built a minimal broken test project (zip, 3kB) for my use case. Can anyone give a look at it? Ping @mjbvz

Extract the zip and see README.md: like other people, path autocompletion works, but not "peek" or "Go to definition".

  • npm install && npm run build && node dist/index.js
    → Install & build both succeed, indicating Webpack is happy. Run logs [1, 2, 3].
  • Now, run code /path/to/project and open src/index.js
    On line 5, try to F12 on getLinks
    No definition found for 'getLinks' 😢

Am I still doing something wrong in my jsconfig.json, or is this a bug? (the multiple levels of exports, maybe?)

@mjbvz

This comment has been minimized.

Contributor

mjbvz commented Aug 20, 2018

@ronjouch Try asking on stack overflow

@ronjouch

This comment has been minimized.

ronjouch commented Aug 20, 2018

@mjbvz with help on SO / Why does VSCode's “Go to definition” fail on my project using Webpack alias, I confirm it's a vscode bug of the Webpack aliases jsconfig feature:

  • Webpack is happy with my minimal broken test project (zip, 3kB) and builds it successfully.
  • VS Code isn't, fails on Go to Definition, and can be "fixed" by messing with jsconfig and the exports:
    • jsconfig.json: change paths to "api/*": ["./src/api/*"]
    • src/api/resources/index.js: change import/export to import * as Links from './links'; export {Links};

With that, Go to Definition works.

→ To me, looks like a bug of vscode's Webpack aliases jsconfig feature.

@covertbert

This comment has been minimized.

covertbert commented Sep 19, 2018

See #30290(Go to definition for .jsx does not work). I was trying all the snippets from this thread with no luck until I found that it worked on .js files, but not .jsx, where I did all the testing.

Did you ever get this working for jsx files @tomaskikutis ?

@tomaskikutis

This comment has been minimized.

tomaskikutis commented Sep 19, 2018

Yep, I got it working using this jsconfig.json:

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "jsx": "preserve",
        "paths": {
            "apps/*": [
                "./scripts/apps/*",
            ],
            "core/*": [
                "./scripts/core/*",
            ],
        },
        "baseUrl": ".",
    },
    "exclude": [
        "node_modules",
        "bower_components",
        "po",
    ]
}

Here's an example of a working import

import {Modal} from 'core/ui/components/Modal/Modal';

If you're interested, you can try it out here: https://github.com/superdesk/superdesk-client-core/tree/9072076

See /scripts/apps/authoring/authoring/previewModal.jsx or any other *.jsx file

@covertbert

This comment has been minimized.

covertbert commented Sep 19, 2018

Cheers mate! Turns out that it's the "jsx": "preserve" line that fixed it for me although I set mine to "jsx": "react". I think you essentially just need to set jsx to whichever option is relevant in the compilerOptions

@croraf

This comment has been minimized.

croraf commented Oct 16, 2018

This should be natively supported by VSCode (the thing to resolve paths according to webpack aliases)? Typescript should be removed as a tag also, as it is webpack not typescript related.

@aminnaggar

This comment has been minimized.

aminnaggar commented Nov 6, 2018

@bosung90

If your project structure looks like

src
| Component
| | comp2.js
| hello.js

and you import your file like this

import hello from 'hello'
import comp2 from 'Component/comp2'

then your jsconfig.json should look like

{ "compilerOptions": { "baseUrl": ".", "paths": { "*": ["./src/*"] } } }

This doesn't seem to work for me.

I've created a barebones babel project to demonstrate my issue here https://github.com/aminnaggar/vscode-module-resolution am I missing something?

@bosung90

This comment has been minimized.

bosung90 commented Nov 6, 2018

@aminnaggar Its been a long time, and I just stopped using it because it isn't consistent.

@ronjouch

This comment has been minimized.

ronjouch commented Nov 6, 2018

"I've created a barebones babel project to demonstrate my issue here https://github.com/aminnaggar/vscode-module-resolution am I missing something?"

@aminnaggar in comment #16320 (comment) (above, and repeated below), I also confirm the bug with a minimal test case passing Babel but failing to F12. Ping @mjbvz @damonbauer ; I hope this bug with clear reproduction scenarios can be prioritized in some future iteration 🙂.

With help on SO / Why does VSCode's “Go to definition” fail on my project using Webpack alias, I confirm it's a vscode bug of the Webpack aliases jsconfig feature:

  • Webpack is happy with my minimal broken test project (zip, 3kB) and builds it successfully.
  • VS Code isn't, fails on Go to Definition, and can be "fixed" by messing with jsconfig and the exports:
    • jsconfig.json: change paths to "api/*": ["./src/api/*"]
    • src/api/resources/index.js: change import/export to import * as Links from './links'; export {Links};

With that, Go to Definition works.

→ To me, looks like a bug of vscode's Webpack aliases jsconfig feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment