FormidableLabs / inspectpack

An inspection tool for Webpack frontend JavaScript bundles.
MIT License
591 stars 20 forks source link

What does a report mean that says "1 resolved, 1 installed"? #136

Open elliotdavies opened 4 years ago

elliotdavies commented 4 years ago

I'm seeing the following (verbose) report for one of my projects, and I'm not sure how to interpret it:

react-router-dom (Found 1 resolved, 1 installed, 1 depended. Latest 5.1.2.)
  5.1.2
    path/to/my-project/~/react-router-dom
      * Dependency graph
        my-project@1.0.0 -> react-router-dom@^5.0.1
      * Duplicated files in main.js
        react-router-dom/esm/react-router-dom.js (S, 9997)

My best guess would be that it means I don't actually have any duplicated packages (hence 1,1,1), but that somehow I'm consuming the same package twice in different ways. Is that possible? Could I somehow be consuming it once as CJS and once as ESM, and that's what Inspectpack is picking up on?

I'm using the DuplicatesPlugin in my dev Webpack configuration, so main.js is the output from webpack-dev-server. I see similar reports for other libraries, not just react-router-dom.

Many thanks (and thanks for putting this tool together!)

ryan-roemer commented 4 years ago

Hi @elliotdavies !

Can you run through the steps outlined in https://github.com/FormidableLabs/inspectpack/issues/125#issuecomment-569348664 ? The separate duplicates and versions reports will give us more to work with.

Thanks!

elliotdavies commented 4 years ago

Hi @ryan-roemer, thanks for getting back to me.

Here's everything from the duplicates report related to react-router-dom

* react-router-dom/esm/react-router-dom.js
  * Meta: Files 2, Sources 2, Bytes 18360
  0. (Files 1, Sources 1, Bytes 8363)
    (8363) /workspace-root/node_modules/react-router-dom/esm/react-router-dom.js
  1. (Files 1, Sources 1, Bytes 9997)
    (9997) /workspace-root/path/to/my-project/node_modules/react-router-dom/esm/react-router-dom.js
* react-router-dom/package.json
  * Meta: Files 2, Sources 2, Bytes 3542
  0. (Files 1, Sources 1, Bytes 2184)
    (2184) /workspace-root/node_modules/react-router-dom/package.json
  1. (Files 1, Sources 1, Bytes 1358)
    (1358) /workspace-root/path/to/my-project/node_modules/react-router-dom/package.json

And from the versions report:

* react-router-dom
  * 5.1.2
    * path/to/my-project/~/react-router-dom
      * Num deps: 1, files: 2
      * my-project@1.0.0 -> react-router-dom@^5.0.1

As to the other questions in the comment you linked:

ryan-roemer commented 4 years ago

Thanks @elliotdavies !

Are /workspace-root/path/to/my-project/node_modules/react-router-dom and /workspace-root/node_modules/react-router-dom real directories?

