Inconsistent module loading using jsconfig and VSCode - visual-studio-code

I have been working on a project for months and I have the following jsconfig.json file to make loading paths easier. I don't believe there's anything wrong with this config because it has been working for the entire length of the project, but here it is for reference:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"],
"#/public/*": ["./public/*"],
"#/styles/*": ["./src/styles/*"],
"#/utils/*": ["./src/utils/*"],
"#/components/*": ["./src/components/*"]
}
}
}
And today, seemingly for no reason, I'm getting random modules that cannot be found. The example at the time of making this post, in the following screenshot, you can see that the #/utils/craft/client path worked absolutely fine, but the following module on line 4 throws an error.
As you can see in the following screenshot, the naming and file path matches exactly.
The fact it worked for ages and has thrown this error now out of the blue, suggests to me this a VSCode/jsconfig bug and not actually with the markup itself?
Any help would be appreciated.

Found the issue.
I accidentally labelled a file .tsx and when I ran npm run build, a tsconfig file was automatically added. This meant that the jsconfig file was no longer being used!

Related

Why does vscode-eslint use a different "root" than ESLint?

Everytime I open my project folder in Visual Studio Code, I get an error on the first line of each file. It cannot find my tsconfig.json file because it is looking in the directory I opened VS Code, not where my eslint.json is. I have a functions folder in my root project where the ESLint config is.
Here is part of it:
"parserOptions": {
"ecmaVersion": 2019,
"project": ["./tsconfig.json", "./tsconfig.dev.json"],
"sourceType": "module"
},
When I run my lint command eslint "src/*.{ts,js}", it works perfectly and shows the correct warnings. This means that the VS Code plugin dbaeumer.vscode-eslint parses the .eslintrc.json config differently than what it should.
If I change the project to ["./functions/tsconfig.json", "./functions/tsconfig.dev.json"], then VS Code stops giving the error, but when I run ESLint, it tries to find it in <path/to/project>/functions/functions/tsconfig.json going in the functions directory twice.
Is this a VS Code bug, a dbaeumer.vscode-eslint bug, or am I doing something wrong? What can I do to fix the error?
You can just add this "eslint.workingDirectories": [{ "mode": "auto" }] to your VS Code settings.json.
It should make the error go away, but it can have unintended side effects.
More Info: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#settings-options

VScode Solidity extension - not finding openzepplin imports

I'm trying to get started with what should be a very simple Solidity contract but VSCode is giving me a hard time.
I'm using Juan Blancos solidity plugin but VSCode cannot find openzepplin imports
import "#openzeppelin/contracts/token/ERC20/ERC20.sol";
The error is:
Source "#openzeppelin/contracts/token/ERC20/ERC20.sol" not found: File import callback not supported
Even though vscode shows red squigglies I can compile successfully via hardhat compile.
If I change the path to
import "../node_modules/#openzeppelin/contracts/token/ERC20/ERC20.sol";
VScode stops complaining but then I cannot compile via hardhard, with the error being:
Source "node_modules/#openzeppelin/contracts/security/Pausable.sol" not found: File outside of allowed directories.
My VSCode settings for Solidity extension for both User and Workspace are:
"solidity.packageDefaultDependenciesContractsDirectory": "contracts",
"solidity.packageDefaultDependenciesDirectory": "node_modules"
Which corresponds to my project structure
root
|_ contracts
|_ MyToken.sol
|_ node_modules
|_ #openzepplin
I followed the instructions here and have done extensive researching but unfortunately can't get it to working.
Source "#openzeppelin/contracts/token/ERC20/ERC20.sol" not found: File import callback not supported
I had same issue. I had multiple folders added in the unnamed workspace. After removing all other folders and keeping only one project folder resolved issue for me.
Linting issues
If you see something along the lines of:
ParserError: Source "OpenZeppelin/openzeppelin-contracts#3.4.0/contracts/access/Ownable.sol" not found: File not found.
import "#openzeppelin/contracts/access/Ownable.sol";
In your vscode, these and be safely ignored. However you can also add to your settings to ignore these.
Create a .vscode folder at the root of your project.
Create a file called settings.json
Add the following code:
{
"solidity.remappings": [
"#chainlink/=/Users/patrick/.brownie/packages/smartcontractkit/chainlink-brownie-contracts#0.2.2",
"#openzeppelin/=/Users/patrick/.brownie/packages/OpenZeppelin/openzeppelin-contracts#4.3.2"
]
}
Or whatever version your #chainlink and #openzeppelin contracts need. For example:
For more information see here
Use single quotes instead of doubles.
Instead of:
import "#openzeppelin/contracts/token/ERC20/ERC20.sol";
use this:
import '#openzeppelin/contracts/token/ERC20/ERC20.sol';

ESLint/VSCode marking valid imports as unresolved

Having problems with the ESLint plugin for VSCode. It's marking a lot of inputs that are valid as unresolvable. Dunno how to fix it :/ Local server still runs fine despite the linter marking problems but it's really annoying seeing errors everywhere that aren't errors. My coworker thinks it has something to do with BABEL_ENV variable?
In my case I had specified the paths property on the tsconfig.json file but I was still facing the error on vscode but whenever I was running eslint via CLI the issue wasn't reported.
If you read the description of the eslint plugin on vscode there's asection that talks about eslint.workingDirectories which fixed it for me when I set that option to {"mode": "auto"} on the vscode settings
I guess your import statement like import Foo from "#/components/Foo".
If you import like this, you should setup compiler settings in tsconfig.json or jsconfig.json, like below
{
"compilerOptions": {
...
"paths": {
"#/*": ["src/*"]
}
...
},
...
}

Bundling looking for text.js in dist directory

Using the gulp tasks from the yeoman generated Aurelia app I'm trying to bundle a custom application. When I run gulp bundle the following error is reported.
Where can I find a log to help track down this file or the reference to this file?
Double check your config.js
I've seen this from time to time, and it's usually an issue of the config.js. You'll want to make sure:
The github, npm, or wherever your text plugin is located is above your '*' line.
The text plugin is mapped.
The plugin files are located where (1) and (2) are pointing.
So, something like this:
config.js
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"*": "dist/*"
},
map: {
"text": "github:systemjs/plugin-text#0.0.4"
}
And jspm_packages/github/systemjs/plugin-text#0.0.4 exists.
If all else fails, try deleting your jspm_packages folder, and typing jspm install text.

mpglib_interface.c 'interface.h' file not found

I an trying to compile the WunderRadio app source code available here http://dev.wunderground.com/support/wunderradio/wunderradio.1.9lgpl.zip. After making all the modifications to the project to compile on iOS5 i get the following error:
Lexical or Preprocessor Issue 'interface.h' file not found.
Of course i tried getting the interface.h from the lame library that i previously downloaded, and added it to the project with no luck. Apparently its not the right file.
What am i missing ?
I found this file at:
http://code.google.com/p/live-converter/source/browse/trunk/include/interface.h?r=13