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.
Related
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
I'm attempting to load a json file with a custom json loader module. I have babel configured to use my loader specifically for src/routes.json, though really it could be for any json file. I've done my best to look at the docs and the multiples issues reported with similar problems of loading vendor library modules but none of the solutions I've found (which are various ways of defining the module) are working for me.
What I'm attempting to do is implement the declarative router found here: https://github.com/kriasoft/react-static-boilerplate/blob/master/docs/routing-and-navigation.md
My question is how can I have typescript understand my relative src/routes.json?
You could write something like
declare module "*.json";
in a global .ts or .d.ts file. That tells TypeScript "anything that ends in .json exists, and I shouldn't get any errors for using it."
To clarify, when I say "a global file", I mean any file that has no imports or exports.
I'm trying to use tracking-js library in my project I'm using react but I dont know if I'm doing anything wrong but keep showing that the module is not found, I already check my package.json and the module install. So this is how I require the module:
const tracking = require("tracking");
what am I doing wrong?
For node, including node-based build tools, first make sure that the module is present. Keep in mind that require does not care about the package.json of your app, only about the module files being present.
Check if node_modules/tracking is present.
Make sure the "main" JS file can be found. If there's a node_modules/tracking/package.json file, see if it has a main property and if the file it references exists. If there is no main property, make sure there's an index.js in the root of the module directory.
If all this is fine and you're getting the module not found error at runtime in client-side JavaScript, then your bundling config may be incorrect, and your webpack/browserify/whatever config will have to be scrutinized for bugs.
Like it works in C# / Java e.t.c, where you don't have to worry about the location of the file, the compiler will be responsible for correctly resolving the dependencies...
At the moment relative paths are used for JavaScript modules import something from '../../../../Something' and that long path can be resolved using configurations in webpack and/or gulp e.t.c, but it is still vulnerable to file location change. So if there is a module being used in many other files moving it is not an option, better to duplicate and use new path for other files and slowly refactor the old ones.
Is there any solution to this? Am i missing something or thinking about in the wrong way? (I tried TypeScript namespaces but they don't act like this, weren't what i expected, and i'm not that into using languages that compile to JS)
There are two files in my project:
index.js where the following code is
define([ 'exports', 'hbs!./general'], function (exports, generalTemplate) {
});
general.handlebars which is correctly taken by require.js and the hbs! plug-in.
I'm basically using Require.js with Handlebars.js and the https://github.com/SlexAxton/require-handlebars-plugin for automating the creation of templates from files.
It works correctly, but Webstorm 8 (and also 7 before it) doesn't understand the file is correct so it always complains with: Cannot resolve file 'general'. It is the same with every file using that plugin prefix.
I coudln't find where (if it exists) to turn that notification off, because it underlines the entire file, and its parent directories as having errors.
How can I remove this error of being reported?
This notification can't be turned off unfortunately - annotator-level inspections can't be suppressed.
The issue with relative paths resolving when loading plugins for non-js extensions is tracked as WEB-1167, please vote