Bit: Components shouldn't be distributed with its dependencies

Created on 4 Oct 2019  ·  20Comments  ·  Source: teambit/bit

Describe the bug

For example this component I've exported today.

https://bit.dev/mobx/react/use-autorun/~console

From that log, you can see it got to build with all dependencies. One would think these are used during a build only, but they will remain there when component is consumed.

Not only this is rather wasteful to have duplicate dependencies everywhere, but for deps that rely on some sort of global state, it's a problem. For example, React Hooks fails miserably because of a different instance of React in memory.

Steps to Reproduce

  1. yarn add react
  2. yarn add @bit/mobx.react.use-autorun
  3. get a full package with three React packages

_Note there is no "react" specified in "dependecies" in that component, only "dev" and "peer"._

Expected Behavior

There shouldn't be any node_modules distributed with the components.

Specifications

  bit version   : 14.4.0
  node version  : v10.16.0
  npm version   : 6.9.0
  yarn version  : 1.16.0
  platform      : win32


╔════════════════════╤═════════════════════════════════╤════════════════════════════════════════════════════════╤════════╗
║ category           │ name                            │ description                                            │ status ║
╟────────────────────┼─────────────────────────────────┼────────────────────────────────────────────────────────┼────────╢
║ configuration      │ validate workspace's bit config │ validate workspace configuration object                │ passed ║
╟────────────────────┼─────────────────────────────────┼────────────────────────────────────────────────────────┼────────╢
║ vendors            │ validate git exec               │ validate that git executable found                     │ passed ║
╟────────────────────┼─────────────────────────────────┼────────────────────────────────────────────────────────┼────────╢
║ internal store     │ check orphan refs               │ checks for empty internal refs in local workspace      │ passed ║
╟────────────────────┼─────────────────────────────────┼────────────────────────────────────────────────────────┼────────╢
║ local environments │ check environment symlinks      │ validate generated symlinks for workspace environments │ passed ║
╟────────────────────┼─────────────────────────────────┼────────────────────────────────────────────────────────┼────────╢
║ vendors            │ validate npm exec               │ validate that npm executable found                     │ passed ║
╟────────────────────┼─────────────────────────────────┼────────────────────────────────────────────────────────┼────────╢
║ vendors            │ validate yarn exec              │ validate that yarn executable found                    │ passed ║
╟────────────────────┼─────────────────────────────────┼────────────────────────────────────────────────────────┼────────╢
║ core               │ validate bit version            │ validate that bit version is up to date                │ passed ║
╚════════════════════╧═════════════════════════════════╧════════════════════════════════════════════════════════╧════════╝
arebuild areenvs typbug
Source
picture FredyC

Most helpful comment

Yea, I got it, it figures, it's a classic case of different path delimiters for Windows 🙄 It will just copy those node_modules and also the "dist/dist" subfolder which I noticed earlier.

I don't know where the original source code is, but the culprit looks like this.

const ignoreFunction = function (file:string, stats: Stats){
    return !!~file.indexOf('/node_modules/') || !!~file.indexOf('/dist/') || !!~file.indexOf('.dependencies')
}

.bit/components/compilers/typescript/bit.envs/3.0.34/ts-compiler/src/compile.ts

I wonder where are other places with similar constructs. Does each compiler need to handle it separately and possibly includes same issue?

picture FredyC on 14 Oct 2019
🎉1 👍1

All 20 comments

I have noticed when tagging components locally, the node_modules folder is created in a "dist" folder instead of having those deps installed to the root folder. I believe that's wrong as the same thing happens when components are built at Bit and the "dist" folder is packaged as is.

I've packaged that local output

You might also notice there is another "dist" folder inside it with some duplicated inter-dependencies. That's not related to this issue, but it's wrong nonetheless imo.

FredyC picture FredyC on 4 Oct 2019

Components are shipped with everything it's needed in order to run.
Otherwise, as consumer you will have to start installing tons of packages you are not really aware (and don't want to be aware of).
In case you consume it using bit import, you can always use the --skip-npm-install flag to skip the dependencies installation.
The right solution, however, is that such kind of dependencies (which should be a singleton in the project) should be defined as peer dependencies rather than a regular one.
That true for example for react and react-dom, you can see more docs about it here:
https://docs.bit.dev/docs/react-guidelines#add-react-libraries-as-peer-dependencies-with-relaxed-versions
I saw you did configure your components with peer dependencies and tried to follow your STR, but I only get one instance of React.
When taking your zip file, and run yarn inside, I didn't get any copy of react at all. (only @types/react)

GiladShoham picture GiladShoham on 6 Oct 2019

Components are shipped with everything it's needed in order to run.

Wait, what? :) That should be package.json and the built code only, not node_modules folder, that's wrong for sure. The package manager should take care of installing stuff based on package.json information, that's how the whole NPM ecosystem works, right?

