Adding file-loader dependency.

[piotrgradzinski]

When trying to follow the steps described in frontend/encore/copy-files.html I'm getting an error related to the missing file-loader dependency. Adding it via yarn fixes the issue. I've updated this part of the documentation to make this part easier to implement.

[OskarStark]

@weaverryan can you please verify this PR? Thanks

[javiereguiluz]

I remember having to do this in some app ... but I don't know if it's still needed in all cases. Maybe @Kocal knows if this is still needed? Thanks!

[Kocal]

Hi!

Indeed, file-loader dependency is required to use .copyFiles (see lib/features.js).

However, I think we prefer to write the following text when enabling a feature, instead of yarn add ...:

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you’re done!

This text is used on:

• https://symfony.com/doc/current/frontend/encore/css-preprocessors.html
• https://symfony.com/doc/current/frontend/encore/vuejs.html
• https://symfony.com/doc/current/frontend/encore/typescript.html

But not on:

• https://symfony.com/doc/current/frontend/encore/postcss.html
• https://symfony.com/doc/current/frontend/encore/reactjs.html

WDYT?

[piotrgradzinski]

Hi!
Having the explicit list of steps, including libs I have to install looks better for me but once the dependencies change we have to change the docs as well, which is painful.

Having a consistent approach across the documentation is also important, so please let me know which path you'd like to take and I can update appropriate parts as needed!

[javiereguiluz]

Thanks Hugo! Great and helpful answer as always!

@piotrgradzinski given how fast things can change, I agree with @Kocal and we should use the standard message that tells the reader to just do what Webpack Encore tells them to do. Otherwise, maintenance will be harder. Could you please do that change? Thanks!

[piotrgradzinski]

Copy files

Ok, I've pushed changed version for copy-files.

For the other parts I have some issues:

Post CSS

Skipping this step yarn add postcss-loader autoprefixer --dev results in the prompt that postcss-loader should be installed: yarn add postcss-loader@^5.0.0 --dev. That's ok, but when after adding autoprefixer in postcss.config.js file and running yarn encore dev I get an error:

Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "autoprefixer" plugin failed: Cannot find module 'autoprefixer'

What should be done in this case? Leaving only yarn add autoprefixer --dev?

ReactJS

Similar question. In the docs we are suggesting to install:

yarn add @babel/preset-react --dev
yarn add react react-dom prop-types

skipping this step results in a suggestion that only yarn add @babel/preset-react@^7.0.0 --dev should be installed. What about react react-dom prop-types?

[Kocal]

Copy files

Looks good to me, thanks!

PostCSS

The thing is that you don't need autoprefixer to make PostCSS working. Here, we only need it as part of the tutorial. 😕
WDYT about:

• PostCSS can be enabled with .enablePostCssLoader() in webpack.config.js [...]

• Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you’re done!

• PostCSS can be configured through a postcss.config.js file [insert example with autoprefixer + command line to install the dependency]

React

I think you can remove yarn add @babel/preset-react --dev, the following text is already present (my bad, didn't see it):

Then restart Encore. When you do, it will give you a command you can run to install any missing dependencies. After running that command and restarting Encore, you’re done!

WDYT?

[piotrgradzinski]

Hi @Kocal !
Thank you for your suggestions. I've removed @babel/preset-react in ReactJS section and reorder PostCSS. Please take a look. Thank you!

[weaverryan]

Very nice!

[Kocal]

@piotrgradzinski thanks, that looks nice to me! :)

[javiereguiluz]

This was a great team effort 💪 Thank you all!

@piotrgradzinski thanks a lot for taking care of all suggestions made during the review process and congrats on your first Symfony Docs contribution 🎉

Thanks @Kocal, @weaverryan and @OskarStark for your reviews 🙏