when importing a component, symlink points to source when specifying different dist target

[odedre]

Description

I specified different source and dist target and then imported a component.
when specifying a different dist target, the sym link in the package.json points to the source folder, not the dist.

I'm using a create react app.

source code should go in /components and dist in bit-dist

├── README.md
├── components
│   └── imdb-api
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   ├── imdb.ts
│   │   └── interfaces.ts
├── package-lock.json
├── package.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── bit-dist
│   │   └── imdb-api
│   │   ├── package.json
│   │   ├── src
│   │   │   ├── imdb.js
│   │   │   ├── imdb.js.map
│   │   │   ├── interfaces.js
│   │   │   └── interfaces.js.map

package.json:

"bit": {
    "env": {},
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm",
    "dist": {
      "entry": "components",
      "target": "src/bit-dist"
    }
  }

Expected Behavior

the link in package.json should point to the dist target

"@bit/open-apis.apis.imdb-api": "file:./src/bit-dist/imdb-api"

Actual Behavior

the link in package.json should point to the source target

"@bit/open-apis.apis.imdb-api": "file:./components/imdb-api"

Steps to Reproduce the Problem

1. run create react app
2. bit init
3. add the following to bit object in package.json:
   "dist": {
   "entry": "components",
   "target": "src/bit-dist"
   }

4.bit import open-apis.apis/imdb-api
5. import the component to app.js (e.g. import imdb from '@bit/open-apis.apis.imdb-api')
6. package.json link points to /components.

*at this point you should see the following error:

./src/App.js
Module not found: Can't resolve '@bit/open-apis.apis.imdb-api

Specifications

• Bit version: 14.1.1
• Node version: v10.15.3
• yarn version:1.13.0
• Platform: macOs
• Bit compiler (include version): bit.envs/compilers/typescript@3.0.0
• Bit tester (include version): bit.envs/testers/mocha@5.0.2

[davidfirst]

Actually, the link in package.json seems to be correct. It should link to the source and not to the dist.
The way how Bit gets the dist directory up to date with all node-modules is done with the link process. So, when running bit install, Bit first run npm install on the source, then, symlink the packages needed for the dist.

However, I do see another issue here.
The main property of the src/bit-dist/imdb-api/package.json points to src/imdb.ts. It should point to src/imdb.js.

@odedre , changing the extension of the main from .ts to .js will fix the issue you're having?

[odedre]

@davidfirst In order for this to work I needed to change both the components/imdb-api/package.json and src/bit-dist/imdb-api/package.json. that fixed the issue for me

[davidfirst]

@odedre , can you describe the issue you're having? Did you run something and got an error? if so, how do I reproduce it?

[itaymendel]

@davidfirst , there seem to be a set of issues when trying to use create-react-app with imported bit-typescript components. All issues @odedre opened during the last couple of days were specific edge cases he encountered.

I think that we should handle all of them when setting a demo CRA project that imports a TS component. Once we have a base project to use, and we get CRA's compilation errors - we can resolve the issues one-by-one, without the need to constantly open small bugs.

[davidfirst]

It's fixed and merged into master.
I ended up changing the package.json inside the dist directory to point to the dist file. There was no need to touch the package.json of the source.

[GiladShoham]

@davidfirst I'm not sure this is enough to fix the problem.
The problem is the root's packge.json which point to the source.
Therefore when npm creates the symlink it will create it to the src.
Which means when you require the component you will get the source instead of dist.
Actually, you can't get to the dist without relative require.
@odedre Please read and comment as well.
Re-open for discussion

[davidfirst]

@GiladShoham , I tested it by requiring the component using module path and it's working.
I should have mentioned it, the symlink of node_modules/@bit/component-name points to the dist. This part was working before, I didn't change it.
The only issue was that in the package.json of the dist, the main was pointing to the file with .ts extension instead of the .js. This was fixed.
You can also check out the e2e-test I've written to see how it's working by requiring the component using a module path.
https://github.com/teambit/bit/pull/1654/files#diff-9563bb6c5875e38d8b16984a64818b5bR473

[GiladShoham]

@odedre I saw that the symlink points to the correct place (dist) after import.
However after npm install in the root, npm will re-create the link to point to the source.
(running bit link after npm i or bit install instead of npm i will make it work.

I'm wondering what should be the value in the root's package.json. The source path or dist path.

[flavioespinoza]

I had this problem and solved it by doing bit install after yarn add @bit/..component-name.

Thanks @ GiladShoham :)