webpack 4 exports are not being exposed as configured





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







0















I am upgrading from Webpack 3 to 4.



All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.



I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.



The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.



Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:



output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}


When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:



MyLibrary["entry"]


where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).



If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.










share|improve this question





























    0















    I am upgrading from Webpack 3 to 4.



    All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.



    I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.



    The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.



    Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:



    output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}


    When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:



    MyLibrary["entry"]


    where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).



    If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.










    share|improve this question

























      0












      0








      0








      I am upgrading from Webpack 3 to 4.



      All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.



      I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.



      The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.



      Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:



      output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}


      When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:



      MyLibrary["entry"]


      where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).



      If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.










      share|improve this question














      I am upgrading from Webpack 3 to 4.



      All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.



      I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.



      The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.



      Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:



      output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}


      When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:



      MyLibrary["entry"]


      where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).



      If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.







      webpack-4






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 16 '18 at 18:24









      Brian BallBrian Ball

      9,16912741




      9,16912741
























          1 Answer
          1






          active

          oldest

          votes


















          0














          I figured it out.



          When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.



          Pro tip:
          optimization.runtimeChunk = "single" is a shortcut for:



          optimization : {
          runtimeChunk: {
          name: 'runtime'
          }
          }


          If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.






          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%2f53343432%2fwebpack-4-exports-are-not-being-exposed-as-configured%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














            I figured it out.



            When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.



            Pro tip:
            optimization.runtimeChunk = "single" is a shortcut for:



            optimization : {
            runtimeChunk: {
            name: 'runtime'
            }
            }


            If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.






            share|improve this answer




























              0














              I figured it out.



              When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.



              Pro tip:
              optimization.runtimeChunk = "single" is a shortcut for:



              optimization : {
              runtimeChunk: {
              name: 'runtime'
              }
              }


              If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.






              share|improve this answer


























                0












                0








                0







                I figured it out.



                When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.



                Pro tip:
                optimization.runtimeChunk = "single" is a shortcut for:



                optimization : {
                runtimeChunk: {
                name: 'runtime'
                }
                }


                If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.






                share|improve this answer













                I figured it out.



                When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.



                Pro tip:
                optimization.runtimeChunk = "single" is a shortcut for:



                optimization : {
                runtimeChunk: {
                name: 'runtime'
                }
                }


                If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 16 '18 at 19:48









                Brian BallBrian Ball

                9,16912741




                9,16912741
































                    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.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53343432%2fwebpack-4-exports-are-not-being-exposed-as-configured%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

                    List item for chat from Array inside array React Native

                    Thiostrepton

                    Caerphilly