[michaelhfreeman]

What do i have to do to stop getting validation warnings from CodeMix about “not being able to find a declaration file for module”. This is clearly a typescript warning which should not apply here as this is a pure ES6/webpack/react project. I turned off typescript validation in my workspace settings but that doesnt seem to be helping…

Ideas??

[Brian Fernandes]

Michael,

You’re right – you shouldn’t be seeing this for a simple JavaScript project. There are, however, some advanced features that may be looking for the typings files – perhaps they’re being too aggressive in your particular case.

1) By any chance, do you have a jsconfig.json or a tsconfig.json file in your project? If yes, what are its contents?
2) If you add a // @ts-nocheck comment to the top of your JavaScript file, does the error go away?
Not suggesting you need to do this for every file, just trying to understand where it comes from.

Alternatively, see point #2 here: https://www.genuitec.com/forums/topic/troubleshooting-codemix-2/
What is the value of that setting – you could check for the both the Workspace and the project level (project level can be found under project properties). Does setting it to off get the error to go away?

[michaelhfreeman]

#1. No tsconfig.json or jsconfig.json exists in my project

#2. Tried adding the // @ts-nocheck to a JS file but it didnt fix the problem

javascript.implicitProjectConfig.checkJs is false

FWIW the JS files validate with no problems at all in straight up VSCode

[shilpeegenuitec]

Michael,

Thanks for providing the details.

I’ve forwarded the details to the Technical team and will get back to you shortly.

Regards,
Shilpee

[Brian Fernandes]

Michael,

1) Where do you see the validation warning exactly? Is it in the problems view and marked against the file in the edtior, or elsewhere? Just want to ensure we’re thinking about the same sort of problem.

2) If it is file specific, do you see the warning for every JS file or just some of them?

3) Again, if file specific, do you see the warning only when the file is open in the editor? Or do you see it for closed files as well?

4) If you go to the project properties > CodeMix > Validation & Build, is project level validation turned on?
a) What validation radio option is chosen?
b) Is there a .vscode/tasks.json file in your project? If so, what are the contents?
c) Can you turn the project level validation off and see if the errors go away?

5) Just for some better perspective, would it be possible for you to send a screenshot of your entire workbench with the error, and project structure visible?

Apologies for sending in so many questions, just trying to ensure we build up enough context to fix this. Thanks!

[michaelhfreeman]

#1. The one i am interested in fixing shows up as a light bulb in the gutter of the text editor. As an example this…

import LoadingOverlay from ‘react-loading-overlay’

results in a light bulb in the gutter of the editor. If i hover over it, the full text of the warning is…

Could not find a declaration file for module ‘react-loading-overlay’. ‘/home/mfreeman/projects/git/wbmi/Personal.Portal.PolicyPortlet/node_modules/react-loading-overlay/lib/LoadingOverlay.js’ implicitly has an ‘any’ type. Try npm install @types/react-loading-overlay if it exists or add a new declaration (.d.ts) file containing declare module 'react-loading-overlay';

#2 It is not file-specific. Occurs in a slew of JS files in my project

#3 N/A per #2

#4. Yes project level validation is on. Setting is “Click the Build icon to start watching”.
No i dont have a .vscode folder at all in this project

#5.Screenshot attached

Attachments:

You must be logged in to view attached files.

[Brian Fernandes]

Michael,

1) I’m assuming you haven’t actually “clicked the build icon to start watching”? If yes, does that make any difference? Conversely, what happens if you turn project validation off?

2) Could you change the import statements to include a full path? Not saying this is the right solution, but maybe this is what is causing the issue. So import LoadingOverlay from ‘../react/react-loading-overlay’ (for example).

3) Would it be possible for you to share your package.json with us?

4) Do you have the React pack installed? You can go to Help > CodeMix Extensions to check.

[michaelhfreeman]

Sorry but I’ve moved back to using straight up VSCode for now…..i will try to cycle back to this when i get a chance..

Thanks for taking the time to look into this

[Brian Fernandes]

Michael,

We wanted to get to the bottom of this, and I believe I have the solution, after managing to reproduce this locally, with the information you sent us.

1) Set the javascript.suggestionActions.enabled setting to false in the Workspace Settings preference page, and that should get rid of the “info bulb” – note that you might need to reopen your editor, or rebuild the project, but the markers should definitely go away.

2) Technically, this isn’t a “warning”, more like a suggestion, and we were able to see it in VS Code too (see the attachment). I will agree that it’s far less conspicuous though, and it doesn’t appear in the Problems view either – this is something we’ll look into.

Hope this allows you to return, appreciate you taking the time to answer our questions. Thanks!

Attachments:

You must be logged in to view attached files.

[michaelhfreeman]

I can give that a quick try, although at first glance it feels like fixing the sympton rather than the disease…

Turning this off will also suppress it for true JS-oriented suggestions (i.e. not Typescript) which for the moment I am guess I am fine with…

I guess it would be useful thought to know why i am getting these Typescript-ish suggestions in pure JS/ES6/Webpack/React project?

[Brian Fernandes]

I guess it would be useful thought to know why i am getting these Typescript-ish suggestions in pure JS/ES6/Webpack/React project?

Good question – this is basically here to improve your JavaScript dev experience. With typings files, the IDE can provide better suggestions and more appropriate validation – trying to bring some of the benefits that coding in TypeScript offers back to JavaScript. You can learn more at the links below:
https://github.com/Microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio#TSDeclFiles
https://code.visualstudio.com/docs/languages/javascript#_automatic-type-acquisition

I can give that a quick try, although at first glance it feels like fixing the sympton rather than the disease…

Turning this off will also suppress it for true JS-oriented suggestions (i.e. not Typescript) which for the moment I am guess I am fine with…

I can’t disagree, the suggestions are coming from the VS Code core, will have to look at the source to see how many other suggestions they do have.

Another way of looking at this is that VS Code was making the suggestions as well – however, they were so inconspicuous there that you didn’t even notice them, while CodeMix is probably at the other end of this spectrum. Most users don’t seem have a problem with this, but we’ll take another look at how we can improve this experience.

[Brian Fernandes]

I forgot to add this bit – given how we support JavaScript development, enhancing suggestions and validations with the .d.ts files, this is very much a valid JavaScript suggestion, even in a pure JS context.

[michaelhfreeman]

Brian

Could you expand some on that last post?

Are you saying CodeMix uniquely takes advantage of .d.ts files (if present) to provide more isnights and suggestions that it could otherwise just from parsing the pure JS?

[Brian Fernandes]

Michael,

Am happy to expand. This capability comes from the Code OSS engine. This engine is also used by VS Code, so while this is exclusive to CodeMix in the Eclipse space, we’re not unique here beyond Eclipse.

As far as how you get richer IntelliSense, I can’t do a better job explaining it than this doc, but I will try to summarize.

You can get richer IntelliSense using type inference, based on JSDoc, and finally, based on TypeScript declaration files. The methods used would depend on your source. For example, type information for a parameter could be specified in JSDoc, in which case that could directly be used. When using modules, this information is often found in the .d.ts files. For example, this file might know that the first parameter should be, say, a string, and the second should be a number. This will prevent strings being suggested when you’re using content assist to enter the second parameter. How does the engine know which of your local variables are strings / numbers? That it attempts to figure out using type inference.

Hope this helps!

[Author]

Posts