PHPStorm integration

[plfort]

PHPStorm can interpret standard Webpack config file but not the Encore webpack.config.js :

Can't analyse 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

I made this workaround to handle this : https://gist.github.com/plfort/93da0ee1465f1d7f929fe5d9e6307532

Do you have a better solution ?

[weaverryan]

Hey there!

I’m aware of this issue... but I think it’s not an issue (but it is confusing people). As far as I understand it, phpstorm has support to analyze you mr wepback.config.js file, which can help if you’re writing it by hand. But Encore generates this confgi for you, so I don’t think there’s any benefit to the phpstorm analysis anyways when using Encore. In other words, the warning should just be ignored.

Does the Phpstorm analysis give you any useful functionality with your workaround? Or is it just a way to make the earning disappear?

[plfort]

PHPStorm can resolve modules with my workaround : https://www.jetbrains.com/help/phpstorm/webpack.html#webpack_module_resolution
This is really helpful when working with aliases

[weaverryan]

Ah, so it uses the roots and aliases. Hmm, interesting. I don’t know if we can fix this or not, but it’s a legit issue.

[anurbol]

This is most probably PHPStorm 2017.3.{~3} issue. Maybe a bug.

If you want to get rid of this problem you can remove the notifications & log for the Webpack from Settings->Apperance&Behavior->Notifications->Webpack

https://stackoverflow.com/a/48562153/9259778

[florentdestremau]

I don't have the autocomplete for the Encore library. Not very damaging but a bit annoying, i need to Ctrl + click on the require('@symfony/webpack-encore'); to get a list of all the methods and explore the plugin by hand.

Is there a link with this issue ?

[Lyrkan]

@florentdestremau Nop, that's not related to this issue but to #151.

[Aerendir]

This is definitely an annoying issue.

The trick suggested by @plfort works great (after changing the default webpack.config.js to fakewebpackconfig.js in Preferences > Languages & Framework > JavaScript > Webpack.

Maybe Encore can create the file using a method like .createFakeConfigForPHPStorm but I understand its name is really coupled with the PHPStorm editor and that this trick maybe useful in other editors too...

[Lyrkan]

@Aerendir I'm not sure that's something we could add...

The issue with that workaround is that calling JSON.stringify() on the Webpack config object won't necessarily produce a valid configuration file (for instance if it contains functions... which is almost always the case if you use plugins).

That "fake" config may be valid today for PHPStorm if it only looks for some keys but we can't guarantee that'll always be the case.

[Aerendir]

@Lyrkan , ok, so there are some drawbacks!

I was not aware of this...

For the moment it works, with an Encore produced configuration and some minor tweaks that anyway don't involves the use of functions...

Maybe in future I will need them and then I will know why the integration will be broken!

Thank you!

[plfort]

Yes it is a quick & dirty hack...
One possible solution would be to generate a valid webpack configuration file from Encore configuration.

[Aerendir]

Unfortunately I have not the javascript experience required to do this :( I'm still learning all this stuff like React, redux and all the ecosystem... and also the javascript development basics as it is really different from the PHP development...

[stof]

well, making Encore generate a config file doing its own new ...Plugin instead of building the config would be very tricky (and requires rethinking the way Encore is used as it does not fit anywhere in the current API AFAICT)

[Aerendir]

@stof , yes, I was thinking just at this...

And I consider also that if someone comes with a more complex configuration, than we can also assume (s)he doesn't need Encore at all.

Or at lest (s)he can use the trick above to generate the initial "static" configuration to then further tweak...

Something really similar to what happen when react-create-app and then eject...

So, maybe a method eject maybe something to think about?

[Aerendir]

Or also a simple note in the documentation?

[plfort]

Too dirty to be in the documentation IMOO