Add CommonJS build: Bug? Unexpected token {

[larsenwork]

Using it with Nuxt (with server side rendering turned off for the plugin) and I'm getting this error when I reload a page:

{ /Users/andreaslarsen/Git/larsenwork.github.io/node_modules/eagle.js/dist/eagle.js:8
import { throttle } from 'lodash';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:74:7)
    at createScript (vm.js:246:10)
    at Object.runInThisContext (vm.js:298:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at r (/Users/andreaslarsen/Git/larsenwork.github.io/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:3613:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 3d086a4db7f344e8b701:25:0)
    at Object.67 (pages/talks/piter.vue?6872:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 3d086a4db7f344e8b701:25:0)
    at Object.49 (pages/talks/piter.vue:1:0) statusCode: 500, name: 'SyntaxError' }

The vue file looks like this:

<template>
  <div class="c-presentation eg-slideshow">
    <slide :steps="4">
      <p v-if="step >= 1">{{ step }}</p>
      <p v-if="step >= 2">{{ step }}</p>
      <p v-if="step >= 3">{{ step }}</p>
      <p v-if="step >= 4">{{ step }}</p>
    </slide>
  </div>
</template>

<script>
import eagle from 'eagle.js'
export default {
  mixins: [eagle.slideshow],
}
</script>

and I'm registering the plugin like this

import Vue from 'vue'
import Eagle from 'eagle.js'

Vue.use(Eagle)

and then like this in nuxt config

  plugins: [
    { src: '~/plugins/eagle', ssr: false },
  ],

[yaodingyd]

Eagle.js currently only has ES6 dist file. By default Nuxt would expect all your node_modules files have CommonJS modules. So the ES6 module would fail.

You can add the following to your nuxt.config.js, inside build-> extend:

config.module.rules.push({
    test: /\.(js)$/,
    loader: 'babel-loader',
    include: /(node_modules\/eagle.js)/
})

[larsenwork]

@yaodingyd thanks for the reply — tried the above and also stuff like

      const babelLoader = config.module.rules.find(
        rule => rule.loader === 'babel-loader'
      )
      babelLoader.exclude = /node_modules\/(?!eagle.js)/

but still get the same error. Any ideas?

[yaodingyd]

You can go to node_modules/eagle.js/dist/eagle.js and change all ES6 module to CommonJS module, namely:

import { throttle } from 'lodash';
import hljs from 'highlight.js';
...
// at the end of of file
export default main;

to

const throttle = require('lodash').throttle;
const hljs = require('highlight.js').default;
...
// at the end of of file
module.export = main;

[larsenwork]

Cheers, should anybody else be interested I ended up just using a subset like this (bundle size was initially very big): https://github.com/Zulko/eagle.js/compare/master...larsenwork:master#diff-1c90ff38a08209f9ebd4d05d1e43358e

And then changing rollup config to cjs https://github.com/Zulko/eagle.js/compare/master...larsenwork:master#diff-6928d5da7f63eff413032c5c409ba617

[yaodingyd]

Reopen this for tracking CommonJS build

[larsenwork]

Cool, should be fairly easy with something like https://github.com/jonathantneal/postcss-lab-function/blob/master/.rollup.js#L6-L7 and then this in pkg json: https://github.com/jonathantneal/postcss-lab-function/blob/master/package.json#L10-L11

[yaodingyd]

0.2.0 is out now :-)