I am using global variable __root with path of my root app directory then I am using require to load code from other files.
const Parser = require(__root + '/parsers/Parser')
The issue is that vscode does not understand what is happening:
Intellisense does not work
Object type is shown as any (if path is correct vscode grabs right type)
What are the options to solve this? Can you share your practices to resolve this issue?
VS Code's intellisense cannot understand dynamic import paths like root + '/path'. There are no workarounds for this, nor are the plans to address this in the immediate future.
However, with static require import paths, you can configure how VS Code resolves the imports by configuring a jsconfig.json. The two options you probably want are baseUrl and paths
Setting up a jsconfig.json will not change the runtime behavior of your code, only how VS Code IntelliSense handles your project. You can use a jsconfig.json along with webpack aliases
Related
I have noticed the JavaScript classes not resolving when typing the following in a Shopware JavaScript plugin:
This got me thinking. Is there any way to solve this not resolving? Are there any other configuration recommendations for Shopware development in PhpStorm? I've already seen some in the Shopware Academy backend course and the documentation, but might there be more?
Updated answer, quick solution
In your project directory tree find src/Storefront/Resources/app/storefront, right click the folder, Mark directory as, Resource Root. This should make the aliased modules resolved.
Older answer, possible permanent fix
Theoretically PhpStorm should be able to resolve the aliases defined in src/Storefront/Resources/app/storefront/webpack.config.js.
However it fails analyzing that file:
Webpack
Can't analyze webpack.config.js: coding assistance will ignore module resolution rules in this file.
Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
Error details: Definition file does not exists
I found the reason is line 465 of src/Storefront/Resources/app/storefront/webpack.config.js:
const injector = new WebpackPluginInjector('var/plugins.json', webpackConfig, 'storefront');
Replacing that line with the following line made the modules using the aliases resolvable:
const injector = new WebpackPluginInjector(path.resolve(projectRootPath, 'var/plugins.json'), webpackConfig, 'storefront');
If you're using the development template and the Shopware mono-repo is located in the platform diretory this change will make Webpack look for platform/var/plugins.json instead. So either copy or symlink var/plugins.json to that location.
This is obviously just a temporary workaround and needs to properly be fixed eventually.
As a side note: The separate webpack.config.js for the administration also fails to be analyzed by PhpStorm as of now. So this won't fix non-resolvable aliases for PhpStorm in the administration.
I am working on an app where I don't know the names/paths of the components that I might need during rendering. And I don't want to/can't write all the import statements at once during rendering either.
I tried the React lazy loading function with import() to load my components as and when I need them, but turns out import() doesn't support complicated urls, like '../../data/files/components/MyComponent'.
Is there any way I can achieve this?
Dynamic imports are not really dynamic in wepback(and other bundlers).
It is needed to be statically analyzable, because webpack pre-loads all dependencies for all chunks before runtime phase.
So basically these statements will NOT work:
const magic = '../unknown/path/to/' + a + b;
import(magic).then(...
Because magic, a and b variables can be known only in runtime and it's fully unknown at build phase.
But if you will give webpack as much information as you can, webpack will do it's best to load your files:
const fileName = ...some heavy calculations for filename;
import('../../data/files/components/' + fileName + '.js')
Webpack will do following steps:
Scan for all files in the '../../data/files/components/' folder
Find only files with endings '.js'
Will remember it for the moment when you will need your file in runtime and will pass correct variable and give you the component you need
In a react application .i have the following file : (I am using VSCode)
#example .js
export default helloWorld =()=>{
return "Hello World" ;
Is there a way , i can look for all the .js files which imports this file ?.
I understand different files can have this function by the same name .
So is there a way we can look which files have used something like :
import helloWorld from "somevariablePath/example.js"
try show all references or find all ref
I had the same problem recently, and realized theres not a perfect solution for this. The CommonJS modules aren't well-suited for static analysis.
Anyway, I found useful following tools:
JetBrains Webstorm IDE (Premium)
The feature Find Usages from this IDE is the most accurate tool I found. But its a paid IDE. (You have a 30 days trial period)
VSCode
The feature Find all references is not as accurate as previous one, but still useful.
Well i figured out an easy way to do that in the VSCode.
If i just use the absolute path (the absolute path can of course be shortened by using NODE_PATH environment variable in the .env file) of the file which i want to track(see whereever it is imported) .
I can just copy the path , do a Ctrl+Shift+F ,paste the path in the search bar and press Enter(Pressing Enter is important).
This will give all the files where that particular line of code ,in this case , import helloWorld from "absolutePath/example.js,is used
checkout dynamic import feature of webpack if fits yours requirement .
Dynamic import
or iterate using the file system(fs module) and load the file based on your condition
after Googling around for a few hours on this topic to no avail, I'm hoping someone on here might be able to help clarify this piece of my project for me...
I have a project that has modules that it loads via require() and is able to name them explicitly as they are included in the package.json and have the "main" attribute in their package.json files themselves.
example: require('submodule-name')
The functionality works perfectly, but in each of these modules, I have to require the main file like so: const mainModule = require('../../mainModuleName');
This is so I can access functions and config variables that are attached to the main piece.
I'm wondering if there is a better way to require() this main module without a relative path, since my linter is complaining that the module doesnt exist when I lint the child-module repo on its own. Also, I'd like to employ the use of npm link for future development happiness.
Is there a way of doing this without relative paths? Maybe fix the package.json of the main project file?
UPDATE:
File/folder structure is as follows:
/
mainModule.js
/node_modules
childModule.js <- this requires the mainModule file with a relative path
/modules
anotherChildModule.js <- same relative path requirement of mainModule
I think the problem is in the approach itself. Submodules should not depend on the main modules, as this reverses the dependencies (now the submodule depends on the parent module implementation). I recommend you avoid requiring parent directories, and pass the functions & config to the submodule when you require it instead.
eg: const sub = require('submodule-name')(config)
As an alternative option, NPM supports importing local dependencies therefore you can create a "config" package that you could include in both your sub modules e.g.
package.json
"myconfig": "file:./common"
childModule.js
const config = require('myconfig')
I have quite an annoying, but probably simple, problem that I just cannot figure out.
In a TypeScript file I have defined the following line:
import test1 = require('domReady');
This "domReady" module is defined in a main.js file that is loaded as the entry point for RequireJS. The definition is as followed:
require.config({
paths: {
'domReady': '../domReady',
}
However... in my TypeScript file I simply get a "cannot find module 'domReady'" and it is driving me insane, as I have double checked the pathing to the file and it is indeed in the correct location with the correct name. Additionally, I am fairly certain that the domReady.js file IS AMD compatible, so it should define an external module just fine! (domReady GitHub Link).
I seriously can't understand why the module can't be found in the import statement. Does anyone have any ideas to what the problem may be?
EDIT 1
The directory structure is as follows:
.
+--App
| +--main.js
| +--dashboard.js
+--domReady.js
The import statement takes place in the "dashboard.js" file, and the config for require.js happens in "main.js".
In order for TypeScript to find a module, you must actually provide module information to TypeScript.
TypeScript doesn’t yet support AMD-style paths configuration, it doesn’t ever use calls within your JavaScript code (like require.config()) to configure itself, and it won’t treat JavaScript files on disk as modules when compiling. So right now, you aren’t doing anything to actually give the compiler the information it needs to successfully process the import statement.
For your code to compile without error, you have to explicitly declare an ambient declaration for the module you’re importing within the compiler, in a separate d.ts file:
// in domReady.d.ts
declare module 'domReady' {
function domReady(callback: () => any): void;
export = domReady;
}
Then, include this d.ts in the list of files you pass to the compiler:
tsc domReady.d.ts App/main.ts App/dashboard.ts
Any other third party JavaScript code that you import also needs ambient declarations to compile successfully; DefinitelyTyped provides d.ts files for many of these.
I've had problems before when the path key and the directory name or file name are the same (in your case, domReady). Might not work, but worth giving it a quick try, i.e.
either
'domReadyModule': '../domReady',
require('domReadyModule')
or rename domReady.js to e.g. domReady-1.0.js and use
'domReady': '../domReady-1.0',
require('domReady')
If that doesn't work, I'd check the relative directories between main.js and the file that is doing the require, or else try importing another library in the same fashion, or finally compare with other libraries that you are importing successfully.
Good luck, hope you resolve the problem!