Invalid dependencies warning during build from webpack

chester23491 commented 1 year ago

Getting invalid dependencies warning during build. This issue occurs with the following configuration in a React 18 setup with the version `12.5.0` and `12.8.1` in the module `@baloise/design-system-components-react`.

Detailed description

Compiled with warnings.

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "node_modules/"
 * "node_modules/@baloise"
 * "node_modules/@baloise/design-system-css"
 * and more ...

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

assets by status 2.02 MiB [cached] 62 assets
assets by status 2.54 MiB [emitted]
  assets by chunk 2.52 MiB (name: main)
    asset static/js/bundle.js 2.52 MiB [emitted] (name: main) 1 related asset
    asset main.0a3109ed27e8cb533c45.hot-update.js 370 bytes [emitted] [immutable] [hmr] (name: main) 1 related asset
  assets by path *.json 26.1 KiB
    asset asset-manifest.json 26.1 KiB [emitted]
    asset main.0a3109ed27e8cb533c45.hot-update.json 28 bytes [emitted] [immutable] [hmr]
  asset index.html 1.67 KiB [emitted]
Entrypoint main 2.52 MiB (2.53 MiB) = static/js/bundle.js 2.52 MiB main.0a3109ed27e8cb533c45.hot-update.js 370 bytes 2 auxiliary assets
cached modules 3.34 MiB [cached] 196 modules
runtime modules 32.9 KiB 18 modules
./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss 690 KiB [built] [1 warning]

WARNING in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss)
Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "node_modules/"
 * "node_modules/@baloise"
 * "node_modules/@baloise/design-system-css"
 * and more ...
 * "node_modules/@baloise/design-system-css/sass"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system.css"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system.import"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system.import.css"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system.import.sass"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system.import.scss"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system.sass"
 * "node_modules/@baloise/design-system-css/sass/_baloise-design-system.scss"
 * "node_modules/@baloise/design-system-css/sass/baloise-design-system"
 * "node_modules/@baloise/design-system-css/sass/baloise-design-system.import"
 * "node_modules/@baloise/design-system-css/sass/baloise-design-system.import.css"
 * "node_modules/@baloise/design-system-css/sass/baloise-design-system.import.sass"
 * "node_modules/@baloise/design-system-css/sass/baloise-design-system.import.scss"
 * "node_modules/@baloise/design-system-css/sass/baloise-design-system.sass"
 * "node_modules/@baloise/design-system-fonts"
 * "node_modules/@baloise/design-system-fonts/scss"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.import.sass"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.import.sass.css"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.import.sass.sass"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.import.sass.scss"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.sass"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.sass.css"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.sass.sass"
 * "node_modules/@baloise/design-system-fonts/scss/_fonts.sass.scss"
 * "node_modules/@baloise/design-system-fonts/scss/fonts.import.sass"
 * "node_modules/@baloise/design-system-fonts/scss/fonts.import.sass.css"
 * "node_modules/@baloise/design-system-fonts/scss/fonts.import.sass.sass"
 * "node_modules/@baloise/design-system-fonts/scss/fonts.import.sass.scss"
 * "node_modules/@baloise/design-system-fonts/scss/fonts.sass"
 * "node_modules/@baloise/design-system-tokens"
 * "node_modules/@baloise/design-system-tokens/dist"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.import.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.import.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.import.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.import.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.css.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.import.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.import.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.import.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.import.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.import.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.import.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.import.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.import.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.legacy.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/_tokens.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.css.import.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.css.import.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.css.import.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.css.import.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.css.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.import.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.import.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.import.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.import.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.legacy.import.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.legacy.import.sass.css"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.legacy.import.sass.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.legacy.import.sass.scss"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.legacy.sass"
 * "node_modules/@baloise/design-system-tokens/dist/tokens.sass"
InvalidDependenciesModuleWarning: Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "node_modules/"
 * "node_modules/@baloise"
 * "node_modules/@baloise/design-system-css"
 * and more ...
    at handleBuildDone (/Users/charles/Repos/cra-baloise-example/node_modules/webpack/lib/NormalModule.js:1042:7)
    at handleParseResult (/Users/charles/Repos/cra-baloise-example/node_modules/webpack/lib/NormalModule.js:991:12)
    at /Users/charles/Repos/cra-baloise-example/node_modules/webpack/lib/NormalModule.js:1098:4
    at processResult (/Users/charles/Repos/cra-baloise-example/node_modules/webpack/lib/NormalModule.js:800:11)
    at /Users/charles/Repos/cra-baloise-example/node_modules/webpack/lib/NormalModule.js:860:5
    at /Users/charles/Repos/cra-baloise-example/node_modules/loader-runner/lib/LoaderRunner.js:407:3
    at iterateNormalLoaders (/Users/charles/Repos/cra-baloise-example/node_modules/loader-runner/lib/LoaderRunner.js:233:10)
    at iterateNormalLoaders (/Users/charles/Repos/cra-baloise-example/node_modules/loader-runner/lib/LoaderRunner.js:240:10)
    at /Users/charles/Repos/cra-baloise-example/node_modules/loader-runner/lib/LoaderRunner.js:255:3
    at context.callback (/Users/charles/Repos/cra-baloise-example/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
 @ ./src/index.scss 8:6-375 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-345 83:0-345 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./src/index.tsx 6:0-22

webpack 5.75.0 compiled with 1 warning in 648 ms

hirsch88 commented 1 year ago

Hi @chester23491,

We are not able to reproduce your issue. We created a react 18 app with 12.8.1 and it works.

https://github.com/hirsch88/react-18-with-baloise-ds

chester23491 commented 1 year ago

Hey @hirsch88

Thank you for your help. I'm still getting this warning with your example:

~/Repos/react-18-with-baloise-ds [main ≡]> npm --version                 
9.5.0
~/Repos/react-18-with-baloise-ds [main ≡]> node --version
v18.14.2
~/Repos/react-18-with-baloise-ds [main ≡]> npm run build 

> my-app@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled with warnings.

Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
Invalid dependencies may lead to broken watching and caching.
As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
Globs: They are not supported. Pass absolute path to the directory as context dependencies.
The following invalid values have been reported:
 * "node_modules/"
 * "node_modules/@baloise"
 * "node_modules/@baloise/design-system-css"
 * and more ...

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

...

hirsch88 commented 1 year ago

Hi @chester23491

We are using node v16

library is yet not tested for v18

hirsch88 commented 1 year ago

Hi @chester23491

I installed now node v18 and tried it again and it works. Did you set the env variable SASS_PATH ?

chester23491 commented 1 year ago

After removing the SASS_PATH the warning disappeared. Thank you for support!

baloise-incubator / design-system