Nuxt.js ES6 Issue

00-nuxt-es6-module-issue.md

Nuxt.js 1.4.1 has issues with untranspiled modules

This is easily reproducible with epic-spinners which exposes src/lib.js i.e. it's ES6 entry point˛

Env	Version
Nuxt.js	1.4.1
Vue.js	2.5.16
Webpack	3.12.0
Babel	(core)
Node.js	10.5.0
NPM	6.0.0.

Error

{ /home/bmarkovic/Devel/playground/nuxt-test/es-test/node_modules/epic-spinners/src/lib.js:1
(function (exports, require, module, __filename, __dirname) { import HollowDotsSpinner from './components/lib/Hollow
DotsSpinner.vue'
                                                                     ^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    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 (/home/bmarkovic/Devel/playground/nuxt-test/es-test/node_modules/vue-server-renderer/build.js:8330:16)
    at Object.<anonymous> (server-bundle.js:3463:18)
    at __webpack_require__ (webpack:/webpack/bootstrap 3290c2a33fe9c042eb37:25:0)
    at Object.48 (pages/index.vue?d474:1:0)
    at __webpack_require__ (webpack:/webpack/bootstrap 3290c2a33fe9c042eb37:25:0)
    at Object.45 (pages/index.vue:1:0) statusCode: 500, name: 'SyntaxError' }

Initial assesment

I have tried to debug and from what I've seen, the entry file gets wrapped in a function (the signature is seen above) but not transpiled. Import keyword even if the Node runtime understands it (in this particular case I'm using Node 10) is hidden behind a flag.

Another issue is that the syntax that gets passed on to "eval" (in this case Node's vm.runInThisCotext) has imports i.e. untranspiled top-level ES6 wrapped in a function which wouldn't be correct ES6 even if vm.runInThisCotext could interpret it.

All in all the issue is in Webpack configuration which is handled by Nuxt internally. I understand that even front-end modules should be exposing transpiled versions but ES6 modules will become more and more commonplace.

index.vue

<template>
  <section class="container">
    <div>
      <app-logo/>
      <h1 class="title">
        es-test
      </h1>
      <h2 class="subtitle">
        Nuxt.js project
      </h2>
      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>
        <half-circle-spinner
          :animation-duration="1000"
          :size="150"
          color="#333"
        />
    </div>
  </section>
</template>

<script>
import AppLogo from '~/components/AppLogo.vue'
import { HalfCircleSpinner } from 'epic-spinners'

export default {
  components: {
    AppLogo,
    HalfCircleSpinner
  }
}
</script>

<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

reproduce.sh

#!/bin/bash
vue init nuxt-community/starter-template nuxt-es-issue
cd nuxt-es-issue
npm insatll --save epic-spinners
# replace pages/index-vue with the one provided in this Gist
npm run dev     
Filename including extension…