Example of nomodule/module webpack config with plugin-transform-runtime and corejs@3

[JackHowa]

I'm really curious about the nomodule/module approach along with bugfixes release for preset-env. Yet I'm kind of struggling to setup a basic project with it. I can include the latest and greatest with type="module", yet I'm being plagued with setting up the regeneratorRuntime not found issue.

It seems like I'm missing something obvious with @babel/runtime or something. But I'm not able to build and load two bundle, one for ie 11, another modern browser.

https://github.com/JackHowa/esmodule-no-module-doing-something

Does any one have good examples of the config? I've tried regenerator runtime plugins as well as just trying to search for the config on github

[nicolo-ribaudo]

The config looks correct 🤔
The only suggestion I have is to use @babel/plugin-transform-runtime also for the modern bundle, since it reduces the final size when you have multiple files sharing the same runtime Babel helpers.

Are app.legacy and app.module the final compiled files?
Where in the code are you getting that error from exactly? (I don't have IE 11 to test it)

[JackHowa]

If the output stil has arrows, you can check https://medium.com/@JayKariesch/webpack-5-beta-babel-loader-why-do-i-still-have-arrow-functions-6a22980dcae4 (they are injected by webpack after running Babel)

interesting, seems to be more individually mapped now https://webpack.js.org/configuration/output/#outputenvironment rather than es5 only

also tried removing spec: true plugins: ['@babel/plugin-transform-runtime', ['@babel/plugin-transform-arrow-functions', { spec: true }]],

Seeing a new error the result of plugin transform runtime. I also added environment variables, I think, based on the correct mapping:

  output: {
    filename: 'app.legacy.js',
    path: path.resolve(__dirname, 'dist'),
    environment: {
      // The environment supports arrow functions ('() => { ... }').
      arrowFunction: false,
      // The environment supports BigInt as literal (123n).
      bigIntLiteral: false,
      // The environment supports const and let for variable declarations.
      const: false,
      // The environment supports destructuring ('{ a, b } = obj').
      destructuring: false,
      // The environment supports an async import() function to import EcmaScript modules.
      dynamicImport: false,
      // The environment supports 'for of' iteration ('for (const x of array) { ... }').
      forOf: false,
      // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
      module: false,
    }

via JackHowa/esmodule-no-module-doing-something#4, possibly unrelated issue

hmm also tried target: ['web', 'es5'], per the article as well without success:

!function(){var t={357:function(t){function r(t,r,e,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void e(t)}c.done?r(u):Promise.resolve(u).then(n,o)}t.exports=function(t){return function(){var e=this,n=arguments;return new Promise((function(o,i){var a=t.apply(e,n);function c(t){r(a,o,i,c,u,"next",t)}function u(t){r(a,o,i,c,u,"throw",t)}c(void 0)}))}}},853:function(t){t.exports=function(t,r){if(!(t instanceof r))throw new TypeError("Cannot call a class as a function")}},559:function(t){function r(e){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?t.exports=r=function(t){return typeof t}:t.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r(e)}t.exports=r},129:function(t,r,e){t.exports=e(760)},760:function(t,r,e){"use strict";var n=e(559),o=e.n(n);t=e.hmd(t);var i=function(t){var r,e=Object.prototype,n=e.hasOwnProperty,i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",c=i.asyncIterator||"@@asyncIterator",u=i.toStringTag||"@@toStringTag";function f(t,r,e){return Object.defineProperty(t,r,{value:e,enumerable:!0,configurable:!0,writable:!0}),t[r]}try{f({},"")}catch(t){f=function(t,r,e){return t[r]=e}}function s(t,r,e,n){var o=r&&r.prototype instanceof g?r:g,i=Object.create(o.prototype),a=new k(n||[]);return i._invoke=function(t,r,e){var n=h;return function(o,i){if(n===y)throw new Error("Generator is already running");if(n===d){if("throw"===o)throw i;return N()}for(e.method=o,e.arg=i;;){var a=e.delegate;if(a){var c=_(a,e);if(c){if(c===v)continue;return c}}if("next"===e.method)e.sent=e._sent=e.arg;else if("throw"===e.method){if(n===h)throw n=d,e.arg;e.dispatchException(e.arg)}else"return"===e.method&&e.abrupt("return",e.arg);n=y;var u=l(t,r,e);if("normal"===u.type){if(n=e.done?d:p,u.arg===v)continue;return{value:u.arg,done:e.done}}"throw"===u.type&&(n=d,e.method="throw",e.arg=u.arg)}}}(t,e,a),i}function l(t,r,e){try{return{type:"normal",arg:t.call(r,e)}}catch(t){return{type:"throw",arg:t}}}t.wrap=s;var h="suspendedStart",p="suspendedYield",y="executing",d="completed",v={};function g(){}function m(){}function w(){}var x={};x[a]=function(){return this};var b=Object.getPrototypeOf,L=b&&b(b(G([])));L&&L!==e&&n.call(L,a)&&(x=L);var E=w.prototype=g.prototype=Object.create(x);function j(t){["next","throw","return"].forEach((function(r){f(t,r,(function(t){return this._invoke(r,t)}))}))}function O(t,r){function e(i,a,c,u){var f=l(t[i],t,a);if("throw"!==f.type){var s=f.arg,h=s.value;return h&&"object"===o()(h)&&n.call(h,"__await")?r.resolve(h.__await).then((function(t){e("next",t,c,u)}),(function(t){e("throw",t,c,u)})):r.resolve(h).then((function(t){s.value=t,c(s)}),(function(t){return e("throw",t,c,u)}))}u(f.arg)}var i;this._invoke=function(t,n){function o(){return new r((function(r,o){e(t,n,r,o)}))}return i=i?i.then(o,o):o()}}function _(t,e){var n=t.iterator[e.method];if(n===r){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=r,_(t,e),"throw"===e.method))return v;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return v}var o=l(n,t.iterator,e.arg);if("throw"===o.type)return e.method="throw",e.arg=o.arg,e.delegate=null,v;var i=o.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=r),e.delegate=null,v):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,v)}function S(t){var r={tryLoc:t[0]};1 in t&&(r.catchLoc=t[1]),2 in t&&(r.finallyLoc=t[2],r.afterLoc=t[3]),this.tryEntries.push(r)}function P(t){var r=t.completion||{};r.type="normal",delete r.arg,t.completion=r}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(S,this),this.reset(!0)}function G(t){if(t){var e=t[a];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,i=function e(){for(;++o<t.length;)if(n.call(t,o))return e.value=t[o],e.done=!1,e;return e.value=r,e.done=!0,e};return i.next=i}}return{next:N}}function N(){return{value:r,done:!0}}return m.prototype=E.constructor=w,w.constructor=m,m.displayName=f(w,u,"GeneratorFunction"),t.isGeneratorFunction=function(t){var r="function"==typeof t&&t.constructor;return!!r&&(r===m||"GeneratorFunction"===(r.displayName||r.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,w):(t.__proto__=w,f(t,u,"GeneratorFunction")),t.prototype=Object.create(E),t},t.awrap=function(t){return{__await:t}},j(O.prototype),O.prototype[c]=function(){return this},t.AsyncIterator=O,t.async=function(r,e,n,o,i){void 0===i&&(i=Promise);var a=new O(s(r,e,n,o),i);return t.isGeneratorFunction(e)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},j(E),f(E,u,"Generator"),E[a]=function(){return this},E.toString=function(){return"[object Generator]"},t.keys=function(t){var r=[];for(var e in t)r.push(e);return r.reverse(),function e(){for(;r.length;){var n=r.pop();if(n in t)return e.value=n,e.done=!1,e}return e.done=!0,e}},t.values=G,k.prototype={constructor:k,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=r,this.done=!1,this.delegate=null,this.method="next",this.arg=r,this.tryEntries.forEach(P),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=r)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function o(n,o){return c.type="throw",c.arg=t,e.next=n,o&&(e.method="next",e.arg=r),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var u=n.call(a,"catchLoc"),f=n.call(a,"finallyLoc");if(u&&f){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!f)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,r){for(var e=this.tryEntries.length-1;e>=0;--e){var o=this.tryEntries[e];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=r&&r<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=r,i?(this.method="next",this.next=i.finallyLoc,v):this.complete(a)},complete:function(t,r){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&r&&(this.next=r),v},finish:function(t){for(var r=this.tryEntries.length-1;r>=0;--r){var e=this.tryEntries[r];if(e.finallyLoc===t)return this.complete(e.completion,e.afterLoc),P(e),v}},catch:function(t){for(var r=this.tryEntries.length-1;r>=0;--r){var e=this.tryEntries[r];if(e.tryLoc===t){var n=e.completion;if("throw"===n.type){var o=n.arg;P(e)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:G(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=r),v}},t}("object"===o()(t)?t.exports:{});try{regeneratorRuntime=i}catch(t){Function("r","regeneratorRuntime = r")(i)}}},r={};function e(n){if(r[n])return r[n].exports;var o=r[n]={id:n,loaded:!1,exports:{}};return t[n](o,o.exports,e),o.loaded=!0,o.exports}e.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(r,{a:r}),r},e.d=function(t,r){for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},e.hmd=function(t){return(t=Object.create(t)).children||(t.children=[]),Object.defineProperty(t,"exports",{enumerable:!0,set:function(){throw new Error("ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: "+t.id)}}),t},e.o=function(t,r){return Object.prototype.hasOwnProperty.call(t,r)},function(){"use strict";var t=e(853),r=e.n(t),n=e(129),o=e(357),i=e.n(o),a=[].concat(["testing","esmodules"],["tonight"]),c="".concat(a.join(" "));!function(){var t=i()(n.default.mark((function t(r){return n.default.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:console.log(c),console.log(r);case 2:case"end":return t.stop()}}),t)})));return function(r){return t.apply(this,arguments)}}()(new function t(e){r()(this,t),this.county=e}("West Sussex").county)}()}();

[JackHowa]

eh, I'm guessing this is due to needing the @babel/runtime dependency shipped. think my test hasn't been the best example for that with just an index.html entrypoint

[nicolo-ribaudo]

It seems like the problem is that regenerator-runtime doesn't support being compiled. You can avoid passing it to Babel in your webpack config:

        test: /\.m?js/,
        exclude: [/regenerator-runtime/],

[JackHowa]

Oh ok thank you! Updated. And working without loading it in the head. I'm able to remove the regenerator runtime script dependency. But the core-js one is still seemingly needed because I'm getting a Promises error without it. Do I need another configuration for core-js with runtime plugin?

Also, would it be easier if I just use the babel output to debug this? trying to make this easier to debug overall?

script core-js: https://github.com/JackHowa/esmodule-no-module-doing-something/pull/4/files#diff-0eb547304658805aad788d320f10bf1f292797b5e6d745a3bf617584da017051R10

legacy webpack config: https://github.com/JackHowa/esmodule-no-module-doing-something/pull/4/files#diff-40478ed39097a14e2087da2814c380800b6633c27c72007187756d14eb5e8c8d

full error: SCRIPT5009: 'Promise' is undefined

• I've also tried excluding all node_modules.

        test: /\.m?js$/,
        exclude: [/node_modules/],

• I've removed the babel arrow transform as it didn't seem to have any effect with the target es5 working as expected, transforming arrow funcs
• I've also tried configuring plugin-transform-runtime to include an alternate version of corejs but that doesn't seem to have a positive effect
• corejs is not currently a runtime depedency. but, as far as I can read, @babel/runtime should handle that dependency with default corejs option

build output:

> npm run build:modern && npm run build:legacy:webpack


> esmodule-no-module-doing-something@1.0.0 build:modern esmodule-no-module-doing-something
> webpack --config modern-webpack.config.js

asset app.modern.mjs 174 bytes [compared for emit] [minimized] (name: main)
./app.js 553 bytes [built] [code generated]
webpack 5.12.0 compiled successfully in 774 ms

> esmodule-no-module-doing-something@1.0.0 build:legacy:webpack esmodule-no-module-doing-something
> webpack --config legacy-webpack.config.js

asset app.legacy.js 7.62 KiB [emitted] [compared for emit] [minimized] (name: main)
runtime modules 718 bytes 3 modules
cacheable modules 26.3 KiB
  modules by path ./node_modules/@babel/runtime/ 1.03 KiB
    ./node_modules/@babel/runtime/helpers/classCallCheck.js 196 bytes [built] [code generated]
    ./node_modules/@babel/runtime/regenerator/index.js 49 bytes [built] [code generated]
    ./node_modules/@babel/runtime/helpers/asyncToGenerator.js 809 bytes [built] [code generated]
  ./app.js 1.25 KiB [built] [code generated]
  ./node_modules/regenerator-runtime/runtime.js 24 KiB [built] [code generated]
webpack 5.12.0 compiled successfully in 964 ms

not working without core-js: https://5ffac95bd7f2200008f7f0db--dazzling-meitner-e5cbd6.netlify.app/
working with core-js script: https://5ffac920bda2f2000742908a--dazzling-meitner-e5cbd6.netlify.app/

[JackHowa]

nvm, think I got it. will post the answer to my q in a bit after I get the corejs issue fixed

[JackHowa]

Big thank you to @nicolo-ribaudo for debugging with me and for the patience. Also thanks to @developit for inspiring exploration and soon-to-be work work using nomodule/module approach.

Overall, IE 11 with corejs and nomodule support mvp: https://github.com/JackHowa/esmodule-no-module-doing-something/releases/tag/v1.0.0

// legacy-webpack.config.js 
const path = require('path');

module.exports = {
  mode: 'production',
  // prevents arrow funcs via 
  // https://webpack.js.org/migrate/5/#need-to-support-an-older-browser-like-ie-11
  target: ['web', 'es5'],
  entry: './app.js',
  output: {
    filename: 'app.legacy.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        // don't transpile regenerator-runtime
        exclude: [/regenerator-runtime/, /core-js/],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  modules: 'commonjs',
                  targets: {
                    edge: '14',
                    ie: '11',
                    firefox: '52',
                    chrome: '43',
                    safari: '9',
                  },
                  useBuiltIns: 'usage',
                  corejs: 3
                },
              ],
            ],
            // installs regenerator-runtime
            // ignored for transpilation
            // needs dep @babel/runtime
            plugins: ['@babel/plugin-transform-runtime'],
          }
        }
      }
    ]
  }
};

