v3.2.1 document is not defined

[roschaefer]

Hey, thanks for this great package! It's great to use just the animated icons of Sweetalert.

Unfortunately, we see an issue when upgrading from v3.2.0 to v.3.2.1:

We do SSR with Nuxtjs.

I quickly tried out the unpublished version v.4.0.0, built the package because there is no dist folder pushed to Github and it seems that might resolve the issue. At least I don't get the error above, only the icons itself are missing. I'm sure the error is on my side, maybe I don't understand how to properly build the package.

How about publishing v4.0.0 to npm and we give it another try?

To reproduce the error try out this PR: Human-Connection/Human-Connection#791

[JorgenVatle]

If you're on Nuxt, styles from 4.0 aren't properly injected into the server response. This might explain why you don't see the icons render properly.

You should be able to work around the issue by wrapping the icons around the <no-ssr> component.

Let me know if this helps! 👍

[JorgenVatle]

4.0 is now available as a pre-release:

npm i vue-sweetalert-icons@next

[roschaefer]

@JorgenVatle thank you for your quick reply!

On v4.0.0-rc1 I see this:

 WARN  Compiled with 1 warnings


 WARN  in ./components/Registration/CreateUserAccount.vue?vue&type=script&lang=js&

"export 'SweetalertIcon' was not found in 'vue-sweetalert-icons'

The exact same error as if I would yarn run build the package manually.

On v3.2.1, when I wrap all occurences of <sweetalert-icon> like this:

          <no-ssr>
            <sweetalert-icon icon="info" />
          </no-ssr>

The error persists. 😿

[JorgenVatle]

Oof. Sorry about that!

I'll take a crack at it first thing in the morning. 😊

[JorgenVatle]

4.0 should be live now. 🎉
See the example sub-repo for a working example using Nuxt.

@roschaefer Let me know if this update does the trick for you. 👍

[roschaefer]

@JorgenVatle from my commit message:

Install vue-sweetalert-icon globally

Updating the package to v4.0.0 still gives me this warning:

 WARN  Compiled with 1 warnings
 WARN  in ./components/PasswordReset/ChangePassword.vue?vue&type=script&lang=js&
"export 'SweetalertIcon' was not found in 'vue-sweetalert-icons'

According to this thread #3
I copy+pasted the example configuration:
https://github.com/JorgenVatle/vue-sweetalert-icons-preview/blob/master/nuxt.config.js
https://github.com/JorgenVatle/vue-sweetalert-icons-preview/blob/master/plugins/vue-sweetalert-icons.js

And now the compile warnings are gone. I'm going to ask the maintainer if the
local import is not possible with v4.0.0 anymore.

The local import option is gone now? 😿 Maybe update docs? I'm going to close this because I can happily update to v4.0.0.

Thank you @JorgenVatle you are super responsive.

[JorgenVatle]

@roschaefer Oh, thanks for the notice. Completely forgot about that! 😅

You should still be able to import the SFC directly.
Just update your import path accordingly:

import VueSweetalertIcon from 'vue-sweetalert-icons/src/components/icon';

export default {
  components: { VueSweetalertIcon }
}

I'll have to verify this though. 👍

[roschaefer]

@JorgenVatle I double-checked and it works. However when I run the tests I get the following error:

  ● Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /home/robert/Development/human-connection/Human-Connection/webapp/node_modules/vue-sweetalert-icons/src/components/icon.vue:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){<template>
                                                                                             ^

    SyntaxError: Unexpected token <

      49 | <script>
      50 | import gql from 'graphql-tag'
    > 51 | import SweetalertIcon from 'vue-sweetalert-icons/src/components/icon.vue'

which is obvious because jest is not supposed to parse vue single file components. It was my main motivation to do the local imports in order to avoid extra effort setting up the tests.

@JorgenVatle would you mind to simply export the SweetalertIcon along with the default export?

EDIT: For context, here's a PR Human-Connection/Human-Connection#1217 (review)

[JorgenVatle]

@roschaefer Oh, totally! Can't believe I missed that. 😂

Went ahead an pushed out a new update (v4.2.0) this should have your named export for SweetalertIcon, exporting just the Vue component from the package entry-point as documented in the readme. 👍