Webpack @something$: path() statement unclear












0















Not sure what does this means



resolve: {
alias: {
"@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js"),
}
}


Just following up from here



I tried to read something from docs but couldn't make sense.
It's not alias but some mapping of icons.js file to @ant-design path and then using it inside icons.js file as



export {
default as Logout
}
from "@ant-design/icons/lib/outline/CopyOutline";
export {
default as StepForward
} from "@ant-design/icons/lib/outline/AccountBookOnline";


I've a directory structure as node_modules/ant-design/icons/lib/outline/IconFileName.ts



So, what basically is required is mention all the icons in icons.js or icons.ts in my case (not yet converted to .ts ) and then using these icons from icons.js.



First, how can I achieve that?
Second, not sure how aliasing here would improve performance as mentioned in github discussion thread.



Dev server gives me error -



Module not found: Can't resolve '@ant-design/icons/lib/dist' in '/abc/Projects/xyz/node_modules/antd/es/icon'










share|improve this question



























    0















    Not sure what does this means



    resolve: {
    alias: {
    "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js"),
    }
    }


    Just following up from here



    I tried to read something from docs but couldn't make sense.
    It's not alias but some mapping of icons.js file to @ant-design path and then using it inside icons.js file as



    export {
    default as Logout
    }
    from "@ant-design/icons/lib/outline/CopyOutline";
    export {
    default as StepForward
    } from "@ant-design/icons/lib/outline/AccountBookOnline";


    I've a directory structure as node_modules/ant-design/icons/lib/outline/IconFileName.ts



    So, what basically is required is mention all the icons in icons.js or icons.ts in my case (not yet converted to .ts ) and then using these icons from icons.js.



    First, how can I achieve that?
    Second, not sure how aliasing here would improve performance as mentioned in github discussion thread.



    Dev server gives me error -



    Module not found: Can't resolve '@ant-design/icons/lib/dist' in '/abc/Projects/xyz/node_modules/antd/es/icon'










    share|improve this question

























      0












      0








      0








      Not sure what does this means



      resolve: {
      alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js"),
      }
      }


      Just following up from here



      I tried to read something from docs but couldn't make sense.
      It's not alias but some mapping of icons.js file to @ant-design path and then using it inside icons.js file as



      export {
      default as Logout
      }
      from "@ant-design/icons/lib/outline/CopyOutline";
      export {
      default as StepForward
      } from "@ant-design/icons/lib/outline/AccountBookOnline";


      I've a directory structure as node_modules/ant-design/icons/lib/outline/IconFileName.ts



      So, what basically is required is mention all the icons in icons.js or icons.ts in my case (not yet converted to .ts ) and then using these icons from icons.js.



      First, how can I achieve that?
      Second, not sure how aliasing here would improve performance as mentioned in github discussion thread.



      Dev server gives me error -



      Module not found: Can't resolve '@ant-design/icons/lib/dist' in '/abc/Projects/xyz/node_modules/antd/es/icon'










      share|improve this question














      Not sure what does this means



      resolve: {
      alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js"),
      }
      }


      Just following up from here



      I tried to read something from docs but couldn't make sense.
      It's not alias but some mapping of icons.js file to @ant-design path and then using it inside icons.js file as



      export {
      default as Logout
      }
      from "@ant-design/icons/lib/outline/CopyOutline";
      export {
      default as StepForward
      } from "@ant-design/icons/lib/outline/AccountBookOnline";


      I've a directory structure as node_modules/ant-design/icons/lib/outline/IconFileName.ts



      So, what basically is required is mention all the icons in icons.js or icons.ts in my case (not yet converted to .ts ) and then using these icons from icons.js.



      First, how can I achieve that?
      Second, not sure how aliasing here would improve performance as mentioned in github discussion thread.



      Dev server gives me error -



      Module not found: Can't resolve '@ant-design/icons/lib/dist' in '/abc/Projects/xyz/node_modules/antd/es/icon'







      javascript webpack antd






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Jan 1 at 13:12









      kushalvmkushalvm

      1,82662855




      1,82662855
























          1 Answer
          1






          active

          oldest

          votes


















          0














          Maybe you give wrong icons.js path to alias.



          Try print path.resolve(__dirname, "./src/icons.js") in your webpack file to check it.



          Maybe it should be some thing like this:



          resolve: {
          alias: {
          "@ant-design/icons/lib/dist$": path.resolve(__dirname, "../src/icons.js"),
          }
          }





          share|improve this answer










          New contributor




          Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.




















            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%2f53995721%2fwebpack-something-path-statement-unclear%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














            Maybe you give wrong icons.js path to alias.



            Try print path.resolve(__dirname, "./src/icons.js") in your webpack file to check it.



            Maybe it should be some thing like this:



            resolve: {
            alias: {
            "@ant-design/icons/lib/dist$": path.resolve(__dirname, "../src/icons.js"),
            }
            }





            share|improve this answer










            New contributor




            Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
            Check out our Code of Conduct.

























              0














              Maybe you give wrong icons.js path to alias.



              Try print path.resolve(__dirname, "./src/icons.js") in your webpack file to check it.



              Maybe it should be some thing like this:



              resolve: {
              alias: {
              "@ant-design/icons/lib/dist$": path.resolve(__dirname, "../src/icons.js"),
              }
              }





              share|improve this answer










              New contributor




              Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
              Check out our Code of Conduct.























                0












                0








                0







                Maybe you give wrong icons.js path to alias.



                Try print path.resolve(__dirname, "./src/icons.js") in your webpack file to check it.



                Maybe it should be some thing like this:



                resolve: {
                alias: {
                "@ant-design/icons/lib/dist$": path.resolve(__dirname, "../src/icons.js"),
                }
                }





                share|improve this answer










                New contributor




                Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.










                Maybe you give wrong icons.js path to alias.



                Try print path.resolve(__dirname, "./src/icons.js") in your webpack file to check it.



                Maybe it should be some thing like this:



                resolve: {
                alias: {
                "@ant-design/icons/lib/dist$": path.resolve(__dirname, "../src/icons.js"),
                }
                }






                share|improve this answer










                New contributor




                Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                share|improve this answer



                share|improve this answer








                edited Mar 6 at 3:19





















                New contributor




                Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.









                answered Mar 6 at 2:42









                Anderson LAnderson L

                11




                11




                New contributor




                Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.





                New contributor





                Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.






                Anderson L is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
                Check out our Code of Conduct.
































                    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%2f53995721%2fwebpack-something-path-statement-unclear%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

                    The term 'EXEC' is not recognized as the name of a cmdlet Powershell

                    NPM command prompt closes immediately [closed]

                    Error binding properties and functions in emscripten