// modern-webpack.config.js
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './app.js',
  output: {
    filename: 'app.modern.mjs',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: [/regenerator-runtime/],
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  "targets": {
                    "esmodules": true
                  },
                  "bugfixes": true
                }
              ],
            ],
            plugins: ['@babel/plugin-transform-runtime']
          }
        }
      }
    ]
  }
};

  "scripts": {
    "build:legacy:webpack": "webpack --config legacy-webpack.config.js",
    "build:modern": "webpack --config modern-webpack.config.js",
    "build:legacy": "babel app.js --config-file ./babel-legacy.config.json --out-file  ./dist/app.legacy.js",
    "build": "npm run build:modern && npm run build:legacy:webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JackHowa/esmodule-no-module-doing-something.git"
  },
  "keywords": [
    "esmodules",
    "nomodule",
    "module",
    "mjs",
    "babel",
    "plugin-transform-runtime"
  ],
  "author": "jackhowa",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/JackHowa/esmodule-no-module-doing-something/issues"
  },
  "homepage": "https://github.com/JackHowa/esmodule-no-module-doing-something#readme",
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "webpack": "^5.12.0",
    "webpack-cli": "^4.3.1"
  },
  "dependencies": {
    "@babel/runtime": "^7.12.5",
    "core-js": "^3.8.2"
  }

    <script type="module" src="dist/app.modern.mjs"></script>
    <script nomodule defer src="dist/app.legacy.js"></script>

Open to feedback on editing this if necessary. Full repo https://github.com/JackHowa/esmodule-no-module-doing-something