This example extension shows how to use code from other directories in your extension.
In order to test this extension - run block run from within hello-world-typescript-block after
running npm install in the root folder
Sometimes using a relative path is fine (as is done in this example). Othertimes it's useful to package your shared code as an independent library, but also allow development against the local version of your library.
In this case, you can use npm link.
In order to get this running in this example:
- Change directories:
cd ./hello-world-shared; then runnpm link - Change directories:
cd ../hello-world-typescript-block; - Run
npm install --save ../hello-world-sharedto install - Run
npm link hello-world-sharedto use the link
Now you can replace:
import {Hello} from '../../hello-world-shared';
with:
import {Hello} from 'hello-world-shared';
And then if you use the library instead, you won't have to change any code!
If you inspect the npm install command you will see that we install packages from three different
places from reach of the three package.json's
This is done so that there is only a single React installation that all of the packages and
reference. If there are multiple React installations in your repository there can be issues.
Oftentimes exhibiting itself as an Invalid hook call if using hooks.
In order to alleviate this issue - we install react once at the root level so that all installations can share the same single react installation.
(There are other reasonable solutions to this same problem - eg: use of hardlinks, like with pnpm or yarn v2)