[Frontend] The docs for Encore setup simply do not work and error due to package.json not being populated

[vekien]

Hello,

The documentation says to install Encore then run npm run watch, however this does not work because no scripts get added to package.json.

Steps to reproduce.

1. https://symfony.com/doc/current/frontend/encore/installation.html
   Installing Encore in non Symfony Applications
   npm install @symfony/webpack-encore --save-dev

2. https://symfony.com/doc/current/frontend/encore/simple-example.html
   npm run watch

Error:

λ npm run watch
npm ERR! Missing script: "watch"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

Package.json:

{
  "dependencies": {
    "@symfony/webpack-encore": "^4.2.0"
  }
}

Doesn't matter if you use NPM or Yarn, or whatever command you use.

Unless I am missing something this is supposed to work as it's step 1 to 2 of the documentation.

[xabbuh]

Do I understand correctly that instructions work when using it on a standard Symfony application?

[vekien]

Do I understand correctly that instructions work when using it on a standard Symfony application?

If you run it as if it's a symfony application, eg:

• composer require symfony/webpack-encore-bundle
• npm install

This also does not work, unless installing a symfony project is required, those commands on their own do not work because a package.json is not created.

λ npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path xxx/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open 'xxx\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

[xabbuh]

I mean does it work as described here if the application was bootstrapped like documented at https://symfony.com/doc/current/setup.html#creating-symfony-applications?

[vekien]

So firstly:
symfony new my_project_directory --version="6.2.*" --webapp

This isn't working for me, I get the error: Incorrect usage: flag provided but not defined: -webapp

Symfony CLI version v4.20.3 --

➜  Work symfony self:update
No updates available

So that's another friction point of documentation not working.....

After moving on to testing via composer, it works but you have to run:
composer require symfony/webpack-encore-bundle

Without this, it simply doesn't work, Thus it does not work outside of Symfony projects, which it did and is documented to do so. So I believe this is bugged.

[javiereguiluz]

@vekien I think you are using the old Symfony CLI binary, instead of the new and open source Symfony CLI project (see https://symfony.com/blog/announcing-the-open-sourcing-of-the-symfony-cli)

The latest version of Symfony CLI is v5.4.19. See https://github.com/symfony-cli/symfony-cli/releases

[vekien]

So we continue the struggle...

Clicking that blog announcement shows a github link: https://github.com/symfony-cli/symfony-cli
And on here it says: Read the installation instructions on symfony.com. okay so I go there..

Not one of the "copy" buttons work by the way. Another bug to add to the list of bugs or mistakes I've found so far in this thread.. Tested Chrome and Firefox, they don't work.

Anyway, ran install again and then the mv command. Cool I have Symfony CLI version 5.4.19

How does any of this help the original issue?

Installing Encore in non Symfony Applications

➜  test npm install @symfony/webpack-encore --save-dev
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility

added 623 packages, and audited 624 packages in 50s

62 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
➜  test npm run watch
npm ERR! Missing script: "watch"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxx/.npm/_logs/2022-12-18T21_53_46_503Z-debug.log
➜  test cat package.json
{
  "devDependencies": {
    "@symfony/webpack-encore": "^4.2.0"
  }
}

I am sorry if I come across rude but I've hit 3 separate issues with the docs/symfony tools and none of this leads to fixing the issue with package.json not updating for NON symfony projects

I shouldn't need to bother with the symfony CLI for a NON symfony application you never used to and the documentation doesn't say it's a mandatory requirement. Even with the updated Symfony CLI it doesn't fix the issue for NON symfony applications.

If i manually add encore commands to my package.json, it works, but the documentation doesn't say to do that and it's expected they get added automatically.

https://symfony.com/doc/current/frontend/encore/installation.html#installing-encore-in-non-symfony-applications

It says "This command creates (or modifies) a package.json file" < This is bugged and it does not do that.

[xabbuh]

@weaverryan Maybe you have some insights here. Do we need to update the installation instructions for non-Symfony applications to manually make some more changes after having installed Encore?

[weaverryan]

I've added the missing notes about package.json to #17596

Cheers!