How build Typescript with imported packages properly for IE11 using Bable 7 and Webpack 4?Using webpack with 'react-hot', 'babel-loader'How to include untyped node modules with Typescript 1.8?“exclude” options of babel-loader in WebpackIs Babel still necessary when using Typescript and Electron?Typescript (at-loader) compiler errors in WebPackHow to select node_modules dist flavor to bundled with webpackGot “TS2300: Duplicate identifier 'Account'” error after upgraded to Typescript 2.9.1TypeScript definition for StoreEnhancer prevents rest parametersWhy am I not getting the exported Object when importing in another Typescript project?Webpack build is throwing “.sourceMap is an alias for .sourceMaps, cannot use both”

Difference between system uptime and last boot time in windows

Why is the car dealer insisting on a loan instead of cash?

International Orange?

In what state are satellites left in when they are left in a graveyard orbit?

What explanation do proponents of a Scotland-NI bridge give for it breaking Brexit impasse?

Is a suit against a University Dorm for changing policies on a whim likely to succeed (USA)?

What are the advantages and disadvantages of tail wheels that cause modern airplanes to not use them?

Why is my fire extinguisher emptied after one use?

How to modify this code to add more vertical space in timeline that uses Tikz

How to control the output voltage of a solid state relay

How to draw a Venn diagram for X - (Y intersect Z)?

What is the source of "You can achieve a lot with hate, but even more with love" (Shakespeare?)

In what sequence should an advanced civilization teach technology to medieval society to maximize rate of adoption?

What organs or modifications would be needed for a life biological creature not to require sleep?

Access parent controller attribute from Visual force component

How do we know that black holes are spinning?

Unable to find solution to 6 simultaneous equations

How To Make Earth's Oceans as Brackish as Lyr's

Why is the year in this ISO timestamp not 2019?

Are there objective criteria for classifying consonance v. dissonance?

What does "boys rule, girls drool" mean?

How to publish superseding results without creating enemies

Is the Dodge action perceptible to other characters?

What is the blues term for the note between the minor third and the major third?



How build Typescript with imported packages properly for IE11 using Bable 7 and Webpack 4?


Using webpack with 'react-hot', 'babel-loader'How to include untyped node modules with Typescript 1.8?“exclude” options of babel-loader in WebpackIs Babel still necessary when using Typescript and Electron?Typescript (at-loader) compiler errors in WebPackHow to select node_modules dist flavor to bundled with webpackGot “TS2300: Duplicate identifier 'Account'” error after upgraded to Typescript 2.9.1TypeScript definition for StoreEnhancer prevents rest parametersWhy am I not getting the exported Object when importing in another Typescript project?Webpack build is throwing “.sourceMap is an alias for .sourceMaps, cannot use both”






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








0















Recently, we released a new version of an react app, but caused the IE11
complain the let keyword.



When I looked into, I found it was because we upgraded query-string package from 5.1.0 to 6.4.0, and the new code used the let keyword like here. And it looks like our build process didn't compile the imported packages from es6 to es5.



We are using typescript with babel 7 and webpack 4, it all good for our own code and most packages except query-string.



The following are our configs, please suggest the best way to solve it.



