'WebVRPolyfill' is not exported by webvr-polyfill.js - Rollup

[Rémi Sormain]

Description:

Hi !
I am trying to include webvr-polyfill in my JS project build with rollup.
I imported the module using
yarn add webvr-polyfill

then as suggested in the doc:

import WebVRPolyfill from 'webvr-polyfill';
const polyfill = new WebVRPolyfill();

but I then when I pack things using rollup (output format umd) I get :

[!] Error: 'default' is not exported by node_modules/webvr-polyfill/build/webvr-polyfill.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

If I try to specify the import with import { WebVRPolyfill } from 'webvr-polyfill';, I have

[!] Error: 'WebVRPolyfill' is not exported by node_modules/webvr-polyfill/build/webvr-polyfill.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

I checked the given link but adding WebVRPolyfill to the named export doesn't change anything.

Is there something I am not understanding on how to use the webvr-polyfill ? Since webvr-polyfill seems exported itself as a umd module I don't see why this happens.

Additional Information:

• webvr-polyfill version: 0.10.6

[Jordan Santell]

The export isn't a ES6 module, but infact UMD like you mentioned; generally rollup-plugin-commonjs is needed for the artifact; that should work for the first code sample you linked. Let me know if that works for ya

[Rémi Sormain]

Thanks for the reply @jsantell !
I've tried named export:

commonjs({
    namedExports: {
        'node_modules/webvr-polyfill/build/webvr-polyfill.js': ['WebVRPolyfill']
    }
}),

but it still gives me

[!] Error: 'default' is not exported by node_modules/webvr-polyfill/build/webvr-polyfill.js https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

At least it doesn't complain when I import the polyfill via the script tag method, so that's a workaround for now.

[Jordan Santell]

I'm able to import webvr polyfill via this minimal rollup configuration:

import commonjs from 'rollup-plugin-commonjs';
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: './index.js',
  output: {
    file: './out.js',
    format: 'umd',
    name: 'test',
  },
  plugins: [
    commonjs(),
    resolve(),
  ],
};

with this index.js successfully

import WebVRPolyfill from 'webvr-polyfill';
window.polyfill = new WebVRPolyfill();

[Rémi Sormain]

Thanks @jsantell !
I spent some time trying to go from the minimal version you provided to the specifics of my project. We're using rollup-plugin-node-globals and it turns out the plugin order matters a lot:

This causes the export error:

plugins: [
    nodeBuiltins(),
    nodeGlobals(),
    commonjs({
        namedExports: {         
            'node_modules/constitute/index.js': ['Container']
        }
    }),
    resolve(),
    // ...
],

whilst this doesn't:

plugins: [
    nodeBuiltins(),
    commonjs({
        namedExports: {         
            'node_modules/constitute/index.js': ['Container']
        }
    }),
    nodeGlobals(),    
    resolve(),
    // ...
],

I hope it can help anyone facing the issue, although it is an issue with rollup 😶.
Thanks again for your support @jsantell

[Jordan Santell]

Ay, rollup is my preferred build tool of choice, but often running into some config to work with all the different modules out there. If there's any build things we can do on this end to make it easier, let me know! But we're moving towards the WebXR spec (and related webxr-polyfill) where there's also a ES6 module build artifact as well