The `babel-preset-es20XX` (15, 16, 17) presets include transforms needed to convert features added in that specific year to code that is compatible with the previous version.

`babel-preset-env` includes transforms for all features that have landed in the spec, but only enables the ones needed to make the features work based on the set of environments you&#39;ve provided to it. If you pass no options to `env` it essentially works like `es2015, es2016, es2017` all together.

`babel-preset-react` is the set of transformations needed to convert React/Facebook-related syntax extensions like Flowtype and React&#39;s JSX.

Currently, I am using the [@google-cloud/storage](https://www.npmjs.com/package/@google-cloud/storage) NPM package to upload a file directly to a Google Cloud Storage bucket. This requires some trickery as I only have the image&#39;s base64 encoded string. I have to:

- Decode the string
- Save it as a file
- Send the file path to the below script to upload to Google Cloud Storage
- Delete the local file

I&#39;d like to avoid storing the file in the filesystem altogether since I am using Google App Engine and I don&#39;t want to overload the filesystem / leave junk files there if the delete operation doesn&#39;t work for whatever reason. This is what my upload script looks like right now:

    // Convert the base64 string back to an image to upload into the Google Cloud Storage bucket
    var base64Img = require(&#39;base64-img&#39;);
    var filePath = base64Img.imgSync(req.body.base64Image, &#39;user-uploads&#39;, &#39;image-name&#39;);

    // Instantiate the GCP Storage instance
    var gcs = require(&#39;@google-cloud/storage&#39;)(),
        bucket = gcs.bucket(&#39;google-cloud-storage-bucket-name&#39;);

    // Upload the image to the bucket
    bucket.upload(__dirname.slice(0, -15) + filePath, {
        destination: &#39;profile-images/576dba00c1346abe12fb502a-original.jpg&#39;,
        public: true,
        validation: &#39;md5&#39;
    }, function(error, file) {

        if (error) {
            sails.log.error(error);
        }

        return res.ok(&#39;Image uploaded&#39;);
    });

Is there anyway to directly upload the base64 encoded string of the image instead of having to convert it to a file and then upload using the path?

How do I upload a base64 encoded image (string) directly to a Google Cloud Storage bucket using Node.js?

I have been examining some of my string format options using the new f-string format.  I routinely need to unpack lists and other iterables of unknown length. Currently I use the following...

    &gt;&gt;&gt; a = [1, &#39;a&#39;, 3, &#39;b&#39;]
    &gt;&gt;&gt; (&quot;unpack a list: &quot; + &quot; {} &quot;*len(a)).format(*a)
    &#39;unpack a list:  1  a  3  b &#39;
This, albeit a bit cumbersome, does the job using pre-3.6 .format notation.
The new f-string format option is interesting given runtime string concatenation.  It is the replication of the number of {} that I am having problems with.  In my previous example, I simply created the necessary structure and unpacked within the .format() section.

Attempts to do this yielded one variant that worked, however:

### 1) Both curly brackets together doesn&#39;t unpack...

    &gt;&gt;&gt; &#39;unpack a list&#39;  f&#39; {{*a}}&#39;
    &#39;unpack a list {*a}&#39;

### 2) Adding spaces around the interior {} pair:

This works but leaves opening and closing braces {, } present:

    &gt;&gt;&gt; &#39;unpack a list&#39;  f&#39; { {*a} }&#39;
    &quot;unpack a list {1, 3, &#39;a&#39;, &#39;b&#39;}&quot;

### 2b) Concatenating the variants into one f-string

This made the look and syntax better, since the evaluation, apparently, is from left to right.  This, however, still left the enclosing curly brackets present:

    &gt;&gt;&gt; f&#39;unpack a list { {*a} }&#39;
    &quot;unpack a list {1, 3, &#39;a&#39;, &#39;b&#39;}&quot;

### 3) Tried automatic unpacking with just `{a}`
Perhaps, I was overthinking the whole procedure and hoping for some form of automatic unpacking.  This simply yielded the list representation with the curly brackets being replaced with `[]` :

    &gt;&gt;&gt; f&#39;unpack a list {a}&#39;
    &quot;unpack a list [1, &#39;a&#39;, 3, &#39;b&#39;]&quot;
    
What is required to suppress the curly brackets in variant (2) above, or must I keep using the existing `.format()` method?  I want to keep it simple and use the new capabilities offered by the f-string and not revert back beyond the python versions which pre-date what I am currently comfortable with.  I am beginning to suspect that f&#39;strings&#39; do not offer a complete coverage of what is offered by its `.format()` sibling.  I will leave it at that for now, since I haven&#39;t even ventured into the escape encoding and the inability to use \ in an f-string.  I have read the PEP and search widely, however, I feel I am missing the obvious or what I wish for is currently not possible.

EDIT several hours later:

### 4) Use subscripting to manually slice off the brackets: `str(a)[1:-2]`

I did find this variant which will serve for some cases that I need

    f&#39;unpack a list: {str(a)[1:-2]}&#39;
    &quot;unpack a list: 1, &#39;a&#39;, 3, &#39;b&quot;

But the slicing is little more than a convenience and still leaves the string quotes around the resultant.

### 5)  and the final solution from @SenhorLucas

     a = np.arange(10)
    
    print(f&quot;{*a,}&quot;)
    (0, 1, 2, 3, 4, 5, 6, 7, 8, 9)

Unpacking with trailing comma.

f-string syntax for unpacking a list with brace suppression

I&#39;m currently trying to understand about babel configuration, but got confused by `babel-preset-**`, there are many preset in babel, like `env`, `es2015`, `react` and others, I do understand that `babel-preset-es2015` is needed to transpile es2015 code to previous js code so it can be understood by most/older browser, what about `babel-preset-env`?

What are the differences between those presets? Can one use `env` without using `es2015` or vice versa? and what are the cases when we need those two presets to be present on our project build system?

Thank You.

Whats the difference between babel-preset-es2015 and babel-preset-env?

I'm currently trying to understand about babel configuration, but got confused by <code>babel-preset-**</code>, there are many preset in babel, like <code>env</code>, <code>es2015</code>, <code>react</code> and others, I do understand that <code>babel-preset-es2015</code> is needed to transpile es2015 code to previous js code so it can be understood by most/older browser, what about <code>babel-preset-env</code>?
What are the differences between those presets? Can one use <code>env</code> without using <code>es2015</code> or vice versa? and what are the cases when we need those two presets to be present on our project build system?
Thank You.

Ok, I&#39;m fed up trying.  
The `onEnter` method doesn&#39;t work. Any idea why is that? 

    // Authentication &quot;before&quot; filter
    function requireAuth(nextState, replace){
      console.log(&quot;called&quot;); // =&gt; Is not triggered at all 
      if (!isLoggedIn()) {
        replace({
          pathname: &#39;/front&#39;
        })
      }
    }
    
    // Render the app
    render(
      &lt;Provider store={store}&gt;
          &lt;Router history={history}&gt;
            &lt;App&gt;
              &lt;Switch&gt;
                &lt;Route path=&quot;/front&quot; component={Front} /&gt;
                &lt;Route path=&quot;/home&quot; component={Home} onEnter={requireAuth} /&gt;
                &lt;Route exact path=&quot;/&quot; component={Home} onEnter={requireAuth} /&gt;
                &lt;Route path=&quot;*&quot; component={NoMatch} /&gt;
              &lt;/Switch&gt;
            &lt;/App&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;,
      document.getElementById(&quot;lf-app&quot;)

Edit: 

The method is executed when I call `onEnter={requireAuth()}`, but obviously that is not the purpose, and I also won&#39;t get the desired parameters. 

onEnter not called in React-Router

I have been playing around with the feature in an SPA using TypeScript and native Promises, and I notice that even if I refactor a long-running function into an async function returning a promise, the UI is still unresponsive.

So my questions are:

 - How exactly does the new async/await feature help avoid blocking the UI in the browser? Are there any special extra steps one needs to take when using async/await to actually get a responsive UI?

 - Can someone create a fiddle to demonstrate the how async/await helps to make the UI responsive?

 - How does async/await relate to prior async features such as setTimeout and XmlHttpRequest?


Is async await truly non-blocking in the browser?

I need to get all possible subsets of an array.

Say I have this:

    [1, 2, 3]

How do I get this?

    [], [1], [2], [3], [1, 2], [2, 3], [1, 3], [1, 2, 3]

I am interested in all subsets. For subsets of specific length, refer to the following questions:

  * Finding subsets of size n: [1][1], [2][2]
  * Finding subsets of size &gt; 1: [1][3]


  [1]: https://stackoverflow.com/questions/5752002/find-all-possible-subset-combos-in-an-array
  [2]: https://stackoverflow.com/questions/37892738/generate-subsets-of-length-n
  [3]: https://stackoverflow.com/questions/24556889/subsets-of-an-arrays-with-n-elements-javascript

How to find all subsets of a set in JavaScript? (Powerset of array)

I am using a Cloud Function to call another Cloud Function on the free spark tier.

Is there a special way to call another Cloud Function? Or do you just use a standard http request?

I have tried calling the other function directly like so:

&lt;!-- language: lang-js --&gt;

    exports.purchaseTicket = functions.https.onRequest((req, res) =&gt; {    
      fetch(&#39;https://us-central1-functions-****.cloudfunctions.net/validate&#39;)
        .then(response =&gt; response.json())
        .then(json =&gt; res.status(201).json(json))
    })

But I get the error 

&gt; FetchError: request to
&gt; https://us-central1-functions-****.cloudfunctions.net/validate
&gt; failed, reason: getaddrinfo ENOTFOUND
&gt; us-central1-functions-*****.cloudfunctions.net
&gt; us-central1-functions-*****.cloudfunctions.net:443

Which sounds like firebase is blocking the connection, despite it being a google owned, and therefore it shouldn&#39;t be locked

&gt; the Spark plan only allows outbound network requests to Google owned
&gt; services.

How can I make use a Cloud Function to call another Cloud Function?

Calling a Cloud Function from another Cloud Function

Having read [Dr Rauschmayer&#39;s description][1] of recursive tail call optimisation in es6, I&#39;ve since been trying to recreate the &#39;zero-stack&#39; execution of the recursive factorial function he details.&lt;br/&gt;&lt;br/&gt;
Using the Chrome debugger to step between stack frames, I&#39;m seeing that the tail optimisation is not occurring and a stack frame is being created for each recursion.&lt;br/&gt;&lt;br/&gt;
I&#39;ve also tried to test the optimisation by calling the function without the debugger, but instead passing &lt;code&gt;100000&lt;/code&gt; to the factorial function. This throws a &#39;maximum stack&#39; error, which implies that it is, in fact, not optimised.

Here is my code:

    const factorial = (n, acc = 1) =&gt; n &lt;= 1 ? acc : factorial(n - 1, n * acc)
    console.log( factorial(100000) )

Result:

    Uncaught RangeError: Maximum call stack size exceeded





  [1]: http://www.2ality.com/2015/06/tail-call-optimization.html

ES6 Tail Recursion Optimisation Stack Overflow

I&#39;m in the process refactoring an Angular application and as I&#39;m moving components around to new directory locations, I&#39;m finding that dealing `@import` paths in the components&#39; SCSS files is getting a bit tedious. 

For example, let&#39;s say I have the file `src/_mixins.scss` in the root of my application and the component `src/app/my-widget/my-widget.component.scss` imports the SCSS like so `@import &#39;../../mixins&#39;;`. All well and good.

But then I decide that `my-widget.component` is really be a &quot;shared component&quot; under another component `my-thingy.component`, so I create a `shared` folder under `src/app/my-thingy` and move everything that was in `src/app/my-widget` into it.

I *hope* you&#39;re still with me... So, now I&#39;ve got `src/app/my-thingy/shared/my-widget` and I modify my SCSS file to import `@import &#39;../../../../mixins&#39;`. 

**Note:** This is a simplified example. Some of the paths get relatively deep (no pun intended... *or was it?*) and all of these `.` and `/` are a bit much.

**TL;DR**

It would be *super-handy* if from the start I could have just imported  `_mixins.scss` relative to the root in all of my components&#39; SCSS files so I don&#39;t have to keep messing with the `@import` paths when refactoring. (e.g. Something along the lines of `@import &#39;~/mixins&#39;`). **Does something like this exist?**

What I&#39;ve tried (and, sadly, has failed):

 1. `@import &#39;~/mixins&#39;; /** I had real hope for this one **/`
 2. `@import &#39;mixins&#39;; /** Just being overly optimistic here **/`
 3. `@import &#39;~//mixins&#39;; /** Now I&#39;m just making stuff up **/`

*I understand that I&#39;m already going to have to modify my mod files to point to the new path of the component with all of this &quot;moving stuff around&quot;, but...  hey, one less thing, right?*

SCSS Import Relative to Root

I am getting three warning messages when importing `request` in a barebone webpack project. A minimal example to reproduce the bug is available on [GitHub][2] (run `npm install` and `npm start`).

`Critical dependency: the request of a dependency is an expression`

How can I get rid of this warning?


----------
More information:

Webpack tries to resolve `require` calls statically to make a minimal bundle. When a library uses variables or expressions in a require call (such as `require(&#39;&#39; + &#39;nodent&#39;)` in [these lines][1] of `ajv`), Webpack cannot resolve them statically and imports the entire package.

My rationale is that this dynamic import is not desirable in production, and code is best kept warning-free. That means I want any solution that resolves the problem. E.g.:

 1. Manually configure webpack to import the required libraries and prevent the warnings from occurring.
 2. Adding a `hack.js` file to my project that overrides the require calls in some way.
 3. Upgrading my libraries. `ajv-5.0.1-beta.3` has a fix that silences the warnings. However, if I want to use it, I have to wait until it is released, and then until `har-validator` and `request` release subsequent updates. If there is a way to force `har-validator` to use the beta version of `ajv`, that would solve my problem.
 4. Other


  [1]: https://github.com/epoberezkin/ajv/blob/c19c02aa045f8d8fe55852b4303899f82e6de381/lib/async.js#L78
  [2]: https://github.com/Oduig/webpackfiddle

Webpack - Critical dependency: the request of a dependency is an expression

In some Webpack examples, you see reference to a &quot;rules&quot; array:


    module.exports = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
              fallback: &#39;style-loader&#39;,
              //resolve-url-loader may be chained before sass-loader if necessary
              use: [&#39;css-loader&#39;, &#39;sass-loader&#39;]
            })
          }
        ]
      },
      plugins: [
        new ExtractTextPlugin(&#39;style.css&#39;)
        //if you want to pass in options, you can do so:
        //new ExtractTextPlugin({
        //  filename: &#39;style.css&#39;
        //})
      ]
    }

(https://github.com/webpack-contrib/extract-text-webpack-plugin)

And in other, a loaders array:


    var ExtractTextPlugin = require(&quot;extract-text-webpack-plugin&quot;);
    module.exports = {
    	module: {
    		loaders: [
    			{
    				test: /\.css$/,
    				loader: ExtractTextPlugin.extract({
    					loader: &quot;css-loader&quot;
    				})
    			},
    			{ test: /\.png$/, loader: &quot;file-loader&quot; }
    		]
    	},
    	plugins: [
    		new ExtractTextPlugin({
    			filename: &quot;style.css&quot;,
    			allChunks: true
    		})
    	]
    };

(https://github.com/webpack/webpack/tree/master/examples/css-bundle)

What is the difference? Which should be used?

Rules vs Loaders in Webpack - What&#39;s the Difference?

I&#39;ve started using webpack2 (to be precise, `v2.3.2`) and after re-creating my config I keep running into an issue I can&#39;t seem to solve I get (sorry in advance for ugly dump):

    ERROR in ./src/main.js
    Module not found: Error: Can&#39;t resolve &#39;components/DoISuportIt&#39; in &#39;[absolute path to my repo]/src&#39;
    resolve &#39;components/DoISuportIt&#39; in &#39;[absolute path to my repo]/src&#39;
      Parsed request is a module
      using description file: [absolute path to my repo]/package.json (relative path: ./src)
        Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
        aliased with mapping &#39;components&#39;: &#39;[absolute path to my repo]/src/components&#39; to &#39;[absolute path to my repo]/src/components/DoISuportIt&#39;
          using description file: [absolute path to my repo]/package.json (relative path: ./src)
            Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
          after using description file: [absolute path to my repo]/package.json (relative path: ./src)
            using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
              as directory
                [absolute path to my repo]/src/components/DoISuportIt doesn&#39;t exist
              no extension
                Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
                [absolute path to my repo]/src/components/DoISuportIt doesn&#39;t exist
              .js
                Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
                [absolute path to my repo]/src/components/DoISuportIt.js doesn&#39;t exist
              .jsx
                Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration
                [absolute path to my repo]/src/components/DoISuportIt.jsx doesn&#39;t exist
    [[absolute path to my repo]/src/components/DoISuportIt]
    [[absolute path to my repo]/src/components/DoISuportIt]
    [[absolute path to my repo]/src/components/DoISuportIt.js]
    [[absolute path to my repo]/src/components/DoISuportIt.jsx]

**package.json**

&lt;!-- language: lang-json --&gt;

    {
      &quot;version&quot;: &quot;1.0.0&quot;,
      &quot;main&quot;: &quot;./src/main.js&quot;,
      &quot;scripts&quot;: {
        &quot;build&quot;: &quot;webpack --progress --display-error-details&quot;
      },
      &quot;devDependencies&quot;: {
        ...
      },
      &quot;dependencies&quot;: {
        ...
      }
    }

In terms of the `browser` field it&#39;s complaining about, the documentation I&#39;ve been able to find on this is: [`package-browser-field-spec`][1]. There is also webpack documentation for it, but it seems to have it turned on by default: [`aliasFields: [&quot;browser&quot;]`][2]. I tried adding a `browser` field to my `package.json` but that didn&#39;t seem to do any good.

**webpack.config.js**

&lt;!-- language: lang-js --&gt;

    import path from &#39;path&#39;;
    const source = path.resolve(__dirname, &#39;src&#39;);
    
    export default {
      context: __dirname,
      entry: &#39;./src/main.js&#39;,
      output: {
        path: path.resolve(__dirname, &#39;dist&#39;),
        filename: &#39;[name].js&#39;,
      },
      resolve: {
        alias: {
          components: path.resolve(__dirname, &#39;src/components&#39;),
        },
        extensions: [&#39;.js&#39;, &#39;.jsx&#39;],
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            include: source,
            use: {
              loader: &#39;babel-loader&#39;,
              query: {
                cacheDirectory: true,
              },
            },
          },
          {
            test: /\.css$/,
            include: source,
            use: [
              { loader: &#39;style-loader&#39; },
              {
                loader: &#39;css-loader&#39;,
                query: {
                  importLoader: 1,
                  localIdentName: &#39;[path]___[name]__[local]___[hash:base64:5]&#39;,
                  modules: true,
                },
              },
            ],
          },
        ],
      },
    };

**src/main.js**

&lt;!-- language: lang-js --&gt;

    import DoISuportIt from &#39;components/DoISuportIt&#39;;

**src/components/DoISuportIt/index.jsx**

&lt;!-- language: lang-js --&gt;

    export default function() { ... }

For completeness, `.babelrc`

&lt;!-- language: lang-json --&gt;

    {
      &quot;presets&quot;: [
        &quot;latest&quot;,
        &quot;react&quot;
      ],
      &quot;plugins&quot;: [
        &quot;react-css-modules&quot;
      ],
      &quot;env&quot;: {
        &quot;production&quot;: {
          &quot;compact&quot;: true,
          &quot;comments&quot;: false,
          &quot;minified&quot;: true
        }
      },
      &quot;sourceMaps&quot;: true
    }

What am I doing wrong/missing?

  [1]: https://github.com/defunctzombie/package-browser-field-spec
  [2]: https://webpack.js.org/configuration/resolve/#resolve-aliasfields


Field &#39;browser&#39; doesn&#39;t contain a valid alias configuration

I would like to share how to bundle an application that acts as a **plugin host** and how it can load installed plugins **dynamically**.

1. Both the application and the plugins are bundled with Webpack 
2. The application and plugins are compiled and distributed *independently*.

There are several people on the net who are looking for a solution to this problem:

* https://stackoverflow.com/questions/38502035/multi-project-build-and-dynamically-loading-modules-with-webpack
* https://stackoverflow.com/questions/42780950/loading-prebuilt-webpack-bundles-at-runtime
* https://stackoverflow.com/questions/40035445/how-to-expose-objects-from-webpack-bundle-and-inject-external-libs-into-compiled-bundle
* Dynamic Requires  
  https://github.com/webpack/webpack/issues/118

The solution described here is based on @sokra&#39;s Apr 17, 2014 comment on Webpack issue #118 and is slightly adapted in order to work with Webpack 2.
https://github.com/webpack/webpack/issues/118

Main points:

* A plugin needs an ID (or &quot;URI&quot;) by which it registers at the backend server, and which is unique to the application.

* In order to avoid chunk/module ID collisions for every plugin, individual `JSONP` loader functions will be used for loading the plugin&#39;s chunks.

* Loading a plugin is initiated by dynamically created `&lt;script&gt;` elements (instead of `require()`) and let the main application eventually consume the plugin&#39;s exports through a `JSONP` callback.

Note: You may find Webpack&#39;s &quot;JSONP&quot; wording misleading as actually no `JSON` is transferred but the plugin&#39;s Javascript wrapped in a &quot;loader function&quot;. No padding takes place at server-side.

**Building a plugin**

A plugin&#39;s build configuration uses Webpack&#39;s `output.library` and `output.libraryTarget` options.

Example plugin configuration:

    module.exports = {
      entry: &#39;./src/main.js&#39;,
      output: {
        path: path.resolve(__dirname, &#39;./dist&#39;),
        publicPath: &#39;/&#39; + pluginUri + &#39;/&#39;,
        filename: &#39;js/[name].js&#39;,
        library: pluginIdent,
        libraryTarget: &#39;jsonp&#39;
      },
      ...
    }

It&#39;s up to the plugin developer to choose an unique ID (or &quot;URI&quot;) for the plugin and make it available in the plugin configuration. Here I use the variable `pluginURI`:

    // unique plugin ID (using dots for namespacing)
    var pluginUri = &#39;com.companyX.pluginY&#39;

For the `library` option you also have to specify an unique name for the plugin. Webpack will use this name when generating the `JSONP` loader functions. I derive the function name from the plugin URI:

    // transform plugin URI into a valid function name
    var pluginIdent = &quot;_&quot; + pluginUri.replace(/\./g, &#39;_&#39;)

Note that when the `library` option is set Webpack derives a value for the `output.jsonpFunction` option automatically.

When building the plugin Webpack generates 3 distribution files:

    dist/js/manifest.js
    dist/js/vendor.js
    dist/js/main.js

Note that `vendor.js` and `main.js` are wrapped in JSONP loader functions whose names are taken from `output.jsonpFunction` and `output.library` respectively.

Your backend server must serve the distribution files of each installed plugin. For example, my backend server serves the content of a plugin&#39;s `dist/` directory under the plugin&#39;s URI as the 1st path component:

    /com.companyX.pluginY/js/manifest.js
    /com.companyX.pluginY/js/vendor.js
    /com.companyX.pluginY/js/main.js

That&#39;s why `publicPath` is set to `&#39;/&#39; + pluginUri + &#39;/&#39;` in the example plugin config.

Note: The distribution files can be served as static resources. The backend server is not required to do any padding (the &quot;P&quot; in `JSONP`). The distribution files are &quot;padded&quot; by Webpack already at build time.

**Loading plugins**

The main application is supposed to retrieve the list of the installed plugin (URI)s from the backend server.

    // retrieved from server
    var pluginUris = [
      &#39;com.companyX.pluginX&#39;,
      &#39;com.companyX.pluginY&#39;,
      &#39;org.organizationX.pluginX&#39;,
    ]

Then load the plugins:

    loadPlugins () {
      pluginUris.forEach(pluginUri =&gt; loadPlugin(pluginUri, function (exports) {
        // the exports of the plugin&#39;s main file are available in `exports`
      }))
    }

Now the application has access to the plugin&#39;s exports. At this point, the original problem of loading an independently compiled plugin is basically solved :-)

A plugin is loaded by loading its 3 chunks (`manifest.js`, `vendor.js`, `main.js`) in sequence. Once main.js is loaded the callback will be invoked.

    function loadPlugin (pluginUri, mainCallback) {
      installMainCallback(pluginUri, mainCallback)
      loadPluginChunk(pluginUri, &#39;manifest&#39;, () =&gt;
        loadPluginChunk(pluginUri, &#39;vendor&#39;, () =&gt;
          loadPluginChunk(pluginUri, &#39;main&#39;)
        )
      )
    }

Callback invocation works by defining a global function whose name equals `output.library` as in the plugin config. The application derives that name from the `pluginUri` (just like we did in the plugin config already).
    
    function installMainCallback (pluginUri, mainCallback) {
      var _pluginIdent = pluginIdent(pluginUri)
      window[_pluginIdent] = function (exports) {
        delete window[_pluginIdent]
        mainCallback(exports)
      }
    }

A chunk is loaded by dynamically creating a `&lt;script&gt;` element:

    function loadPluginChunk (pluginUri, name, callback) {
      return loadScript(pluginChunk(pluginUri, name), callback)
    }

    function loadScript (url, callback) {
      var script = document.createElement(&#39;script&#39;)
      script.src = url
      script.onload = function () {
        document.head.removeChild(script)
        callback &amp;&amp; callback()
      }
      document.head.appendChild(script)
    }

Helper:
    
    function pluginIdent (pluginUri) {
      return &#39;_&#39; + pluginUri.replace(/\./g, &#39;_&#39;)
    }
    
    function pluginChunk (pluginUri, name) {
      return &#39;/&#39; + pluginUri + &#39;/js/&#39; + name + &#39;.js&#39;
    }


Solution: load independently compiled Webpack 2 bundles dynamically

I&#39;m trying to mock a call to a service but I&#39;m struggeling with the following message: **The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables**.

I&#39;m using babel with ES6 syntax, jest and enzyme.


I have a simple component called `Vocabulary` which gets a list of `VocabularyEntry`-Objects from a `vocabularyService` and renders it. 

    import React from &#39;react&#39;;
    import vocabularyService from &#39;../services/vocabularyService&#39;;

    export default class Vocabulary extends React.Component {

    render() {
        
        let rows = vocabularyService.vocabulary.map((v, i) =&gt; &lt;tr key={i}&gt;
                &lt;td&gt;{v.src}&lt;/td&gt;
                &lt;td&gt;{v.target}&lt;/td&gt;
            &lt;/tr&gt;
        );
        // render rows
     }
     }

The `vocabularyServise` ist very simple:
     
      import {VocabularyEntry} from &#39;../model/VocabularyEntry&#39;;

      class VocabularyService {
    
      constructor() {
           this.vocabulary = [new VocabularyEntry(&quot;a&quot;, &quot;b&quot;)];
      }
    } 
    export default new VocabularyService();`


Now I want to mock the `vocabularyService` in a test:

    import {shallow} from &#39;enzyme&#39;;
    import React from &#39;react&#39;;
    import Vocabulary from &quot;../../../src/components/Vocabulary &quot;;
    import {VocabularyEntry} from &#39;../../../src/model/VocabularyEntry&#39;

    jest.mock(&#39;../../../src/services/vocabularyService&#39;, () =&gt; ({

    vocabulary: [new VocabularyEntry(&quot;a&quot;, &quot;a1&quot;)]

    }));

    describe(&quot;Vocabulary tests&quot;, () =&gt; {

    test(&quot;renders the vocabulary&quot;, () =&gt; {
        
        let $component = shallow(&lt;Vocabulary/&gt;);

        // expect something

    });
});

Running the test causes an error: Vocabulary.spec.js: babel-plugin-jest-hoist: The module factory of `jest.mock()` is not allowed to reference any out-of-scope variables.
Invalid variable access: VocabularyEntry.

As far as I unterstood, I cannot use the VocabularyEntry because it is not declares (as jest moves the mock definition to the top of the file).

Can anyone please explain how I can fix this? I saw solutions which required the references insinde the mock-call but I do not understand how I can do this with a class file.



Service mocked with Jest causes &quot;The module factory of jest.mock() is not allowed to reference any out-of-scope variables&quot; error

Recently i started working on web pack and react-scripts and i would like to know the advantages and disadvantages using them and how they are different from each other.

Difference between Webpack/Babel and react-scripts

A small project I started make use a node module (installed via **npm**) that declares `const` variables. Running and testing this project is well, but browserify fails when UglifyJS is executed.

&gt; Unexpected token: keyword (const)

Here is a generic Gulp file that I have successfully been using for a few other past projects without this issue (i.e. without that particular node module).


### gulpfile.js
&lt;!-- language: lang-js --&gt;

    &#39;use strict&#39;;

    const browserify = require(&#39;browserify&#39;);
    const gulp = require(&#39;gulp&#39;);
    const source = require(&#39;vinyl-source-stream&#39;);
    const derequire = require(&#39;gulp-derequire&#39;);
    const buffer = require(&#39;vinyl-buffer&#39;);
    const uglify = require(&#39;gulp-uglify&#39;);
    const sourcemaps = require(&#39;gulp-sourcemaps&#39;);
    const gutil = require(&#39;gulp-util&#39;);
    const path = require(&#39;path&#39;);
    const pkg = require(&#39;./package&#39;);
    const upperCamelCase = require(&#39;uppercamelcase&#39;);

    const SRC_PATH = path.dirname(pkg.main);
    const DIST_PATH = path.dirname(pkg.browser);

    const INPUT_FILE = path.basename(pkg.main);
    const OUTPUT_FILE = path.basename(pkg.browser);

    const MODULE_NAME = upperCamelCase(pkg.name);


    gulp.task(&#39;default&#39;, () =&gt; {
      // set up the browserify instance on a task basis
      var b = browserify({
        entries: INPUT_FILE,
        basedir: SRC_PATH,
        transform: [&#39;babelify&#39;],
        standalone: MODULE_NAME,
        debug: true
      });

      return b.bundle()
        .pipe(source(OUTPUT_FILE))
        .pipe(buffer())
        .pipe(derequire())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .on(&#39;error&#39;, gutil.log)
        .pipe(sourcemaps.write(&#39;.&#39;))
        .pipe(gulp.dest(DIST_PATH))
      ;
    });

I have tried fixing this by replace all `const` to `var` in that npm-installed module, and everything is fine. So I do not understand the failure.

What&#39;s wrong with `const`? Unless someone uses IE10, *all* major browsers support this syntax.

Is there a way to fix this without requiring a change to that node module?


## Update

I have temporarily (or permanently) replaced UglifyJS with [Butternut](https://github.com/Rich-Harris/butternut) and seem to work.

UglifyJS throws unexpected token: keyword (const) with node_modules

I was setting up Webpack for my React project and got confused between `babel`, `babel-core`, `babel-loader`, `babel-preset-2015` and `babel-preset-react`. I know that Babel is needed to transform ES7 or ES6 code to ES5 but in my `package.json` I have installed all these dependencies except Babel and they also as `devDependencies`.

Can someone please explain what&#39;s the difference between all these and why all of them are needed for my project? Isn&#39;t there any single dependency to replace them all? And if they are so important, why are they included as  `devDependencies`? 

babel vs babel-core vs babel-loader vs babel-preset-2015 vs babel-preset-react vs babel-polyfill

I`m tryng to use Babel-loader on an old project, and i notice some issues regarding when babel loader is working on wrapped objects, is this its default behaviour ? I am not sure if this is a bug or something im doing wrong, i could not find much about it over google, so this is my last resource.


Would i need to change something to my code to make it work ?

This are my current specs:
 Webpack: 3.19.0
 babel/core: 7.0.0-beta.34
 babel-loader: 8.0.0-beta.0

Please refer to my packages.json if needed:

http://paste.ubuntu.com/26187880/

I`m tryng to load a single file wrapped in a function:

http://paste.ubuntu.com/26187814/

Resuming, something old, that is built like this:


    (  window.global = { } )();


This is my webpack config:


    const webpackConfig = {
        context: __dirname,
        entry: {
            app: &#39;../../JavaScript/Namespacing.js&#39;
        },
        module: {
            rules: [
              {
                test: /.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: &#39;babel-loader&#39;,
                }
              }
            ]
        },
        output: {
          path: __dirname + &quot;/../../static/js&quot;,
          filename: &quot;[name].js&quot;
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: &quot;jquery&quot;,
                jQuery: &quot;jquery&quot;,
                &quot;window.jQuery&quot;: &quot;jquery&quot;
            })
        ],
    }

And the error i get on my file is the following:

`Plugin/Preset files are not allowed to export objects, only functions.`

So, am i missing something ? 

Thanks for any help.






Content Type	Original Author	Original Content on Stackoverflow
Question	xcode	View Question on Stackoverflow
Solution 1 - Javascript	loganfsmyth	View Answer on Stackoverflow

Whats the difference between babel-preset-es2015 and babel-preset-env?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

f-string syntax for unpacking a list with brace suppression

How do I upload a base64 encoded image (string) directly to a Google Cloud Storage bucket using Node.js?

Attributions