webpeck.config:



 
test: /.(t


tsconfig.json:




"compilerOptions":
"target": "esnext",
"module": "esnext",
"allowJs": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"lib": ["webworker", "esnext", "dom"],
"sourceMap": true,
"baseUrl": ".",
"paths":
"*": ["./src/*"]
,
"jsx": "preserve",
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true
,
"include": ["./src/**/*", "./**/*.d.ts"],
"exclude": ["node_modules"]



.babelrc



 const presets = [
'@babel/preset-typescript',
'@babel/preset-react',
[
'@babel/preset-env',

targets:
// React parses on ie 9, so we should too
ie: 9
,
forceAllTransforms: true,
// Disable polyfill transforms
useBuiltIns: false,
// Do not transform modules to CJS
modules: false

]
]


sample source file



 import queryStringLib from 'query-string'
queryStringLib.stringify(...)


By the way, I have tried to remove exlcude node_modules in both webpack.config and tsconfig.json, doesn't work. I also tried to change tsconfig.json to target es5, doesn't work either.



Update #1
I just tried, It will work, if I remove exclude node_modules in both webpack.config and tsconfig.json, and change tsconfig.json to target es5. However it will make the computer a lot busier than before. Not a perfect solution.



Thanks,
Ron










share|improve this question
































    0















    Recently, we released a new version of an react app, but caused the IE11
    complain the let keyword.



    When I looked into, I found it was because we upgraded query-string package from 5.1.0 to 6.4.0, and the new code used the let keyword like here. And it looks like our build process didn't compile the imported packages from es6 to es5.



    We are using typescript with babel 7 and webpack 4, it all good for our own code and most packages except query-string.



    The following are our configs, please suggest the best way to solve it.



    webpeck.config:



     
    test: /.(t


    tsconfig.json:




    "compilerOptions":
    "target": "esnext",
    "module": "esnext",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "lib": ["webworker", "esnext", "dom"],
    "sourceMap": true,
    "baseUrl": ".",
    "paths":
    "*": ["./src/*"]
    ,
    "jsx": "preserve",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
    ,
    "include": ["./src/**/*", "./**/*.d.ts"],
    "exclude": ["node_modules"]



    .babelrc



     const presets = [
    '@babel/preset-typescript',
    '@babel/preset-react',
    [
    '@babel/preset-env',

    targets:
    // React parses on ie 9, so we should too
    ie: 9
    ,
    forceAllTransforms: true,
    // Disable polyfill transforms
    useBuiltIns: false,
    // Do not transform modules to CJS
    modules: false

    ]
    ]


    sample source file



     import queryStringLib from 'query-string'
    queryStringLib.stringify(...)


    By the way, I have tried to remove exlcude node_modules in both webpack.config and tsconfig.json, doesn't work. I also tried to change tsconfig.json to target es5, doesn't work either.



    Update #1
    I just tried, It will work, if I remove exclude node_modules in both webpack.config and tsconfig.json, and change tsconfig.json to target es5. However it will make the computer a lot busier than before. Not a perfect solution.



    Thanks,
    Ron










    share|improve this question




























      0












      0








      0








      Recently, we released a new version of an react app, but caused the IE11
      complain the let keyword.



      When I looked into, I found it was because we upgraded query-string package from 5.1.0 to 6.4.0, and the new code used the let keyword like here. And it looks like our build process didn't compile the imported packages from es6 to es5.



      We are using typescript with babel 7 and webpack 4, it all good for our own code and most packages except query-string.



      The following are our configs, please suggest the best way to solve it.



      webpeck.config:



       
      test: /.(t


      tsconfig.json:




      "compilerOptions":
      "target": "esnext",
      "module": "esnext",
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "lib": ["webworker", "esnext", "dom"],
      "sourceMap": true,
      "baseUrl": ".",
      "paths":
      "*": ["./src/*"]
      ,
      "jsx": "preserve",
      "strict": true,
      "moduleResolution": "node",
      "esModuleInterop": true
      ,
      "include": ["./src/**/*", "./**/*.d.ts"],
      "exclude": ["node_modules"]



      .babelrc



       const presets = [
      '@babel/preset-typescript',
      '@babel/preset-react',
      [
      '@babel/preset-env',

      targets:
      // React parses on ie 9, so we should too
      ie: 9
      ,
      forceAllTransforms: true,
      // Disable polyfill transforms
      useBuiltIns: false,
      // Do not transform modules to CJS
      modules: false

      ]
      ]


      sample source file



       import queryStringLib from 'query-string'
      queryStringLib.stringify(...)


      By the way, I have tried to remove exlcude node_modules in both webpack.config and tsconfig.json, doesn't work. I also tried to change tsconfig.json to target es5, doesn't work either.



      Update #1
      I just tried, It will work, if I remove exclude node_modules in both webpack.config and tsconfig.json, and change tsconfig.json to target es5. However it will make the computer a lot busier than before. Not a perfect solution.



      Thanks,
      Ron










      share|improve this question
















      Recently, we released a new version of an react app, but caused the IE11
      complain the let keyword.



      When I looked into, I found it was because we upgraded query-string package from 5.1.0 to 6.4.0, and the new code used the let keyword like here. And it looks like our build process didn't compile the imported packages from es6 to es5.



      We are using typescript with babel 7 and webpack 4, it all good for our own code and most packages except query-string.



      The following are our configs, please suggest the best way to solve it.



      webpeck.config:



       
      test: /.(t


      tsconfig.json:




      "compilerOptions":
      "target": "esnext",
      "module": "esnext",
      "allowJs": true,
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "lib": ["webworker", "esnext", "dom"],
      "sourceMap": true,
      "baseUrl": ".",
      "paths":
      "*": ["./src/*"]
      ,
      "jsx": "preserve",
      "strict": true,
      "moduleResolution": "node",
      "esModuleInterop": true
      ,
      "include": ["./src/**/*", "./**/*.d.ts"],
      "exclude": ["node_modules"]



      .babelrc



       const presets = [
      '@babel/preset-typescript',
      '@babel/preset-react',
      [
      '@babel/preset-env',

      targets:
      // React parses on ie 9, so we should too
      ie: 9
      ,
      forceAllTransforms: true,
      // Disable polyfill transforms
      useBuiltIns: false,
      // Do not transform modules to CJS
      modules: false

      ]
      ]


      sample source file



       import queryStringLib from 'query-string'
      queryStringLib.stringify(...)


      By the way, I have tried to remove exlcude node_modules in both webpack.config and tsconfig.json, doesn't work. I also tried to change tsconfig.json to target es5, doesn't work either.



      Update #1
      I just tried, It will work, if I remove exclude node_modules in both webpack.config and tsconfig.json, and change tsconfig.json to target es5. However it will make the computer a lot busier than before. Not a perfect solution.



      Thanks,
      Ron







      typescript webpack babeljs






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 28 at 13:30







      Ron

















      asked Mar 28 at 12:01









      RonRon

      1,7981 gold badge15 silver badges32 bronze badges




      1,7981 gold badge15 silver badges32 bronze badges

























          1 Answer
          1






          active

          oldest

          votes


















          1
















          To me, it worked if I changed webpack.config to:



          j)sx?$/,
          exclude: /node_modules(?!(/


          In other words, exclude all other node_modules except query-string and add @babel/preset-env as a preset option to babel-loader (babel-loader did not work correctly without).



          No changes to tsconfig.json.






          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/4.0/"u003ecc by-sa 4.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%2f55397134%2fhow-build-typescript-with-imported-packages-properly-for-ie11-using-bable-7-and%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









            1
















            To me, it worked if I changed webpack.config to:



            j)sx?$/,
            exclude: /node_modules(?!(/


            In other words, exclude all other node_modules except query-string and add @babel/preset-env as a preset option to babel-loader (babel-loader did not work correctly without).



            No changes to tsconfig.json.






            share|improve this answer





























              1
















              To me, it worked if I changed webpack.config to:



              j)sx?$/,
              exclude: /node_modules(?!(/


              In other words, exclude all other node_modules except query-string and add @babel/preset-env as a preset option to babel-loader (babel-loader did not work correctly without).



              No changes to tsconfig.json.






              share|improve this answer



























                1














                1










                1









                To me, it worked if I changed webpack.config to:



                j)sx?$/,
                exclude: /node_modules(?!(/


                In other words, exclude all other node_modules except query-string and add @babel/preset-env as a preset option to babel-loader (babel-loader did not work correctly without).



                No changes to tsconfig.json.






                share|improve this answer













                To me, it worked if I changed webpack.config to:



                j)sx?$/,
                exclude: /node_modules(?!(/


                In other words, exclude all other node_modules except query-string and add @babel/preset-env as a preset option to babel-loader (babel-loader did not work correctly without).



                No changes to tsconfig.json.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 29 at 15:25









                masamasa

                2,1833 gold badges14 silver badges24 bronze badges




                2,1833 gold badges14 silver badges24 bronze badges





















                    Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.







                    Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.




















                    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%2f55397134%2fhow-build-typescript-with-imported-packages-properly-for-ie11-using-bable-7-and%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

                    Kamusi Yaliyomo Aina za kamusi | Muundo wa kamusi | Faida za kamusi | Dhima ya picha katika kamusi | Marejeo | Tazama pia | Viungo vya nje | UrambazajiKuhusu kamusiGo-SwahiliWiki-KamusiKamusi ya Kiswahili na Kiingerezakuihariri na kuongeza habari

                    Swift 4 - func physicsWorld not invoked on collision? The Next CEO of Stack OverflowHow to call Objective-C code from Swift#ifdef replacement in the Swift language@selector() in Swift?#pragma mark in Swift?Swift for loop: for index, element in array?dispatch_after - GCD in Swift?Swift Beta performance: sorting arraysSplit a String into an array in Swift?The use of Swift 3 @objc inference in Swift 4 mode is deprecated?How to optimize UITableViewCell, because my UITableView lags

                    Access current req object everywhere in Node.js ExpressWhy are global variables considered bad practice? (node.js)Using req & res across functionsHow do I get the path to the current script with Node.js?What is Node.js' Connect, Express and “middleware”?Node.js w/ express error handling in callbackHow to access the GET parameters after “?” in Express?Modify Node.js req object parametersAccess “app” variable inside of ExpressJS/ConnectJS middleware?Node.js Express app - request objectAngular Http Module considered middleware?Session variables in ExpressJSAdd properties to the req object in expressjs with Typescript