Exposing ES6 lib.js doesn't work with Webpack as configured in Nuxt.js about epic-spinners

[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! [email protected] build: `node build/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[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

[lromor]

I have the same issue.

[billsomen]

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