I'm trying to to configure vs-code to recognize and suggest imports without
index ending
foo (folder)
- index (js file)
current behavior:
import './foo/index'
expected behavior:
import './foo'
I tried changing vs code settings but its still doesn`t work:
javascript.preferences.importModuleSpecifierEnding: 'shortest',
typesciprt.preferences.importModuleSpecifierEnding: 'shortest'
-. Note I also use react and path intellisense if it matters
Have anyone ever encountered this problem ? I would be grateful for any help I could get
I got this working by installing the various plugins below.
Most of the time things just import by themselves as soon as I type the class name. Alternatively, a lightbulb appears that you can click on. Or you can push F1, and type "import..." and there are various options there too. I kinda use all of them. Also F1 Implement for implementing an interface is helpful, but doesn't always work.
List of Plugins
npm Intellisense
ngrx for Angular 2 Snippets
TypeScript Toolbox
npm
TsTools
Angular Snippets (Version 9)
Types auto installer
Debugger for Chrome
TypeScript Importer
TypeScript Hero
vscode-icons
Add Angular Files
I am working on a NextJs project. In it, I have found this piece of code inside next.config.js:
const withTM = require('next-transpile-modules')([
'some package',
'some package',
'emittery',
'#next/react-dev-overlay'
]);
I was wondering what is the purpose of this #next/react-dev-overlay and was not able to find anything online. The only thing was this unanswered question in the nextjs github issues. When I remove it, it seems that the project is working as expected. My question is what is the purpose of this #next/react-dev-overlay package and should I remove it?
The #next/react-dev-overlay package is a development-only overlay for React apps. It's used internally by Next.js to display the error messages you see in development.
This is what the error overlay looks like when a client-side error occurs in a Next.js app:
As to why that package was included in next.config.js, I can only guess that it's being used directly in that app, and needs to be transpiled to be used. Most of the times you wouldn't need to install it or use it directly.
While developing a ReactJs project, VS Code used to suggest attributes for JSX elements. For instance,
<input type="text"></input>
In this scenario if I wanted to add an placeholder I had to just type in the first few letters and the auto-complete popped up suggesting the events.
However it has stopped working all of a sudden and results in this while I try Ctrl+Space in a JS file.
What I have tried so far:
Uninstalled VS Code and removed the user-specific settings from AppData and removed the .vscode folder from User and then reinstalled.
Added
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
in the settings.json based on this
change the file extension instead of .js || .ts add an x .jsx || .tsx
helps alot if you add a jsconfig.json and install #types/react https://code.visualstudio.com/docs/languages/jsconfig
I had the same problem and this is what solved the problem for me. Just import react from react:
import React from 'react';
Despite this line nowadays isn't required, this makes Vscode recognize somehow and suggest jsx again.
Make sure to check that the "select language mode" tab on the bottom right of the window shows "Javascript React" and make sure that you've installed and enabled the ES7 React/Redux/GraphQL/React-Native extention.
I tried to execute the minimal rollup example that ag-grid shows at their page. But no matter what, I won't get it to work. The Error I get is:
ag-Grid: could not find matching row model for rowModelType clientSide
Row Model "Client Side" not found. Please ensure the ClientSideRowModelModule is loaded using: import '#ag-grid-community/client-side-row-model';
I tried importing ClientSideRowModelModule and ClientSideRowModel, as stated in the error, but that changes nothing.
I tried and stepped through the bundled code and it seems that it is not possible for aggrid to access their own modules, although they are present.
I uploaded the example to github, just clone, npm i && npm run rullup and then open the index.html file.
https://github.com/dennis-f/ag-grid-clientsiderowmodel-bug
git clone git#github.com:dennis-f/ag-grid-clientsiderowmodel-bug.git
npm i && npm run rollup
Okay I managed, to get it to work.
Old:
import {Grid} from '#ag-grid-community/all-modules';
New:
import {AllCommunityModules, Grid, ModuleRegistry} from '#ag-grid-community/all-modules';
ModuleRegistry.registerModules(AllCommunityModules);
I don't know why this is missing in all those examples, but you need to register your modules manually, even if you use the 'all-modules' package.
It is not aware, that all modules should be loaded on startup. It's a nice solution, but unfortunately it's only explained here.
Instead of AllCommunityModules you can obviously load only the ones you actually need.
Error TS1149: File name 'C:/Project/frontend/scripts/State.ts' differs from already included file name '../frontend/scripts/State.ts' only in casing.
I've triple checked the casing in our references and the actual files have the correct casing as well. As far as I can tell, this is solely because the relative path uses incorrect casing, or perhaps it's just because of the relative path itself?
The thing is, it compiles just fine on Mac and Linux, but throws this error on Windows.
If it helps, forceConsistentCasingInFileNames is enabled in the tsconfig, and we're using tsify to compile.
For me, the issue occurred when a file was quickly renamed from someFile.ts to SomeFile.ts. Restarting my IDE (Visual Studio Code) made the warning go away.
In my case, the error was in the import statement. The import statement had a capital letter instead of small letter, which worked during develop in Windows, but not when compiling for production.
wrong:
import {SomeClass} from '/some/path/SomeClass.ts';
correct:
import {SomeClass} from '/some/path/someClass.ts';
UPDATE 2021
That's a weird error that occurred in my IDE, but it can be simply done with two simple steps:
rename your file (not component) to another name and once again back to your original name.
Example:
consider we have a myFile.js file in the components directory:
> src
> components
> myFile.js
First
Rename myFile.js into another name (anything) like temp.js:
myFile.js ----> temp.js
Second
back to its original name,
temp.js ----> myFile.js
It's also work fine with *.ts *.tsx *.js *.jsx extensions.
You need to disable the "forceConsistentCasingInFileNames" in the tsconfig.json file.
So you should have something like that:
{
"compilerOptions": {
...
"forceConsistentCasingInFileNames": false,
...
}
}
Restarting VS Code IDE didn't work for me and I didn't want to change config files. These are the steps that worked for me to resolve this problem:
From VS Explorer, rename the problem file to a new name
Change the component name to the new name inside the file
Save the file
Restart VS Code
Rename the file back to the name I originally wanted
Change the component name to match
It must be some kind of caching issue inside VS Code
For VS Code IDE users:
You can fix it by opening the Command Palette (Ctrl+Shift+P) --> Select Typescript: Restart TS server.
Mine was a vue problem, I removed the .vue extension and it worked
When two files exist in same folder with names like a.tsx and A.tsx you will get this error
Ok, just need to throw in my "solution" here as well, since it was different from the others. The error message clearly said where it saw an error. It was the casing of a directory that had been renamed (from Utils -> utils). Even though it was renamed correctly everywhere I still got the error. My solution was to rename it once more (why not, hehe) to utils2. After that it worked fine
For VS Code, only thing worked for me was to clear editor history:
Press Ctrl + Shift + P.
type command Clear Editor History.
Press Enter.
For me the problem only went away:
Close VS Code
Deleting the node_modules\.cache folder.
Re-open VS Code
It's not enough to restart your TS server!
As of 2023, I found a consistent way to reproduce the issue. This error will happen whenever you still have imports pointing to the wrong path! (after renaming)
// Wrong path, but same "Already included file name" error
import { Home } from './home';
// CORRECT path, but same "Already included file name" error
import { Home } from './Home'; // <- new path
Fix all imports path and restart your TS server (on VS Code, press F1 > Restart TS server)
TS team should definetly work on improving this error message :)
I've tried these two ways:
Import file with '#/frontend/scripts/State.ts' instead of '../frontend/scripts/State.ts'. It works only if you are using path alias.
Rename the directory of the project and open the project from the new directory.
Changing "React" to "react" worked for me.
Incorrect:
import React from "React";
Correct:
import React from "react";
Writing the import again worked for me.
Remove .vue extension and it worked
If nothing works try:
Remove node_modules
Restart Vetur
yarn or npm i again to get your node_modules
Restart developer window
Renaming files or restarting didn't help. The error started after renaming a file and letting Vetur do it's thing with imports.
In my case, I am using Nextjs. Removing the .next folder and starting the app again solved the problem.
Update: The error occurred again. This time deleting .next didn't help. Turned out it was due to a circular dependency in my code.
I had the same issues but it came from the imports inside test files (which were based on jest).
Solution was to clear the jest cache using the following command.
node ./node_modules/jest/bin/jest.js --clearCache
Even after changing cases and making git config ignore case false(git config core.ignorecase false) still I had to follow the following then only it worked as expected!
git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push origin master
Thanks to this comment: https://stackoverflow.com/a/55541435/3272407
For Visual Stuido Code user, Restart TS Server fixed my issue without rebooting the whole VS code.
The answer was that we were using tisfy 1.0.1, when forceConsistentCasingInFileNames wasn't supported until 4.0.0. Updating fixed the issue.