I am not sure what you have actually tried, but if you follow the reproduction steps outlined above exactly, in the empty folder, I am certain you get THREE "react" packages.

node_modules/react
node_modules/@bit/mobx.react.use-autorun/dist/node_modules/react
node_modules/@bit/mobx.react.use-disposable/dist/node_modules/react

Clearly it's wrong there is node_modules inside the dist. Perhaps you did not look into these, it's fairly hidden.

And on top of that for some weird reason, the package.json is missing from those nested packages, so it's unclear which versions are those. That's some truly messed up stuff 😕

FredyC picture FredyC on 6 Oct 2019

When taking your zip file, and run yarn inside, I didn't get any copy of react at all. (only @types/react)

Why did you actually get @types/react? It's listed as peerDependency only, it shouldn't be installed. I don't have it there, so I am confused about why it would be there for you.

FredyC picture FredyC on 6 Oct 2019

@FredyC Ok, I just tried it again and it indeed looks very strange. (not sure what exactly I did earlier which worked as expected).
That's was probably the source of my confusion.
I'm looking into it, will update soon.

GiladShoham picture GiladShoham on 6 Oct 2019

Ok, I understand why I thought it worked - I didn't look into the dist folder, just in the node_modules outside the dist which looks fine.
In the case of dist, of course, you are right and it shouldn't contain the node_modules.
It looks like an issue with the ts compiler (at first glance) still investigating.

GiladShoham picture GiladShoham on 6 Oct 2019

@GiladShoham We already talked with @davidfirst about this in Gitter on Friday and he agreed it's compiler issue, that's why he assigned it to @qballer, but I would be surely grateful if you can have a look too :)

FredyC picture FredyC on 6 Oct 2019

something is weird here.
I tried to just re-build the component with the same compiler version and it worked as expected (using --no-cache flag).
I'm not sure why it happened, but it might not be a proper compiler issue.
It might be something with a specific bit version with this compiler or maybe more reasonable a specific workspace configuration / state which causes this.
We will continue to investigate it, but I believe it won't be easy to reproduce. the component state is already corrupted and we need somehow to reproduce a build that creates this state.
(running bit build on the component right now without any change will just take the last build results from the component data).

