title: How to set up a NPM Typescript package during development to maintain import syntax?
body: <p>I am developing a NPM typescript package to code-split from my main application.</p>
  <p>The two projects share a root directory, i.e.:</p>
  <pre><code>- mylib
    - package.json
    - tsconfig.json
    - src/
    - dist/
  - myapp
    - package.json
    - tsconfig.json
    - src/
  </code></pre>
  <p>If <code>myapp/package.json</code> attempts to link <code>mylib</code> as <code>file:../mylib</code>, then <code>npm install</code> succeeds... but the only way I can succesfully import is to use <code>... from mylib/src/</code> (otherwise, the <code>tsc</code> compiler does not recognize the path). However, this import syntax differs from the production version of the package (which would not include <code>src</code>).</p>
  <p>Plus, I need to be able to also develop <code>mylib</code> against a second app which is <em>not</em> typescript enabled. Including the <code>src</code> in the import paths would not work in this scenario, as this path would not resolve against the published NPM package when the application is built by the CI.</p>
  <p>I came across <a href="https://stackoverflow.com/questions/59446361/npm-link-only-dist-folder">one solution</a> which does <em>technically</em> work:</p>
  <pre><code>cd mylib
  cp package.json dist/
  cd dist
  npm link
  
  cd ../../myapp
  npm link mylib
  </code></pre>
  <p>Thus, the <code>npm link</code> is created to the <code>dist</code> folder. But it requires copying the <code>package.json</code>, otherwise the link just goes to <code>mylib</code> rather than <code>mylib/dist</code>.</p>
  <p>Unfortunately, this quickly falls apart, because my <code>mylib/package.json</code> has relative import paths:</p>
  <pre><code>&quot;react&quot;: &quot;file:../myapp/node_modules/react&quot;,
  </code></pre>
  <p>Which <a href="https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react" rel="nofollow noreferrer">are necessary in order to preserve only one instance of the React package</a>. Copying the <code>package.json</code> into the <code>dist/</code> folder to create the link causes these imports to fail to resolve. Using an absolute path would not work for other developers on my project. Besides, copying the <code>package.json</code> into the <code>dist/</code> seems like an anti-pattern.</p>
  <h2>Edit 1</h2>
  <p>I tried switching to <code>yarn</code>, per the comments. It exhibits the exact same behavior as NPM in this regard. Namely, the <code>yarn link</code> command always points at the folder with <code>package.json</code>. Again, this forces me to use the <code>src/</code> folder in my imports, which will not work in a production build pointing at the production NPM packages.</p>