Installation guide does not work - yarn: Command "encore" not found

[smirgol]

Followed the guideline for installing Encore on Symfony 4 as described here:
https://symfony.com/doc/current/frontend/encore/installation.html

It consists of two steps:

composer require webpack-encore
yarn install

Requiring webpack-encore works fine.
When I run yarn install, it does not install anything:

yarn install v1.9.4
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
success Already up-to-date.

When I try to make a first build of encore, without changing anything, using

yarn encore dev

it gives me the following error:

yarn run v1.9.4
warning package.json: No license field
error Command "encore" not found.

[Lyrkan]

Hello @smirgol,

I just tried all the steps from the beginning and it seems to work fine (I removed some irrelevant lines):

$ composer create-project symfony/skeleton:4.1.* test-flex-encore
Installing symfony/skeleton (v4.1.3.4)
  - Installing symfony/skeleton (v4.1.3.4): Loading from cache
Created project in test-flex-encore
Loading composer repositories with package information
Installing dependencies (including require-dev) from lock file
Package operations: 20 installs, 0 updates, 0 removals
  - Installing symfony/flex (v1.1.0): Loading from cache

Prefetching 13 packages 🎶 💨
  - Downloading (100%)

  - Installing psr/cache (1.0.1): Loading from cache
  - (...)
Executing script cache:clear [OK]
Executing script assets:install public [OK]

Some files may have been created or updated to configure your new packages.
Please review, edit and commit them: these files are yours.

$ cd test-flex-encore

$ composer req webpack-encore
Using version ^1.0 for symfony/webpack-encore-pack
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Restricting packages listed in "symfony/symfony" to "4.1.*"

Prefetching 2 packages 🎶 💨
  - Downloading (100%)

Package operations: 2 installs, 0 updates, 0 removals
  - Installing symfony/asset (v4.1.3): Loading from cache
  - Installing symfony/webpack-encore-pack (v1.0.3): Loading from cache
Writing lock file
Generating autoload files
Symfony operations: 1 recipe (946f323b0f42b0c17f87b1c727106aff)
  - Configuring symfony/webpack-encore-pack (>=1.0): From github.com/symfony/recipes:master
Executing script cache:clear [OK]
Executing script assets:install public [OK]

$ yarn install
yarn install v1.7.0
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 18.34s.

$ yarn encore dev              
yarn run v1.7.0
$ /home/lyrkan/Tests/test-flex-encore/node_modules/.bin/encore dev
Running webpack ...

 DONE  Compiled successfully in 667ms                                   00:05:10

 I  3 files written to public/build
Done in 1.25s.

Did you have the issue when adding Encore to an existing flex project?
If yes, did you already have a package.json file in the root folder?

[smirgol]

This is my install order for a fresh project:

composer create-project symfony/website-skeleton myproject
cd myproject

composer require symfony/apache-pack
composer require symfony/orm-pack
composer require symfony/maker-bundle --dev

[configure .env for doctrine and init database]

yarn add bootstrap --dev
yarn add jquery --dev
yarn add popper.js --dev

composer require webpack-encore
yarn install

Since I've installed bootstrap, jquery and popper before Encore, I do have a package.json, yes.

{
  "devDependencies": {
    "bootstrap": "^4.1.3",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.4"
  }
}

Edit:
It does indeed work if I install Encore before I install anything else with yarn. Once I've installed something with yarn, like bootstrap, it no longer works. Is there a workaround/fix for this, so I can add Encore to my existing project, or would I need to reinstall everything from scratch?

Edit2: About the workaround:
I've copied the relevant parts from the new created project's package.json to my existing project and called yarn install. Looks like it installed something. Gave me some warnings though:

yarn install v1.9.4
[1/4] Resolving packages...
warning @symfony/webpack-encore > css-loader > cssnano > autoprefixer > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning @symfony/webpack-encore > css-loader > cssnano > postcss-merge-rules > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning @symfony/webpack-encore > css-loader > cssnano > postcss-merge-rules > caniuse-api > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.

I'll see if it works anyway. :)

[Lyrkan]

When you require webpack-encore the recipe tries to copy this default package.json file.
As you can see it contains the depencies missing in your case and some useful npm/yarn scripts.

The catch is... that copy doesn't happen if a file already exists (to avoid overwriting user's files).

It should work fine if you add bootstrap/jquery/popper.js after calling composer require webpack-encore.

[smirgol]

It does, yes. Encore is now working. 👍
If one already has an existing project, it helps to create a fresh project, install Encore and make a manual diff on the package.json.

[smirgol]

Maybe this could/should be pointed out in the tutorial, it's not really an obvious issue for those new to Symfony/Encore. It's not a given thing that the very first thing you install with yarn is Encore and then you're stuck.

[Lyrkan]

Hmm, maybe... but that's a behavior that you'd encounter with all flex recipes that use the "copy-from-recipe" configurator and for other files than the package.json.

I'm not sure how we could word that without basically saying "look at all the files in the Encore recipe and merge them manually if you already have them".

@weaverryan WDYT?

[bchris999]

I just had this same problem. Would be useful to add something to the docs to say if you are already had a package.json, then (do something, manually merge?) before the yarn install.

(Thanks to @Lyrkan for linking the package.json it copies, I have merged it with my existing package.json which has fixed the issue)

[frdemoulin]

Hello,
As smirgol did, I installed bootstrap before webpack-encore. So I encounter the error warning package.json: No license field, error Command "encore" not found. So I already have a package.json file containing { "devDependencies": { "bootstrap": "^4.1.3" } }.

So I understand that I have to merge my existing package.json with the default one linked here on 25 august, but it links to a 404.

If it is the right thing to do, could you please give me a link to the default package.json I should merge mine with? Thanks

[dukeofgaming]

Well, the problem I had was because yarn install and yarn add was removing the @symfony files in node_modules.

Make sure your NODE_ENV environment variable exists and is set to "development", yarn install --production=false will do the trick as well, otherwise if you add any other packages it may end up removing them (the bastard).

This is why the command will not be found, at least in my case.

[Lyrkan]

@dukeofgaming Unless you have NODE_ENV set to production you shouldn't have to do that since yarn install includes dev dependencies by default.

[dukeofgaming]

@Lyrkan I made sure that NODE_ENV did not exist before I set it, so by default it seemed to be behaving as production. I noticed this initially when encore would work just after adding the @symfony/webpack-encore with the --dev flag, but not after adding webpack-notifier.

In any case, hopefully this solution is useful for someone.

[Lyrkan]

@dukeofgaming You may have a .yarnrc file somewhere then. What does it show when you run yarn config get production?

[stof]

@Lyrkan the difference is that most recipes are copying a config file named after the bundle, so conflicts are much less likely. In an existing project, there is a good chance that there is already a package.json.

[Lyrkan]

@stof I agree with that, I opened an issue about it on flex's repository a while ago (symfony/flex#428)... but I'm still not sure what's the best way to handle it.

[niketpathak]

For me, this issue was resolved by just running yarn install

[felixprojekt]

package.json doesn't get indeed updated with the "scripts" section which is needed to run the commands from the tutorial. You can try to add them manually to avoid creating a new project and installing all again.

{
  "devDependencies": {
    ...
  },
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  }
}

[99hops]

I just spent some time on this as well 😃
So I created a new project and this is what you get, copy/paste in package.json run yarn install and then yarn encore dev should work!

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.28.0",
    "core-js": "^3.0.0",
    "regenerator-runtime": "^0.13.2",
    "webpack-notifier": "^1.6.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  }
}