Angular is not respecting browser field in package.json












1














Repro steps:




  1. npm install @angular/cli


  2. npx ng new my-app (press enter for defaults to prompts)

  3. cd my-app


  4. npx ng build (notice that it works)

  5. npm install --save ethers

  6. Add import { BigNumber } from 'ethers/utils' to my-app/src/app/app.component.ts

  7. Add foo = new BigNumber(0) to the AppComponent class in my-app/src/app/app.component.ts


  8. npx ng build (notice that it fails)


The problem here is that the ethers library has a package.json with:



{
"main": "./index.js",
"browser": "./dist/ethers.min.js",
}


According to the webpack documentation, webpack should be using ./dist/ethers.min.js. However, from the errors we can see that it is trying to use ./index.js, based on the fact that it is trying to read files that are part of the NodeJS build, rather than the browser build (which lives entirely in dist subdirectory).



Why isn't Angular respecting the browser field in package.json? What do I need to do in order to resolve this issue?










share|improve this question



























    1














    Repro steps:




    1. npm install @angular/cli


    2. npx ng new my-app (press enter for defaults to prompts)

    3. cd my-app


    4. npx ng build (notice that it works)

    5. npm install --save ethers

    6. Add import { BigNumber } from 'ethers/utils' to my-app/src/app/app.component.ts

    7. Add foo = new BigNumber(0) to the AppComponent class in my-app/src/app/app.component.ts


    8. npx ng build (notice that it fails)


    The problem here is that the ethers library has a package.json with:



    {
    "main": "./index.js",
    "browser": "./dist/ethers.min.js",
    }


    According to the webpack documentation, webpack should be using ./dist/ethers.min.js. However, from the errors we can see that it is trying to use ./index.js, based on the fact that it is trying to read files that are part of the NodeJS build, rather than the browser build (which lives entirely in dist subdirectory).



    Why isn't Angular respecting the browser field in package.json? What do I need to do in order to resolve this issue?










    share|improve this question

























      1












      1








      1


      1





      Repro steps:




      1. npm install @angular/cli


      2. npx ng new my-app (press enter for defaults to prompts)

      3. cd my-app


      4. npx ng build (notice that it works)

      5. npm install --save ethers

      6. Add import { BigNumber } from 'ethers/utils' to my-app/src/app/app.component.ts

      7. Add foo = new BigNumber(0) to the AppComponent class in my-app/src/app/app.component.ts


      8. npx ng build (notice that it fails)


      The problem here is that the ethers library has a package.json with:



      {
      "main": "./index.js",
      "browser": "./dist/ethers.min.js",
      }


      According to the webpack documentation, webpack should be using ./dist/ethers.min.js. However, from the errors we can see that it is trying to use ./index.js, based on the fact that it is trying to read files that are part of the NodeJS build, rather than the browser build (which lives entirely in dist subdirectory).



      Why isn't Angular respecting the browser field in package.json? What do I need to do in order to resolve this issue?










      share|improve this question













      Repro steps:




      1. npm install @angular/cli


      2. npx ng new my-app (press enter for defaults to prompts)

      3. cd my-app


      4. npx ng build (notice that it works)

      5. npm install --save ethers

      6. Add import { BigNumber } from 'ethers/utils' to my-app/src/app/app.component.ts

      7. Add foo = new BigNumber(0) to the AppComponent class in my-app/src/app/app.component.ts


      8. npx ng build (notice that it fails)


      The problem here is that the ethers library has a package.json with:



      {
      "main": "./index.js",
      "browser": "./dist/ethers.min.js",
      }


      According to the webpack documentation, webpack should be using ./dist/ethers.min.js. However, from the errors we can see that it is trying to use ./index.js, based on the fact that it is trying to read files that are part of the NodeJS build, rather than the browser build (which lives entirely in dist subdirectory).



      Why isn't Angular respecting the browser field in package.json? What do I need to do in order to resolve this issue?







      angular






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 18 '18 at 1:51









      Micah Zoltu

      2,83723053




      2,83723053
























          1 Answer
          1






          active

          oldest

          votes


















          0














          The issue was that I was doing imports in the form import { BigNumber } from 'ethers/utils'. This style of import bypasses the main or browser properties on the package.json, which means that I was pulling in the node version no matter what was in there.



          The solution, never use import { ... } from '.../<something>' when you are importing from a mixed target dependency.






          share|improve this answer





















            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',
            autoActivateHeartbeat: false,
            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%2f53357222%2fangular-is-not-respecting-browser-field-in-package-json%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









            0














            The issue was that I was doing imports in the form import { BigNumber } from 'ethers/utils'. This style of import bypasses the main or browser properties on the package.json, which means that I was pulling in the node version no matter what was in there.



            The solution, never use import { ... } from '.../<something>' when you are importing from a mixed target dependency.






            share|improve this answer


























              0














              The issue was that I was doing imports in the form import { BigNumber } from 'ethers/utils'. This style of import bypasses the main or browser properties on the package.json, which means that I was pulling in the node version no matter what was in there.



              The solution, never use import { ... } from '.../<something>' when you are importing from a mixed target dependency.






              share|improve this answer
























                0












                0








                0






                The issue was that I was doing imports in the form import { BigNumber } from 'ethers/utils'. This style of import bypasses the main or browser properties on the package.json, which means that I was pulling in the node version no matter what was in there.



                The solution, never use import { ... } from '.../<something>' when you are importing from a mixed target dependency.






                share|improve this answer












                The issue was that I was doing imports in the form import { BigNumber } from 'ethers/utils'. This style of import bypasses the main or browser properties on the package.json, which means that I was pulling in the node version no matter what was in there.



                The solution, never use import { ... } from '.../<something>' when you are importing from a mixed target dependency.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 18 '18 at 2:20









                Micah Zoltu

                2,83723053




                2,83723053






























                    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%2f53357222%2fangular-is-not-respecting-browser-field-in-package-json%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

                    How to change which sound is reproduced for terminal bell?

                    Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

                    Can I use Tabulator js library in my java Spring + Thymeleaf project?