Webpack-encore: The installation documentation is confusing with the yarn and npm usage

[gundamftw]

First I follow the first installation page and installed node.js, yarn manager and did the install at the root of my project folder

composer require encore
yarn install

As I proceeded to the first example page, get the webpack.config.js setup and do the command, but then I was encountered by the "code 1" error.
yarn run encore dev

Since the installation page mentioned about installing webpack with npm, I decided not to even bother with yarn. So I uninstall it from my project with command
npm uninstall -g yarn

and then uninstall the yarn manager from my computer. But then where should I go from here? There're no tutorial on how to do it with npm except the first page. When I ran
npm run encore dev

I get "npm ERR! missing script: encore".

[vkryukov76]

@gundamftw

If you want to use npm instead of yarn, you should add encore to your package.json scripts section.

Like this:

"scripts": {
    "encore": "encore"
}

Then you could run encore with this commands:

npm run encore -- dev
npm run encore -- dev --watch

etc

---

And I agree that there should be documentation for npm enthusiasts like you and me 🙂

[gundamftw]

Thanks, the command works now, but I got the error

`Running webpack ...

Error: Install sass-loader & node-sass to use enableS assLoader()
yarn add sass-loader node-sass --dev`

Somehow yarn still was being called?

[Lyrkan]

Hi @gundamftw,

As I proceeded to the first example page, get the webpack.config.js setup and do the command, but then I was encountered by the "code 1" error.

Could you detail that error a bit more? "Code 1" could mean many things and should definitely not happen :)

So I uninstall it from my project with command
npm uninstall -g yarn

That command doesn't remove yarn from your project (it shouldn't be installed in your project), but globally if you installed it using npm install -g yarn (which isn't the recommended way to do it).

There're no tutorial on how to do it with npm except the first page.

Officialy we recommend using yarn which is why the rest of the documentation is using it instead of npm. That shouldn't be a big issue since most commands have an equivalent (and you probably won't need more than npm install/npm uninstall anyway), but there are some small differences like the one pointed out by @vkryukov76.

Somehow yarn still was being called?

It isn't, these kind of error messages simply don't check which package manager you are using and assume you should execute a yarn command. There is an issue about it (#57) but in the meantime you can just replace yarn add by npm install.

[gundamftw]

Hi @Lyrkan,

I found the problem, those errors are complaining that I'm missing packages. Since in the webpack.config.js I enabled SassLoader, the error is telling me to install it. Took me hours to figure that out, and the document wasn't that helpful.

This line in the doc is very vague:
"Actually, to use enableSassLoader(), you'll need to install a few more packages. But Encore will tell you exactly what you need."

The first time I read this was like "What? Where?"

[Lyrkan]

Hi @gundamftw,

There is a paragraph in the documentation about these dependencies: https://symfony.com/doc/current/frontend/encore/css-preprocessors.html#using-sass

The error message also seemed quite clear to me, how would you change it so it is better from a newcomer's perspective?

[gundamftw]

Hi @Lyrkan

These are the confusing parts I experienced from the first 2 pages of the webpack guide.

On the first page, there are three commands listed one after another, but there're not numbered, so it confuses me as to what to install. Am I suppose to install all three or to choose one out of the three? And during my tests when I'm trying to figure out on the problem earlier, the assets folder would not be recreated by the commands if I deleted it. So there should be a note to user to create one on their own if it's not there. In my case, I have to create the assets/js folder as well as an empty app.js file in order to work.

On the first example page, when I got the error from the command yarn run encore dev, I have no idea what SassLoader is. I thought it was some errors with the files. There should be note to clearly explain what was happening and what to do with encountered errors. Something like "the command will take the configuration in the webpack.config.js file and compile 2 files app.js and manifest.js to the location public/build. Each .enableXYZ() in the config may require additional installation of that package, which installation instruction can be obtained from the error messages after the "encore" command."

That page about installing sass should be linked somewhere in the example page as well because if I got stuck on step 2, I'm not going to look at step 5 or 6 for help.

[Lyrkan]

Closing this issue since the doc has been updated.
Feel free to re-open if you think that still isn't clear enough!