Running build with `npm`: ValidationError: Invalid configuration object.

• I’ve read the guidelines for Contributing to Roots Projects
• This request isn’t a duplicate of an existing issue
• I’ve read the docs and followed them (if applicable)
• This is not a personal support request that should be posted on the Roots Discourse community

Description

[Description of the issue]

Steps to reproduce

1. [First step]
2. [Second step]
3. [and so on…]

Expected behavior: [What you expect to happen]

Actual behavior: [What actually happens]

Reproduces how often: [What percentage of the time does it reproduce?]

Versions

You can get this information from referencing CHANGELOG.md. Also, please include the OS and what version of the OS you’re running.

Additional information

Any additional information, configuration or data that might be necessary to reproduce the issue.

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. │ │ - configuration[0].resolve.modules[2] should be a non-empty string. │ │ -> Folder name or directory path where to find modules.

[strarsis]

@retlehs: Correct. When I install the dependencies using npm install subsequent build will fail. When I (remove node_modules and) install with yarn install, builds will work correctly. node 6

[kellymears]

i can reproduce with

❯ npm -v
7.15.1

❯ node -v
v16.3.0

log:

...
[sage] [project] › ✖  @roots/bud-eslint manifest cannot be resolved
...
[sage] [project] › ✖  @roots/bud-postcss manifest cannot be resolved
...

and from the module resolutions listed in both ./.budfiles/profile.json and ./.budfiles/bud/webpack.config.js there is a null value and then some straight up missing entries.

{
  "modules": [
    "resources",
    "node_modules",
    "[project]/node_modules",
    "[project]/node_modules/@roots/sage",
    null,
    "[project]/node_modules/@roots/bud-preset-wordpress",
    "[project]/node_modules/@roots/bud-prettier",
    "[project]/node_modules/@roots/bud-stylelint",
    "[project]/node_modules/@roots/bud-tailwindcss"
  ]
}

looking at node_modules it appears that modules are not hoisted from @roots/bud-preset-* packages when running npm install. the solution, for now, is to install them as explicit peer dependencies:

workaround

from a clean copy of @roots/sage

npm install

npm install \
  postcss@8.3.11 \
  @roots/bud-postcss@5.0.0-next.16 \
  @roots/bud-eslint@5.0.0-next.16 \
  --include dev
  
npx bud build

now the build works and we can see expected module resolutions in the log:

[sage] [project] › …  analyzing dependencies
[sage] [project] › ✔  resolved @roots/bud-postcss ./node_modules/@roots/bud-postcss
[sage] [project] › ✔  resolved @roots/bud-eslint ./node_modules/@roots/bud-eslint
[sage] [project] › ✔  manifest resolved @roots/bud-postcss
[sage] [project] › ✔  required peer dependency is met postcss@8.3.11
[sage] [project] › ✔  required peer dependency is met postcss-import@14.0.2
[sage] [project] › ✔  required peer dependency is met postcss-nested@5.0.6
[sage] [project] › ✔  required peer dependency is met postcss-preset-env@7.0.1
[sage] [project] › ✔  manifest resolved @roots/bud-eslint
[sage] [project] › ✔  required peer dependency is met eslint@7.32.0
[sage] [project] › ✔  required peer dependency is met prettier@2.4.1
[sage] [project] › …  analyzing devDependencies
[sage] [project] › ✔  resolved @roots/sage ./node_modules/@roots/sage
[sage] [project] › ✔  manifest resolved @roots/sage
[sage] [project] › ✔  resolved @roots/bud-preset-wordpress ./node_modules/@roots/bud-preset-wordpress
[sage] [project] › ✔  resolved @roots/bud-prettier ./node_modules/@roots/bud-prettier
[sage] [project] › ✔  resolved @roots/bud-stylelint ./node_modules/@roots/bud-stylelint
[sage] [project] › ✔  resolved @roots/bud-tailwindcss ./node_modules/@roots/bud-tailwindcss
[sage] [project] › ✔  manifest resolved @roots/bud-preset-wordpress
[sage] [project] › ✔  required peer dependency is met @wordpress/browserslist-config@4.1.0
[sage] [project] › ✔  manifest resolved @roots/bud-prettier
[sage] [project] › ✔  manifest resolved @roots/bud-tailwindcss
[sage] [project] › ✔  required peer dependency is met tailwindcss@2.2.19
[sage] [project] › ✔  manifest resolved @roots/bud-stylelint
[sage] [project] › ✔  resolved @roots/bud-preset-recommend ./node_modules/@roots/bud-preset-recommend
[sage] [project] › ✔  resolved @roots/bud-react ./node_modules/@roots/bud-react
[sage] [project] › ✔  resolved @roots/bud-wordpress-externals ./node_modules/@roots/bud-wordpress-externals
[sage] [project] › ✔  resolved @roots/bud-wordpress-manifests ./node_modules/@roots/bud-wordpress-manifests
[sage] [project] › ✔  resolved @roots/bud-wordpress-dependencies ./node_modules/@roots/bud-wordpress-dependencies
[sage] [project] › ✔  manifest resolved @roots/bud-preset-recommend
[sage] [project] › ✔  manifest resolved @roots/bud-wordpress-externals
[sage] [project] › ✔  manifest resolved @roots/bud-wordpress-manifests
[sage] [project] › ✔  manifest resolved @roots/bud-react
[sage] [project] › ✔  required peer dependency is met react@17.0.2
[sage] [project] › ✔  required peer dependency is met react-dom@17.0.2
[sage] [project] › ✔  manifest resolved @roots/bud-wordpress-dependencies
[sage] [project] › ✔  resolved @roots/bud-babel ./node_modules/@roots/bud-babel
[sage] [project] › ✔  resolved @roots/bud-entrypoints ./node_modules/@roots/bud-entrypoints
[sage] [project] › ✔  manifest resolved @roots/bud-babel
[sage] [project] › ✔  manifest resolved @roots/bud-entrypoints

Notes

explicitly installing postcss@8.3.11 is necessary because @roots/sage (the theme, not the bud preset) specifies postcss@8.4.1 but that’s not what @roots/bud-postcss wants.

https://github.com/roots/sage/blob/759eb08030484742457b4790d983829eae675d6f/package.json#L31

if you don’t install postcss@8.3.11 npm will refuse to install anything unless you include the --force flag:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: sage@undefined
npm ERR! Found: postcss@8.4.1
npm ERR! node_modules/postcss
npm ERR!   dev postcss@"8.4.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"8.3.11" from @roots/bud-postcss@5.0.0-next.16
npm ERR! node_modules/@roots/bud-postcss
npm ERR!   @roots/bud-postcss@"5.0.0-next.16" from the root project

@QWp6t i’m not sure what is the best way forward to keep peer versions in sync between @roots/sage and @roots/bud to prevent issues with regards to npm peer package resolution requirements.

Moving forward

We could do any of the following:

• hoist the modules ourselves if @roots/dependencies reports that npm is in use
• explicitly resolve the dependencies with a custom resolver. see https://github.com/webpack/enhanced-resolve.
  • first try resolving relative to project
  • next try resolving from [requiring_extension_root]/node_modules
  • unknown: using pnp.
  • see also: parcel’s node resolver. webpack’s enhanced resolve
• install all peers as devDependencies of the project (this is the correct approach but will result in projects having many devDependencies).

Refs

see also npm7 handling of peerDeps. relatedly, it would be nice if npm autoinstalled peerDependencies, which they are considering.