_typeof is not a function on commonjs import

[topaxi]

I'm trying to import clipboard from npm. This results in _typeof is not a function which seems to be a function defined by babel to support es2015 symbols.

The imported module is plain JavaScript so babel transpilation seems unnecessary to me (but we might not know this while importing). I think it might be some rollup issue where _typeof is wrongly hoisted?

My ember-cli-build.js configuration:

'use strict';

const GlimmerApp = require('@glimmer/application-pipeline').GlimmerApp;
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');

module.exports = function(defaults) {
  let app = new GlimmerApp(defaults, {
    rollup: {
      plugins: [
        resolve({ jsnext: true, module: true, main: true }),
        commonjs()
      ]
    }
  });

  return app.toTree();
};

My component definition:

import Component from '@glimmer/component';
import Clipboard from 'clipboard/dist/clipboard';

export default class TmpyClipboard extends Component {
  args: { content: string };

  didInsertElement() {
    let clipboard = new Clipboard(this.element, {
      text: () => this.args.content
    });
  }
};

[daveli]

@topaxi This is caused by double transpiling code. As recommended by documentation of https://github.com/rollup/rollup-plugin-babel you should exclude node_modules e.g:

'use strict';

const GlimmerApp = require('@glimmer/application-pipeline').GlimmerApp;
const babel = require('rollup-plugin-babel');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');

module.exports = function(defaults) {
  let app = new GlimmerApp(defaults, {
    rollup: {
      plugins: [
        babel({
          exclude: 'node_modules/**'
        }),
        resolve({
          jsnext: true,
          module: true,
          main: true
        }),
        commonjs()
      ]
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  return app.toTree();
};

[topaxi]

Nice this works!

We should probably make this easier to use or put some documentation on this on glimmerjs.com

Let me know how I can help out with this.