TypeError: Cannot read property 'bind' of undefined

[coreyward]

I think there's something wrong with the build or the instructions (maybe a dependency?). I tried to use this, but no matter what I tried I got the above error. Even just doing import { penumbra } from '@transcend-io/penumbra'; in a webpack/React app or adding the pre-built build/penumbra.js to an HTML page a results in the error.

[eligrey]

What browser(s) are you experiencing this error on?

[coreyward]

Chrome 85.0.4183.121.

In Firefox 80.0.1 and 81.0.1, a quick appendChild results in TypeError: o.push is undefined.

Safari 14.0 similarly complains: TypeError: undefined is not an object (evaluating 'o.push.bind')

[coreyward]

Hmm, actually, I'm able to get it to work fine if I just use the pre-built file in a plain HTML file that isn't being touched by Webpack (as in webpack is not used on the page and is not loaded by any other dependencies). I suspect there's something unconventional happening with the way this library uses Webpack. Unfortunately I'm using a framework that doesn't provide any mechanisms for manipulating the webpack configuration: https://github.com/sanity-io/sanity

[michaelfarrell76]

is there any way for you to just copy in the penumbra files post webpack build? it's really as simple as that

our webpack plugin looks like:

  plugins: [
    // Copy in penumbra workers
    new CopyPlugin({
      patterns: [
        {
          from: `${PENUMBRA_DIRECTORY}/penumbra.worker.js`,
          to: `${outputPath}/penumbra.worker.js`,
        },
        {
          from: `${PENUMBRA_DIRECTORY}/penumbra.js`,
          to: `${outputPath}/penumbra.js`,
        },
      ],
    }),

where PENUMBRA_DIRECTORY is absolute path to the node_modules build

/**
 * Path to penumbra build
 */
module.exports.PENUMBRA_DIRECTORY = join(
  __dirname,
  'node_modules',
  '@transcend-io/penumbra',
  'build',
);

and outputPath is the compiled build.

[coreyward]

@michaelfarrell76 I would need to have a separate Webpack configuration to do anything, and I'm doubtful that would work in a plugin like I'm trying to build. For context, today there is no way to securely upload files to the Sanity.io service via the open source Studio CMS. I'm working on a plugin for the Studio that that will encrypt files prior to upload (access to the uploaded assets is public) and store the generated key in the Studio dataset (access to which is authenticated). As a result, I'm fairly constrained in terms of the configuration.

I'm spiking on doing this in an iframe and using postMessage to send the file back up to the parent frame for upload, but it's not ideal— Penumbra will be loaded for each iframe on the page individually, and there's the additional potential for exposure of the generated key through a misconfigured origin (again, this is a plugin, so I won't have any access to the origin hostname in a production setting).

[michaelfarrell76]

let us know if you find out anything more! a bit tricky for us to help without having control over the webpack compilation but happy to address any questions you may have

[coreyward]

I haven't run into this before, so I'm kind of unsure why any Webpack configuration is required. Is there something in particular that Penumbra does that means it isn't possible to build it in a way that it can be imported and used like any other package? The statically built library contains references to webpack that conflict which isn't something I would expect.

[eligrey]

@coreyward The reason that importing penumbra is a little more involved than other packages is because we include a required web worker module.

This web worker module is not currently inlined into our entry bundle. It should be possible to inline the web worker module so that it can be loaded from a Blob URI generated at runtime from minified JS source.

I've filed an issue for this feature: #153

[coreyward]

@eli Thanks for the context! That sounds like a great improvement. Any idea what sort of rough ETA we might be looking at for something like that?

[eligrey]

@coreyward Also your specific error appears to be related to window.webpackJsonp being a truthy non-array value in your environment.

I noticed this in our generated code from Webpack:

As for an ETA for inlining the penumbra worker script, I can't give any hard figures at this time as it is not my current priority. Once I start working on it, it will probably take a few days (<5) to complete.

[coreyward]

Ohhh yeah it looks like Sanity is still using Webpack 3, where window.webpackJsonp was a function. @kmelve Are you aware of any efforts at Sanity to update to Webpack 4+?

[kmelve]

Yes! We're actually starting that work now, and I believe we're going right to 5.

[michaelfarrell76]

hey @coreyward @kmelve is this still an issue for you all?