Exposing ES6 lib.js doesn't work with Webpack as configured in Nuxt.js

[bmarkovic]

This is easily reproducible by using Nuxt.js starter application created with Vue cli:

$  vue init nuxt-community/starter-template <project-name>

Then add some of Epic Spinners in some page, pages/index.vue is what I used for this Gits:

https://gist.github.com/bmarkovic/69c802d4eec12073b52a0aa37ee87606

Env	Version
Epic Spinners	1.0.3
Vue.js	2.5.16
Nuxt.js	1.4.1
Webpack	3.12.0
Babel	(core)	6.26.3
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.

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 AFAIK wouldn't be correct ES6 even if vm.runInThisCotext could interpret it.

When I manually import the transpiled module as:

const { HalfCircleSpinner } = require('epic-spinners/dist/lib/epic-spinners.min.js')

// or

import { HalfCircleSpinner } from 'epic-spinners/dist/lib/epic-spinners.min.js'

The spinner doesn't appear on the page, even if neither webpack nor Vue render complains.

[smartapant]

@bmarkovic thanks for submitting the bug! We'll try to fix this thing

[smartapant]

@bmarkovic also, what if you try doing import { HalfCircleSpinner } from 'epic-spinners' instead of importing from minified file?

[bmarkovic]

The error above was actually exactly from such an import line. You could have seen it if you had bothered to look at the Gist :)

There are details in the Gist why this is happening (namely, the "eval" in node.js gets handled the untraspiled ES6). Tldr of it is: your module should export minified ES5 as it's default entry point as generally majority of SPA webpack setups will not be expecting it not to (and that's mostly where the npm module will be used). The minified ES5 should actually work, tho, for that to be useful.

However, when I import from minified there is no error, but no spinner either.

[Eugenizer]

It depends on the version of the Node.js, if you will use stable (10<) - everything will work well.

[bmarkovic]

@Eugenizer Not true. I have just tested in an environment running Node 8.11.3 LTS and it behaves absolutely the same. To reproduce you must:

1. Try it with Nuxt
2. Trigger server-side rendering by hard-refreshing the page containing the spinner.

[Kirill255]

Unfortunately, I have the same issue.

[bmarkovic]

This should be solved with nuxt-edge. I haven't gotten round to testing its. See nuxt.js issue #3485

[Kirill255]

@bmarkovic with nuxt-edge works great, thx

[HugoHeneault]

I didn't manage to get it working even with nuxt@2, so I just use

  import { SpringSpinner } from 'epic-spinners/dist/lib/epic-spinners.min.js'

And I added in my main scss file:

@import '~epic-spinners/dist/lib/epic-spinners.min.css';

[xeno]

Still broken, this shouldn't be closed.

[skapin]

Same here, any clue ?

When npm build, i'm getting

ERROR in static/js/0.55e1a31d0eaa216bc664.js from UglifyJs
Unexpected character '`' [./node_modules/epic-spinners/src/services/utils.js:13,0][static/js/0.55e1a31d0eaa216bc664.js:1040,22]

  Build failed with errors.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vuestic-admin@1.4.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the vuestic-admin@1.4.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[lromor]

I have the same issue.

[billsomen]

2020, the same issue with : "epic-spinners": "^1.1.0", "nuxt": "^2.13.3",