If so, can you post the versions of each? (Looks like react-router-dom@^5.0.1 for the path/to/my-project but I'd like to see a confirmation of that vs a symlink or something.

Thanks!

elliotdavies commented 4 years ago

They seem to be! The versions are:

And for what it's worth I'm requesting ^5.0.1 in my-project

ryan-roemer commented 4 years ago

Can I get the dependencies + devDependencies sections of the package.json files for both locations (if they exist)? Feel free to scrub out any private packages.

Thanks!

elliotdavies commented 4 years ago

Sure - there aren't any dependencies specified at the workspace root, but in my-project/package.json we have:

  "dependencies": {
    "@date-io/date-fns": "1.3.11",
    "@emotion/core": "^10.0.17",
    "@sentry/browser": "5.7.1",
    "date-fns": "2.1.0",
    "launchdarkly-react-client-sdk": "^2.14.0",
    "material-table": "^1.45.0",
    "notistack": "^0.8.9",
    "react": "^16.8.0",
    "react-dom": "^16.8.0",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-select": "^3.0.4",
    "react-spinners": "^0.6.1",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "yup": "^0.27.0"
  },
  "devDependencies": {
    "@types/react": "^16.9.2",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "5.1.0",
    "@types/yup": "^0.26.24",
    "typescript": "^3.6.4",
    "webpack-stats-plugin": "^0.3.1"
  }

with a couple of internal config packages removed.

(Of course there are many other apps and packages in the workspace that will be contributing to the contents of the hoisted /workspace-root/node-modules.)

ryan-roemer commented 4 years ago

I think I'm going to need the full stats.json object to figure out more what's going on. Can you provide a sanitized version for me? Generally this means:

You can either post here if satisfactorily sanitized or if you feel more comfortable, create a private gist to share with me, or some other means...

Thanks!

elliotdavies commented 4 years ago

@ryan-roemer Sorry for the delay! Even after sanitizing the stats.json file it was much too big to put in a gist, so I've created a repo here: https://github.com/elliotdavies/inspectpack-report-debugging

ryan-roemer commented 4 years ago

Thanks for the stats object. I'm able to see what you see for -a duplicates. I'm unable for -a versions because that needs node_modules on disk.

Can you change directory to project root and run the CLI commands again for versions and see if you get different results?

elliotdavies commented 4 years ago

I don't quite understand why, but running inspectpack -s sanitized-stats.json -a versions -f text results in this:

inspectpack --action=versions
=============================

## Summary
* Packages with skews:      0
* Total resolved versions:  0
* Total installed packages: 0
* Total depended packages:  0
* Total bundled files:      0

With the unsanitized stats.json, running the same command gets me this:

inspectpack --action=versions
=============================

## Summary
* Packages with skews:      12
* Total resolved versions:  18
* Total installed packages: 18
* Total depended packages:  35
* Total bundled files:      61

## `main.js`
* @babel/runtime
  * 7.5.5
    * ~/@babel/runtime
      * Num deps: 10, files: 30
      * my-project@1.0.0 -> react-redux@^7.1.0 -> @babel/runtime@^7.4.5
      * my-project@1.0.0 -> react-router-dom@^5.0.1 -> @babel/runtime@^7.1.2
      * my-project@1.0.0 -> react-router-dom@^5.0.1 -> history@^4.9.0 -> @babel/runtime@^7.1.2
      * my-project@1.0.0 -> react-router-dom@^5.0.1 -> react-router@5.1.2 -> @babel/runtime@^7.1.2
      * my-project@1.0.0 -> react-router-dom@^5.0.1 -> react-router@5.1.2 -> mini-create-react-context@^0.3.0 -> @babel/runtime@^7.4.0
      * my-project@1.0.0 -> react-select@^3.0.4 -> @babel/runtime@^7.4.4
      * my-project@1.0.0 -> react-select@^3.0.4 -> @emotion/core@^10.0.9 -> @babel/runtime@^7.4.3
      * my-project@1.0.0 -> react-select@^3.0.4 -> react-transition-group@^2.2.1 -> dom-helpers@^3.4.0 -> @babel/runtime@^7.1.2
      * my-project@1.0.0 -> react-spinners@^0.6.1 -> @emotion/core@^10.0.15 -> @babel/runtime@^7.4.3
      * my-project@1.0.0 -> yup@^0.27.0 -> @babel/runtime@^7.0.0
  * 7.6.0
    * ~/@emotion/core/~/@babel/runtime
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> @emotion/core@^10.0.17 -> @babel/runtime@^7.5.5
* @emotion/cache
  * 10.0.15
    * ~/@emotion/cache
      * Num deps: 3, files: 1
      * my-project@1.0.0 -> react-select@^3.0.4 -> @emotion/cache@^10.0.9
      * my-project@1.0.0 -> react-select@^3.0.4 -> @emotion/core@^10.0.9 -> @emotion/cache@^10.0.15
      * my-project@1.0.0 -> react-spinners@^0.6.1 -> @emotion/core@^10.0.15 -> @emotion/cache@^10.0.15
  * 10.0.17
    * ~/@emotion/core/~/@emotion/cache
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> @emotion/core@^10.0.17 -> @emotion/cache@^10.0.17
* @emotion/core
  * 10.0.15
    * path/to/my-project/~/react-select/~/@emotion/core
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> react-select@^3.0.4 -> @emotion/core@^10.0.9
  * 10.0.16
    * path/to/my-project/~/react-spinners/~/@emotion/core
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> react-spinners@^0.6.1 -> @emotion/core@^10.0.15
  * 10.0.17
    * ~/@emotion/core
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> @emotion/core@^10.0.17
* @emotion/serialize
  * 0.11.9
    * ~/@emotion/serialize
      * Num deps: 3, files: 1
      * my-project@1.0.0 -> @emotion/core@^10.0.17 -> @emotion/css@^10.0.14 -> @emotion/serialize@^0.11.8
      * my-project@1.0.0 -> react-select@^3.0.4 -> @emotion/core@^10.0.9 -> @emotion/serialize@^0.11.9
      * my-project@1.0.0 -> react-spinners@^0.6.1 -> @emotion/core@^10.0.15 -> @emotion/serialize@^0.11.9
  * 0.11.10
    * ~/@emotion/core/~/@emotion/serialize
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> @emotion/core@^10.0.17 -> @emotion/serialize@^0.11.10
* dom-helpers
  * 3.4.0
    * ~/dom-helpers
      * Num deps: 1, files: 3
      * my-project@1.0.0 -> react-select@^3.0.4 -> react-transition-group@^2.2.1 -> dom-helpers@^3.4.0
* mini-create-react-context
  * 0.3.2
    * ~/mini-create-react-context
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> react-router-dom@^5.0.1 -> react-router@5.1.2 -> mini-create-react-context@^0.3.0
* react
  * 16.8.6
    * ~/react
      * Num deps: 1, files: 2
      * my-project@1.0.0 -> react@^16.8.0
* react-dom
  * 16.11.0
    * path/to/my-project/~/react-dom
      * Num deps: 1, files: 4
      * my-project@1.0.0 -> react-dom@^16.8.0
* react-is
  * 16.8.6
    * ~/react-is
      * Num deps: 5, files: 2
      * my-project@1.0.0 -> notistack@^0.8.9 -> hoist-non-react-statics@^3.3.0 -> react-is@^16.7.0
      * my-project@1.0.0 -> notistack@^0.8.9 -> prop-types@^15.7.2 -> react-is@^16.8.1
      * my-project@1.0.0 -> notistack@^0.8.9 -> react-is@^16.8.6
      * my-project@1.0.0 -> react-redux@^7.1.0 -> react-is@^16.8.6
      * my-project@1.0.0 -> react-router-dom@^5.0.1 -> react-router@5.1.2 -> react-is@^16.6.0
* react-router
  * 5.1.2
    * path/to/my-project/~/react-router
      * Num deps: 1, files: 1
      * my-project@1.0.0 -> react-router-dom@^5.0.1 -> react-router@5.1.2
* react-router-dom
  * 5.1.2
    * path/to/my-project/~/react-router-dom
      * Num deps: 1, files: 2
      * my-project@1.0.0 -> react-router-dom@^5.0.1
* scheduler
  * 0.13.6
    * ~/scheduler
      * Num deps: 1, files: 4
      * my-project@1.0.0 -> react@^16.8.0 -> scheduler@^0.13.6
  * 0.17.0
    * path/to/my-project/~/scheduler
      * Num deps: 1, files: 4
      * my-project@1.0.0 -> react-dom@^16.8.0 -> scheduler@^0.17.0