As a workaround, you can just re-tag the component (I would make a small change to make sure it's rebuilt from scratch, adding a space or change a comment for example).

If you somehow able to reproduce it on a clean build - (just delete the dist folder, and run bit build --no-cache if you didn't change the code, or make a small change so you won't need the --no-cache), it will be awesome and it will help us a lot to understand the root cause.

I'll keep this open for now until we have more info about it.

GiladShoham picture GiladShoham on 6 Oct 2019
👀1 👍1

This is totally reproducible for me. Upon your advice, I have..

  • deleted dist and just to be sure also the .bit and node_modules
  • reinstalled deps with yarn
  • bit import
  • changed some source files
  • bit tag --all

At this point looking in the dist folder I already see node_modules inside the same way as when it's installed for consumption. I haven't tried exporting, I think it's fair assumption it will end up the same way.

Here I have packaged clean repo and I am really curious if you can come up with the same result.

mobx-react-utils.zip

Edit: Also tried just now the latest 14.4.1 if it helps by any chance ... but nope, same result.
Edit2: Another experiment switching packageManager in config to npm ... same result

FredyC picture FredyC on 6 Oct 2019

bit build ID --no-cache produces an output where you can actually see it's writing those node_modules in there. It feels more like filesystem copy operation. It doesn't seem any package manager is actually involved. I am not sure from where it would be making that copy and why those specific packages.


Output

D:\workspace\github\mobx-react-utilsdist\useDisposable.d.ts
D:\workspace\github\mobx-react-utilsdist\useDisposable.js
D:\workspace\github\mobx-react-utilsdist\useLiveReaction.d.ts
D:\workspace\github\mobx-react-utilsdist\useDisposable.js.map
D:\workspace\github\mobx-react-utilsdist\useLiveReaction.js
D:\workspace\github\mobx-react-utilsdist\useLiveReaction.js.map
D:\workspace\github\mobx-react-utilsdistpackage.json
D:\workspace\github\mobx-react-utilsdist\tsconfig.json
D:\workspace\github\mobx-react-utilsdistdist\useDisposable.js.map
D:\workspace\github\mobx-react-utilsdistdist\useDisposable.js
D:\workspace\github\mobx-react-utilsdistdist\useLiveReaction.js.map
D:\workspace\github\mobx-react-utilsdistdist\useLiveReaction.js
D:\workspace\github\mobx-react-utilsdistnode_modules.bin\loose-envify
D:\workspace\github\mobx-react-utilsdistnode_modules.bin\loose-envify.cmd
D:\workspace\github\mobx-react-utilsdistnode_modules\csstypeindex.js.flow
D:\workspace\github\mobx-react-utilsdistnode_modules\csstype\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\csstype\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\csstypepackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\js-tokens\CHANGELOG.md
D:\workspace\github\mobx-react-utilsdistnode_modules\js-tokensindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\js-tokens\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\js-tokens\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\js-tokenspackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envify\cli.js
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envifyindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envify\custom.js
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envify\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envify\loose-envify.js
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envifypackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envify\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\loose-envify\replace.js
D:\workspace\github\mobx-react-utilsdistnode_modules\object-assignindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\object-assign\license
D:\workspace\github\mobx-react-utilsdistnode_modules\object-assignpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\object-assign\readme.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@types\prop-typespackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@types\prop-types\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@types\prop-types\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@typesreact\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@typesreact\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@typesreactpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\CHANGELOG.md
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\checkPropTypes.js
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\factoryWithThrowingShims.js
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\factory.js
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\factoryWithTypeCheckers.js
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-typesindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-typespackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\prop-types.js
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\prop-types.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\prop-types\lib\ReactPropTypesSecret.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\build-info.json
D:\workspace\github\mobx-react-utilsdistnode_modulesreactindex.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\README.md
D:\workspace\github\mobx-react-utilsdistnode_modulesreactpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\cjsreact.development.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\cjsreact.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\umdreact.development.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\umdreact.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact\umdreact.profiling.min.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-is\build-info.json
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-isindex.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-is\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-ispackage.json
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-is\README.md
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-is\cjsreact-is.development.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-is\cjsreact-is.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-is\umdreact-is.development.js
D:\workspace\github\mobx-react-utilsdistnode_modulesreact-is\umdreact-is.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\CHANGELOG.md
D:\workspace\github\mobx-react-utilsdistnode_modules\mobxpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\lib\mobx.js
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\lib\mobx.es6.js
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\lib\mobx.js.flow
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\lib\mobx.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\lib\mobx.module.js
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\lib\mobx.umd.js
D:\workspace\github\mobx-react-utilsdistnode_modules\mobx\lib\mobx.umd.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposablepackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledist\tsconfig.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledist\useDisposable.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledist\useDisposable.js.map
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistdist\useDisposable.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistdist\useDisposable.js.map
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules.bin\loose-envify.cmd
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules.bin\loose-envify
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\csstypeindex.js.flow
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\csstype\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\csstypepackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\csstype\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\object-assignindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\object-assignpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\object-assign\license
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\object-assign\readme.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\js-tokens\CHANGELOG.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\js-tokensindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\js-tokenspackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\js-tokens\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\js-tokens\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envify\cli.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envifyindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envify\custom.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envify\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envify\loose-envify.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envifypackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envify\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\loose-envify\replace.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\CHANGELOG.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\checkPropTypes.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\factory.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\factoryWithTypeCheckers.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\factoryWithThrowingShims.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-typesindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-typespackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\prop-types.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\prop-types.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\prop-types\lib\ReactPropTypesSecret.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\@types\prop-types\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\@types\prop-types\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\@types\prop-typespackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\@typesreact\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\@typesreactpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modules\@typesreact\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-is\build-info.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-ispackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-is\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-is\LICENSED:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-isindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-is\cjsreact-is.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-is\cjsreact-is.development.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-is\umdreact-is.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact-is\umdreact-is.development.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\build-info.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreactindex.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\LICENSE
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreactpackage.json
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\README.md
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\cjsreact.development.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\cjsreact.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\umdreact.development.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\umdreact.production.min.js
D:\workspace\github\mobx-react-utilsdistnode_modules\@bit\mobx.react.use-disposabledistnode_modulesreact\umdreact.profiling.min.js

Btw, isn't it more like that at some point it adds those dependencies (somehow) for building purposes, but they are never removed after building? Or a better approach could be to set up some exclusion rules about what goes into the capsule (@davidfirst mentioned that's a new thing).

