How to import local package in typescript monorepo











up vote
1
down vote

favorite
1












Given a monorepo project.

--project_root/
|--packageA/
|--index.ts
|--package.json
|--foo/
|--index.ts
|--packageB/
|--index.ts
|--package.json
|--bar/
|--spam.ts

Normally, when you are in packageA/index.ts and you want to import packageB/index.ts you would do import index from '../packageB',



and when you are packageA/foo/index.ts and you want to import packageB/index.ts you need to move two directory up import index from '../../packageB'



The question is, is there a way to import like import index from 'packageB and for nested folder import spam from 'packageB/bar/spam'?



EDIT



I have uploaded a github repo to demo the issue
https://github.com/jaimesangcap/lerna-ts-monorepo










share|improve this question




























    up vote
    1
    down vote

    favorite
    1












    Given a monorepo project.

    --project_root/
    |--packageA/
    |--index.ts
    |--package.json
    |--foo/
    |--index.ts
    |--packageB/
    |--index.ts
    |--package.json
    |--bar/
    |--spam.ts

    Normally, when you are in packageA/index.ts and you want to import packageB/index.ts you would do import index from '../packageB',



    and when you are packageA/foo/index.ts and you want to import packageB/index.ts you need to move two directory up import index from '../../packageB'



    The question is, is there a way to import like import index from 'packageB and for nested folder import spam from 'packageB/bar/spam'?



    EDIT



    I have uploaded a github repo to demo the issue
    https://github.com/jaimesangcap/lerna-ts-monorepo










    share|improve this question


























      up vote
      1
      down vote

      favorite
      1









      up vote
      1
      down vote

      favorite
      1






      1





      Given a monorepo project.

      --project_root/
      |--packageA/
      |--index.ts
      |--package.json
      |--foo/
      |--index.ts
      |--packageB/
      |--index.ts
      |--package.json
      |--bar/
      |--spam.ts

      Normally, when you are in packageA/index.ts and you want to import packageB/index.ts you would do import index from '../packageB',



      and when you are packageA/foo/index.ts and you want to import packageB/index.ts you need to move two directory up import index from '../../packageB'



      The question is, is there a way to import like import index from 'packageB and for nested folder import spam from 'packageB/bar/spam'?



      EDIT



      I have uploaded a github repo to demo the issue
      https://github.com/jaimesangcap/lerna-ts-monorepo










      share|improve this question















      Given a monorepo project.

      --project_root/
      |--packageA/
      |--index.ts
      |--package.json
      |--foo/
      |--index.ts
      |--packageB/
      |--index.ts
      |--package.json
      |--bar/
      |--spam.ts

      Normally, when you are in packageA/index.ts and you want to import packageB/index.ts you would do import index from '../packageB',



      and when you are packageA/foo/index.ts and you want to import packageB/index.ts you need to move two directory up import index from '../../packageB'



      The question is, is there a way to import like import index from 'packageB and for nested folder import spam from 'packageB/bar/spam'?



      EDIT



      I have uploaded a github repo to demo the issue
      https://github.com/jaimesangcap/lerna-ts-monorepo







      typescript npm






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 21 at 14:16

























      asked Nov 20 at 18:40









      Jaime Sangcap

      93611330




      93611330
























          1 Answer
          1






          active

          oldest

          votes

















          up vote
          1
          down vote



          accepted










          You can do this by specifing the base url and (in more complicated cases) by using path mapping.



          If you have a tsconfig.json in project_root, you can achieve the desired import strategy by defining



          "compilerOptions": {
          "baseUrl": "."
          }


          This works if the package name always corresponds with the folder name of the sub-project.



          If this isn't the case, you can use paths:



          "compilerOptions": {
          "baseUrl": ".", // This must be specified if "paths" is.
          "paths": {
          "A": ["packageA"],
          "B": ["packageB"],
          "A/*": ["packageA/*"],
          "B/*": ["packageB/*"]
          }
          }


          This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:



          resolve: {
          alias: {
          A: path.resolve(__dirname, 'packageA/'),
          B: path.resolve(__dirname, 'packageB/')
          }
          }


          If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts (node-ts and tsconfig-paths have to be installed via npm)






          share|improve this answer























          • thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
            – Jaime Sangcap
            Nov 21 at 9:27










          • I'm still trying to follow along the examples of the article though.
            – Jaime Sangcap
            Nov 21 at 9:29










          • Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
            – Johannes Reuter
            Nov 21 at 11:43












          • Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
            – Johannes Reuter
            Nov 21 at 11:49








          • 1




            Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
            – Johannes Reuter
            Nov 22 at 8:32











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399474%2fhow-to-import-local-package-in-typescript-monorepo%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          1
          down vote



          accepted










          You can do this by specifing the base url and (in more complicated cases) by using path mapping.



          If you have a tsconfig.json in project_root, you can achieve the desired import strategy by defining



          "compilerOptions": {
          "baseUrl": "."
          }


          This works if the package name always corresponds with the folder name of the sub-project.



          If this isn't the case, you can use paths:



          "compilerOptions": {
          "baseUrl": ".", // This must be specified if "paths" is.
          "paths": {
          "A": ["packageA"],
          "B": ["packageB"],
          "A/*": ["packageA/*"],
          "B/*": ["packageB/*"]
          }
          }


          This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:



          resolve: {
          alias: {
          A: path.resolve(__dirname, 'packageA/'),
          B: path.resolve(__dirname, 'packageB/')
          }
          }


          If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts (node-ts and tsconfig-paths have to be installed via npm)






          share|improve this answer























          • thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
            – Jaime Sangcap
            Nov 21 at 9:27










          • I'm still trying to follow along the examples of the article though.
            – Jaime Sangcap
            Nov 21 at 9:29










          • Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
            – Johannes Reuter
            Nov 21 at 11:43












          • Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
            – Johannes Reuter
            Nov 21 at 11:49








          • 1




            Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
            – Johannes Reuter
            Nov 22 at 8:32















          up vote
          1
          down vote



          accepted










          You can do this by specifing the base url and (in more complicated cases) by using path mapping.



          If you have a tsconfig.json in project_root, you can achieve the desired import strategy by defining



          "compilerOptions": {
          "baseUrl": "."
          }


          This works if the package name always corresponds with the folder name of the sub-project.



          If this isn't the case, you can use paths:



          "compilerOptions": {
          "baseUrl": ".", // This must be specified if "paths" is.
          "paths": {
          "A": ["packageA"],
          "B": ["packageB"],
          "A/*": ["packageA/*"],
          "B/*": ["packageB/*"]
          }
          }


          This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:



          resolve: {
          alias: {
          A: path.resolve(__dirname, 'packageA/'),
          B: path.resolve(__dirname, 'packageB/')
          }
          }


          If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts (node-ts and tsconfig-paths have to be installed via npm)






          share|improve this answer























          • thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
            – Jaime Sangcap
            Nov 21 at 9:27










          • I'm still trying to follow along the examples of the article though.
            – Jaime Sangcap
            Nov 21 at 9:29










          • Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
            – Johannes Reuter
            Nov 21 at 11:43












          • Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
            – Johannes Reuter
            Nov 21 at 11:49








          • 1




            Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
            – Johannes Reuter
            Nov 22 at 8:32













          up vote
          1
          down vote



          accepted







          up vote
          1
          down vote



          accepted






          You can do this by specifing the base url and (in more complicated cases) by using path mapping.



          If you have a tsconfig.json in project_root, you can achieve the desired import strategy by defining



          "compilerOptions": {
          "baseUrl": "."
          }


          This works if the package name always corresponds with the folder name of the sub-project.



          If this isn't the case, you can use paths:



          "compilerOptions": {
          "baseUrl": ".", // This must be specified if "paths" is.
          "paths": {
          "A": ["packageA"],
          "B": ["packageB"],
          "A/*": ["packageA/*"],
          "B/*": ["packageB/*"]
          }
          }


          This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:



          resolve: {
          alias: {
          A: path.resolve(__dirname, 'packageA/'),
          B: path.resolve(__dirname, 'packageB/')
          }
          }


          If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts (node-ts and tsconfig-paths have to be installed via npm)






          share|improve this answer














          You can do this by specifing the base url and (in more complicated cases) by using path mapping.



          If you have a tsconfig.json in project_root, you can achieve the desired import strategy by defining



          "compilerOptions": {
          "baseUrl": "."
          }


          This works if the package name always corresponds with the folder name of the sub-project.



          If this isn't the case, you can use paths:



          "compilerOptions": {
          "baseUrl": ".", // This must be specified if "paths" is.
          "paths": {
          "A": ["packageA"],
          "B": ["packageB"],
          "A/*": ["packageA/*"],
          "B/*": ["packageB/*"]
          }
          }


          This will cause typescript to correctly resolve the types of import during compilation. However the import paths are not resolved in the compiled javascript, which means it is necessary to tell the next step in your pipeline (usually a bundler like webpack) how to resolve these imports as well. For webpack specifically this can by done by specifying an alias in the webpack config:



          resolve: {
          alias: {
          A: path.resolve(__dirname, 'packageA/'),
          B: path.resolve(__dirname, 'packageB/')
          }
          }


          If you want to execute the typescript files directly, ts-node is the easiest way to do so, since it will already know about the modified paths from the typescript config if you use tsconfig-paths - in this case you just have to execute the file using node-ts -r tsconfig-paths/register packageA/index.ts (node-ts and tsconfig-paths have to be installed via npm)







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 22 at 8:31

























          answered Nov 21 at 8:38









          Johannes Reuter

          1,92479




          1,92479












          • thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
            – Jaime Sangcap
            Nov 21 at 9:27










          • I'm still trying to follow along the examples of the article though.
            – Jaime Sangcap
            Nov 21 at 9:29










          • Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
            – Johannes Reuter
            Nov 21 at 11:43












          • Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
            – Johannes Reuter
            Nov 21 at 11:49








          • 1




            Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
            – Johannes Reuter
            Nov 22 at 8:32


















          • thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
            – Jaime Sangcap
            Nov 21 at 9:27










          • I'm still trying to follow along the examples of the article though.
            – Jaime Sangcap
            Nov 21 at 9:29










          • Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
            – Johannes Reuter
            Nov 21 at 11:43












          • Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
            – Johannes Reuter
            Nov 21 at 11:49








          • 1




            Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
            – Johannes Reuter
            Nov 22 at 8:32
















          thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
          – Jaime Sangcap
          Nov 21 at 9:27




          thank you provding example but it doesn't seem to work out of the box (without a bundler). the package path is not transformed into the relative path of the package. See article medium.com/@caludio/…
          – Jaime Sangcap
          Nov 21 at 9:27












          I'm still trying to follow along the examples of the article though.
          – Jaime Sangcap
          Nov 21 at 9:29




          I'm still trying to follow along the examples of the article though.
          – Jaime Sangcap
          Nov 21 at 9:29












          Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
          – Johannes Reuter
          Nov 21 at 11:43






          Could you specify how you try to run your javascript files? If you are using webpack, you can specify the same resolutions there, if you are running the js files directly via node, you can use npm link. If you update your question, I will update my answer
          – Johannes Reuter
          Nov 21 at 11:43














          Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
          – Johannes Reuter
          Nov 21 at 11:49






          Depending on your situation it is also possible to use local paths. Maybe linking the individual projects is sufficient four your usecase and you don't even need configuration on typescript level
          – Johannes Reuter
          Nov 21 at 11:49






          1




          1




          Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
          – Johannes Reuter
          Nov 22 at 8:32




          Hey, you already solved it yourself using ts-node and tsconfig-paths, very nice :) I updated the answer accordingly
          – Johannes Reuter
          Nov 22 at 8:32


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53399474%2fhow-to-import-local-package-in-typescript-monorepo%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

          Calculate evaluation metrics using cross_val_predict sklearn

          Insert data from modal to MySQL (multiple modal on website)