bit import fails when the package has a dependency on another bit component

[seed-of-apricot]

Description

When I try importing one of my bit components, it fails due to 404 not found error on https://registry.npmjs.org.

Context and additional information

I have this component.

When I run bit import chronolapselibrary.components/organisms/header, it shows

failed running npm install at C:\Users\[user]\src\[user]\chronolapselibrary\client\src\bit\organisms\header
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@bit%2fchronolapselibrary.components.molecules.brand-bar - Not found
npm ERR! 404 
npm ERR! 404  '@bit/[email protected]' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'header'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[user]\AppData\Roaming\npm-cache\_logs\2019-09-20T06_36_51_722Z-debug.log
see troubleshooting at https://docs.bit.dev/docs/install-components.html

run 'bit doctor' to get detailed workspace diagnosis and issue resolution.

Oddly, each time I run this command the component shown in 404 error is different (e.g., one time it's components.molecules.brand-bar but another time it might be components.atoms.brand-typography)

I have already added the scope by npm config set '@bit:registry' https://node.bit.dev and not sure how to solve this, could anyone please explain how to deal with this?

[itaymendel]

Have you checked to see the your .npmrc file is configured correctly?

If you are trying to install a private component you’ll need to authenticate.npmrc as well.

There are more references here https://docs.bit.dev/docs/installing-components

Additionally, when you run ‘bit login’ it configures things correctly automatically.

[seed-of-apricot]

Yes this is the corresponding part of the .npmrc.

;;;;
; npm userconfig file
; this is a simple ini-formatted file
; lines that start with semi-colons are comments.
; read `npm help config` for help on the various options
;;;;

"'@bit:registry'"=https://node.bit.dev
... // other settings

As you see from the link to the component, all the dependencies are public components.

Also, I have already logged in the remote so bit login shows already logged in.

[itaymendel]

Does this issue happens when you run the import command locally or over CI?

[GiladShoham]

@seed-of-apricot I just tried to import your component and it worked fine.
I would suggest trying to remove the package-lock.json and maybe clear npm cache npm cache clean --force
Also you might try to install this specific component on a new empty folder - npm i @bit/chronolapselibrary.components.molecules.brand-bar

[seed-of-apricot]

@itaymendel It happens when I do it locally, never tried CI option yet.

@GideonShils I did that cleaning but didn't work.
Also, I have tried this procedure which caused the same error.

1. Create a new folder.
2. Move there and open cmd in the folder.
3. npm init and enter until it's done.
4. bit init
5. bit import chronolapselibrary.components/organisms/header
6. The same error referred above occurs.

I will provide additional information such as configuration file if needed.

[itaymendel]

What is the output of npm config list? (if there are any user-tokens, please make sure to remove them).

[seed-of-apricot]

Here's the output.

C:\Users\[user]\src\[user]\chronolapselibrary\client>npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.9.0 node/v12.4.0 win32 x64"

; userconfig C:\Users\[user]\.npmrc
'@bit:registry' = "https://node.bit.dev"

; node bin location = C:\Program Files\nodejs\node.exe
; cwd = C:\Users\[user]\src\[user]\chronolapselibrary\client
; HOME = C:\Users\[user]
; "npm config ls -l" to show all defaults.

[itaymendel]

I think that there's a typo in the docs that configured your npmrc incorrectly.
Can you please edit the .npmrc and change '@bit:registry' = "https://node.bit.dev" to @bit:registry = "https://node.bit.dev" and see if it works?

If this resolves the issue, I'll fix Bit's docs.

[seed-of-apricot]

@itaymendel
The error message above was gone, but there's another one coming up,

C:\Users\[user]\src\[user]\chronolapselibrary\client>bit import chronolapselibrary.components/organisms/header
failed running npm install at C:\Users\[user]\src\[user]\chronolapselibrary\client\src\bit\organisms\header   
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bit/[email protected] postinstall: `node .bit.postinstall.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @bit/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[user]\AppData\Roaming\npm-cache\_logs\2019-09-22T17_08_52_139Z-debug.log
see troubleshooting at https://docs.bit.dev/docs/install-components.html

run 'bit doctor' to get detailed workspace diagnosis and issue resolution.

[itaymendel]

@GiladShoham this seems to be the same error that @Tallyb got in #1913

[GiladShoham]

@itaymendel I'm not sure it's the same issue. ELIFECYCLE can happen for various reasons.
@seed-of-apricot Looks like we making progress. we will solve it.
I would try the following:

1. clear the npm cache again now that the .npmrc set correctly.
2. If npm didn't delete the .bit.postinstall.js file, try to run it manually. just get into the folder and run node .bit.postinstall.js. see if it works (it might be some permission error).
3. try re-install in a new folder.

[seed-of-apricot]

@GiladShoham
I followed the procedure but it didn't work.

C:\Users\[user]\src\[user]\chronolapselibrary\commons>npm cache clean --force
npm WARN using --force I sure hope you know what you are doing.

// .bit.postinstall.js is now in the recycle bin

C:\Users\[user]\src\[user]\chronolapselibrary\commons>cd ../

C:\Users\[user]\src\[user]\chronolapselibrary>mkdir test && cd test

C:\Users\[user]\src\[user]\chronolapselibrary\test>git init
Initialized empty Git repository in C:/Users/[user]/src/[user]/chronolapselibrary/test/.git/  

C:\Users\[user]\src\[user]\chronolapselibrary\test>bit init
successfully initialized a bit workspace.

C:\Users\[user]\src\[user]\chronolapselibrary\test>bit import chronolapselibrary.components/organisms/header
failed running npm install at C:\Users\[user]\src\[user]\chronolapselibrary\test\components\organisms\header
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bit/[email protected] postinstall: `node .bit.postinstall.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @bit/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[user]\AppData\Roaming\npm-cache\_logs\2019-09-24T14_47_13_924Z-debug.log
see troubleshooting at https://docs.bit.dev/docs/install-components.html

run 'bit doctor' to get detailed workspace diagnosis and issue resolution.

I have another PC in the workplace so will see if it happens there as well.

[davidfirst]

Seems like it fails to npm install the components.atoms.brand-logo component. What happens when you try to import only @bit/chronolapselibrary/components.atoms.brand-logo? Do you get any error?

[seed-of-apricot]

@davidfirst
It worked :) So the original problem was due to the wrong npmrc settings that causes an error with any of my components randomly each time i execute the command, but now the problem seems only with brand-logo, right?