FredyC picture FredyC on 6 Oct 2019

Do you need any more information from me? Did you manage to reproduce the issue?

FredyC picture FredyC on 11 Oct 2019

@FredyC , sorry for the late response (we had some holidays), I was trying to work with the zip file you attached (mobx-react-utils.zip), but after running bit import and bit status, I got an error error: component "mobx.react/[email protected]" was not found, so I guess things were changed in your collection since then.

Then I was trying to work with the original component mobx.react/use-autorun, where I can clearly see the issue. However, as Gilad mention, when re-building the component using --no-cache, it does write it correctly, without the node_modules directory. See below the output.
Could you provide a component I can import, then run bit build --no-cache and see the output you attached before? it'd be a great help.
Thanks.

➜  wp bit build mobx.react/use-autorun --no-cache
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/useAutorun.d.ts
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/useAutorun.js
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/useDisposable.d.ts
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/useDisposable.js
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/useAutorun.js.map
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/useDisposable.js.map
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/tsconfig.json
/Users/davidfirst/temp/playground/wp/components/use-autorun/dist/package.json
➜  wp ll components/use-autorun/dist/node_modules
ls: components/use-autorun/dist/node_modules: No such file or directory
ls: components/use-autorun/dist/node_modules: No such file or directory
➜  wp
davidfirst picture davidfirst on 14 Oct 2019

@davidfirst Thanks for having a look at it.

I am not sure how 0.2.5 got in there, it was never published. I suppose I took the bitmap in the wrong moment :) When you edit it manually to 0.2.4, it will import and reproduction is still the same. I did try to run exactly the same as you did and it still writes those node_modules there for me. It almost start to feel like it's happening on my computer only for some reason. Sadly I don't have any other place I could try it at.

Updated repro with fixed bitmap

FredyC picture FredyC on 14 Oct 2019

@FredyC , according to the specification you mentioned I see that it's a Windows machine, so I'm planning to run it on my Windows VM. (I'm still fighting with it, will update once it's up and running).

davidfirst picture davidfirst on 14 Oct 2019

@davidfirst Perhaps if you can point me toward the location in the source code where is that logging of written files happening, I can try to track it down from where are those node_modules coming.

FredyC picture FredyC on 14 Oct 2019

Yea, I got it, it figures, it's a classic case of different path delimiters for Windows 🙄 It will just copy those node_modules and also the "dist/dist" subfolder which I noticed earlier.

I don't know where the original source code is, but the culprit looks like this.

const ignoreFunction = function (file:string, stats: Stats){
    return !!~file.indexOf('/node_modules/') || !!~file.indexOf('/dist/') || !!~file.indexOf('.dependencies')
}

.bit/components/compilers/typescript/bit.envs/3.0.34/ts-compiler/src/compile.ts

I wonder where are other places with similar constructs. Does each compiler need to handle it separately and possibly includes same issue?

FredyC picture FredyC on 14 Oct 2019
🎉1 👍1

@FredyC cool! Thanks for debugging it! :) yeah, that looks like it.
Normally, we have AppVeyor to catch these types of bugs for Windows for Bit core.
Compilers are more tricky in this aspect.
This line of code seems to be relevant only for typescript, which uses the capsule.
I'm going to fix it now and will update here with the results.

Thanks for the findings!

davidfirst picture davidfirst on 14 Oct 2019
👍1

@FredyC , Done. I exported a new version v3.0.35 of the typescript compiler.
I double-checked that on my Windows environment with the new compiler your component is generating the dists without node_modules content.

davidfirst picture davidfirst on 14 Oct 2019

Awesome and I can also confirm it's building without node_modules. Thank you for the quick fix, such a nasty bug :)

FredyC picture FredyC on 14 Oct 2019
😄1

Thanks, @FredyC !!!
@qballer FYI

GiladShoham picture GiladShoham on 15 Oct 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

itaymendel picture itaymendel  ·  10Comments
itaymendel picture itaymendel  ·  16Comments
AlexanderKaran picture AlexanderKaran  ·  10Comments
yairEO picture yairEO  ·  19Comments
seed-of-apricot picture seed-of-apricot  ·  21Comments