CODEWITHSUNDEEP
webpackbabeljswebpack-5
TrueWill
TrueWill

Reputation: 25523

Suppress very long webpack/Babel warning

Running our script for npm run start:webpack on a project results in a pages-long bright yellow warning:

<w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving '@babel/helper-compilation-targets/lib/filter-items' in node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/helper-compilation-targets/lib for build dependencies doesn't lead to expected result 'node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/helper-compilation-targets/lib/filter-items.js', but to 'node_modules/@babel/plugin-proposal-object-rest-spread/node_modules/@babel/helper-compilation-targets/node_modules/@babel/helper-compilation-targets/lib/filter-items.js' instead. Resolving dependencies are ignored for this path. <w> at unknown 4 @babel/helper-compilation-targets/lib/filter-items

(The stack trace goes on.)

This makes it hard to spot other warnings or errors.

I've tried upgrading @babel/core to 7.19 and updating its plugins, bisecting git commits to find where this started, searching the web—all without success.

How can I diagnose, fix, or suppress this warning?

Upvotes: 2

Views: 461

Answers (2)

Peter
Peter

Reputation: 775

I am using pnpm and in a next.js project using opentelemetry I got the same error.

The fix for me was to get webpack to simply ignore the subpaths. Because in this case it was not easy or preferred to delete folders in node_modules

In my very specific case it looked like this, however it could probably be generalized in some way.

  webpack: (config) => {
    config.module.rules?.push({
      test: /[email protected]_@opentelemetry\[email protected][email protected][email protected]\node_modules\next/,
      loader: "ignore-loader",
    });
    return config;
  },

Upvotes: 1

Merott
Merott

Reputation: 7379

I had the same warnings but with a slightly different path… Added line breaks and indentation for readability:

Resolving '@babel/helper-compilation-targets/lib/filter-items' 
  in <PROJECT_PATH>/node_modules/workbox-build/node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-compilation-targets/lib
    for build dependencies doesn't lead to expected result 
      '<PROJECT_PATH>/node_modules/workbox-build/node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-compilation-targets/lib/filter-items.js'
        but to 
      '<PROJECT_PATH>/node_modules/workbox-build/node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-compilation-targets/node_modules/@babel/helper-compilation-targets/lib/filter-items.js' 
    instead. Resolving dependencies are ignored for this path.

The gist of it seems to be that Webpack is trying to resolve this:

@babel/helper-compilation-targets/lib/filter-items

And, it expects it to resolve to this:

<PROJECT_PATH>/node_modules/workbox-build/node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-compilation-targets/lib/filter-items.js

But instead, it resolves to this:

<PROJECT_PATH>/node_modules/workbox-build/node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-compilation-targets/node_modules/@babel/helper-compilation-targets/lib/filter-items.js

Strangely, it looks like @babel/helper-compilation-targets has itself inside of its own node_modules directory! 🤔🤷🏻‍♂️

I managed to "fix" the issue by deleting that (extraneous?) package:

rm -rf <PROJECT_PATH>/node_modules/workbox-build/node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-compilation-targets/node_modules/@babel/helper-compilation-targets/

You can also add a postinstall script to do it automatically after each install:

scripts: {
  "postinstall": "rimraf node_modules/workbox-build/node_modules/@babel/helper-define-polyfill-provider/node_modules/@babel/helper-compilation-targets/node_modules/@babel/helper-compilation-targets"
}

Upvotes: 1

Related Questions