C:\Users\[user]\src\[user]\chronolapselibrary\test>bit import chronolapselibrary.components/atoms/brand-logo
npm WARN @bit/[email protected] requires a peer of react@>=16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=16.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@>=16.6.0 but none is installed. You must install peer dependencies yourself.
successfully ran npm install at C:\Users\[user]\src\[user]\chronolapselibrary\test\components\atoms\brand-logo

successfully imported one component
- up to date chronolapselibrary.components/atoms/brand-logo

C:\Users\[user]\src\[user]\chronolapselibrary\test>bit import chronolapselibrary.components/organisms/header --override
failed running npm install at C:\Users\[user]\src\[user]\chronolapselibrary\test\components\organisms\header
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bit/[email protected] postinstall: `node .bit.postinstall.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @bit/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[user]\AppData\Roaming\npm-cache\_logs\2019-09-24T15_10_06_266Z-debug.log
see troubleshooting at https://docs.bit.dev/docs/install-components.html

run 'bit doctor' to get detailed workspace diagnosis and issue resolution.

C:\Users\[user]\src\[user]\chronolapselibrary\test>bit import chronolapselibrary.components/organisms/navigation
npm WARN @bit/[email protected] requires a peer of react@>=16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @bit/[email protected] requires a peer of react@>=16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN @bit/[email protected] requires a peer of react@>=16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN @bit/[email protected] requires a peer of react-router-dom@>=5.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=16.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@>=16.6.0 but none is installed. You must install peer dependencies yourself.
successfully ran npm install at C:\Users\[user]\src\[user]\chronolapselibrary\test\components\organisms\navigation

successfully imported one component
- added chronolapselibrary.components/organisms/navigation new versions: 0.1.0, 0.1.1, currently used version 0.1.1

C:\Users\[user]\src\[user]\chronolapselibrary\test>

[davidfirst]

Interesting. What happens when you npm install only brand-logo? I guess you'll get the same error.

It seems like you're working on Windows and I fixed a similar issue a week ago, I'm wondering if it's the same thing.
Please run bit cmp chronolapselibrary.components/atoms/brand-logo@latest and let me know if you see anything about customResolvedPaths.

[seed-of-apricot]

Interestingly, the import of brand-logo has worked.

C:\Users\[user]\src\[user]\chronolapselibrary\client>bit import chronolapselibrary.components/molecules/brand-logo     
Fatal: There is a mismatch between the remote server version - "14.4.0" and your bit version - "14.3.0", please update   

error: component "chronolapselibrary.components/molecules/brand-logo" was not found

C:\Users\[user]\src\[user]\chronolapselibrary\client>bit import chronolapselibrary.components/atoms/brand-logo
Fatal: There is a mismatch between the remote server version - "14.4.0" and your bit version - "14.3.0", please update

npm WARN @bit/[email protected] requires a peer of react@>=16.9.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @material-ui/[email protected] requires a peer of react-dom@^16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react@>=16.6.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of react-dom@>=16.6.0 but none is installed. You must install peer 
dependencies yourself.
successfully ran npm install at C:\Users\[user]\src\[user]\chronolapselibrary\client\src\bit\atoms\brand-logo 

successfully imported one component
- up to date chronolapselibrary.components/atoms/brand-logo

C:\Users\[user]\src\[user]\chronolapselibrary\client>bit import chronolapselibrary.components/organisms/header
Fatal: There is a mismatch between the remote server version - "14.4.0" and your bit version - "14.3.0", please update   

failed running npm install at C:\Users\[user]\src\[user]\chronolapselibrary\client\src\bit\organisms\header   
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @bit/[email protected] postinstall: `node .bit.postinstall.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @bit/[email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[user]\AppData\Roaming\npm-cache\_logs\2019-09-25T07_01_00_765Z-debug.log

see troubleshooting at https://docs.bit.dev/docs/install-components.html

run 'bit doctor' to get detailed workspace diagnosis and issue resolution.

And yes I'm on Windows 10 x64 Version 1903.
This is the output of the command you have suggested.

C:\Users\[user]\src\[user]\chronolapselibrary\client>bit cmp chronolapselibrary.components/atoms/brand-logo@latest     
{
    "files": [
        {
            "file": "4c1a094233e4e81f7e16079fd6f828c4c48428d6",
            "relativePath": "src/components/atoms/BrandLogo.tsx",
            "name": "BrandLogo.tsx",
            "test": false
        }
    ],
    "mainFile": "src/components/atoms/BrandLogo.tsx",
    "dists": [
        {
            "file": "64ef67db68be2904452f334dc751797cd9f3ce91",
            "relativePath": "src/components/atoms/BrandLogo.js.map",
            "name": "BrandLogo.js.map"
        },
        {
            "file": "7ccf22c5f1617738fb99f56ccbcc311499381fe7",
            "relativePath": "src/components/atoms/BrandLogo.js",
            "name": "BrandLogo.js",
            "test": false
        }
    ],
    "compiler": "bit.envs/compilers/[email protected]",
    "bindingPrefix": "@bit",
    "tester": "bit.envs/testers/[email protected]",
    "log": {
        "message": "",
        "date": "1568785571607",
        "username": "seed-of-apricot",
        "email": "[email protected]"
    },
    "ci": {},
    "docs": [],
    "dependencies": [
        {
            "id": {
                "scope": "chronolapselibrary.assets",
                "name": "images/logo",
                "version": "0.1.0"
            },
            "relativePaths": [
                {
                    "sourceRelativePath": "src/assets/images/logo/index.svg",
                    "destinationRelativePath": "src/assets/images/logo/index.svg",
                    "importSpecifiers": [
                        {
                            "mainFile": {
                                "isDefault": true,
                                "name": "logo"
                            }
                        }
                    ],
                    "isCustomResolveUsed": true,
                    "importSource": "@assets/images/logo/index.svg"
                }
            ]
        }
    ],
    "devDependencies": [],
    "compilerDependencies": [],
    "testerDependencies": [],
    "flattenedDependencies": [
        {
            "scope": "chronolapselibrary.assets",
            "name": "images/logo",
            "version": "0.1.0"
        }
    ],
    "flattenedDevDependencies": [],
    "flattenedCompilerDependencies": [],
    "flattenedTesterDependencies": [],
    "packageDependencies": {
        "@material-ui/core": "^4.4.2"
    },
    "devPackageDependencies": {
        "@types/react": "^16.9.2"
    },
    "peerPackageDependencies": {
        "react": ">=16.9.0"
    },
    "compilerPackageDependencies": {},
    "testerPackageDependencies": {},
    "customResolvedPaths": [],
    "overrides": {},
    "packageJsonChangedProps": {}
}

[GiladShoham]

@seed-of-apricot @davidfirst
I see there is custom resolve in the brand-logo component.
@seed-of-apricot , can you try npm install brand-logo and not bit import it?
It's important since you have an issue with the post-install script which not exist on bit import (bit handle it himself during import).
Check after trying to install if the script file exists .bit.postinstall.js

[seed-of-apricot]

Is this installation right? I was told that the component did not have package.json.

C:\Users\[user]\src\[user]\chronolapselibrary\client>npm i @bit/chronolapselibrary.components.atoms.brand-logo
npm ERR! code ENOLOCAL
npm ERR! Could not install from "src\bit\atoms\brand-logo" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[user]\AppData\Roaming\npm-cache\_logs\2019-09-25T19_14_42_126Z-debug.log

P.S. Should I change the title of the issue as the first problem has been already resolved?

[GiladShoham]

It will be best if you will open a new issue and reference here.
I wonder where this is coming from src\bit\atoms\brand-logo

[seed-of-apricot]

@GiladShoham
Sorry for confusing, the package folder had been deleted but the registration was left in package.json.

The result after deleting the registration was the same though.

C:\Users\[user]\src\[user]\chronolapselibrary\client>npm i @bit/chronolapselibrary.components.atoms/brand-logo
npm ERR! code ENOLOCAL
npm ERR! Could not install from "@bit\chronolapselibrary.components.atoms\brand-logo" as it does not contain a package.json file.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\[user]\AppData\Roaming\npm-cache\_logs\2019-09-27T02_20_23_342Z-debug.log

I will make a new thread later.

[lemzoo]

For me the error was due to the registry of node modules for this dependency.
You have to set the right registryvia:
npm config set ‘@bit:registry’ https://node.bit.dev
And then install the dependency via this npm i @bit/mui-org.material-ui as an example of package located in bit repository