2

I'm trying to import the mule uploader package in es6, but the source file uses an IIFE that expects the window scope to be passed as a parameter.

What is the correct es6 syntax for importing the package and passing in the correct parameters to the IIFE?

Note: the problem with import { mule_upload } from 'mule-uploader isn't that the code isn't there or being executed. The problem is the correct scope or namespace is not being passed in with the IIFE runs.

App.jsx

import { mule_upload } from 'mule-uploader'
// this runs the mule-uploader file with the IIFE
// since `this` is not `window` at this point,
// the mule-uploader object has the incorrect scope/namespace
console.log(this) // undefined

// ... react logic
componentDidMount() {
  // define settings
  // this won't work because the namespace is undefined
  mule_upload(settings)
}
Derek
  • 11,980
  • 26
  • 103
  • 162
  • Have you tried npm install? – Rajesh Nov 10 '17 at 09:30
  • @Rajesh, Yes, I'm importing after `npm install --save mule-uploader` – Derek Nov 10 '17 at 09:31
  • May you post an [mcve] showing the issue? – evolutionxbox Nov 10 '17 at 09:32
  • Any module that you create is wrapped inside an IIFE to prevent bleeding. You can check debug version of your bundle as well. Try `import * as Mule from '...'` or `import Mule from '...'` – Rajesh Nov 10 '17 at 09:34
  • @Rajesh, Yes, I know, I just don't know how to pass in an argument to an IIFE while importing it in `es6`. Tried both, doesn't work. – Derek Nov 10 '17 at 09:38
  • You dont have to. If it is expecting an arg, it must have an exposed method to set it. As for `window`, it is passed as a default arg by bundler to your module in non-strict mode. I guess you are looking in the wrong area. Rather share the error you are getting – Rajesh Nov 10 '17 at 09:39
  • @Rajesh The error I'm getting is a console.log message from this logic: https://github.com/cinely/mule-uploader/blob/b052b62627cea8ce116c699247a7d328ccb7661b/dist/mule-uploader.js#L105. – Derek Nov 10 '17 at 09:41
  • Depends on your loader but the problem is not the IIFE it is that the IIFE takes `(this`) – Aluan Haddad Nov 12 '17 at 04:23

2 Answers2

1

How can I pass in the correct parameters to the IIFE?

You cannot. An IIFE does not take any arguments - it already was called.

What is the correct es6 syntax for importing the package?

I don't think it's possible to import that file as a module, neither in ES5 nor in ES6. In modules, this is not the global object. That code won't work.

You might want to issue a feature request for having the library available as an importable module (that actually exports something), instead of a script that defines a global variable. For backcompat, you can suggest them to use the UMD pattern.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1

An IIFE does not take any arguments

False ! Since the correct ES6 syntax of an IIFE is :

 (() => {
 }());

You can use arguments that way :

  ((param) => {
      console.log(`My IIFE + ${param} !`);
  })("myParam");
  // it will return => My IIFE + myParam !

or simply :

  (param => console.log(`My IIFE + ${param} !`))("myParam");

if you only have one argument...

Drozerah
  • 236
  • 3
  • 9
  • In this way you coded it up it does _technically_ take in an argument but you'd have to hardcode it wherever you are declaring the expression itself, which doesn't help. So while you're technically correct in this answer, @Bergi's answer is also correct and is much more applicable and helpful. – Brady Dowling Aug 21 '20 at 15:00