Uncaught SyntaxError: The requested module '/node_modules/node-emoji/index.js?v=2bd32581' does not provide an export named 'default'

[martinszeltins]

I installed a new Vue 3 + Vite.js app and used the example from the README and it is giving me this error:

Uncaught SyntaxError: The requested module '/node_modules/node-emoji/index.js?v=2bd32581' does not provide an export named 'default'

Here is my App.vue

<template>
  <div> <vue-file-toolbar-menu :content="my_menu" /> </div>
</template>

<script>
import VueFileToolbarMenu from 'vue-file-toolbar-menu'

export default {
  components: { VueFileToolbarMenu },

  data () { return { happy: false } },

  computed: {
    my_menu () {
      return [
        { text: "My Menu", menu: [
          { text: "Item 1", click: () => alert("Action 1") },
          { text: "Item 2", click: () => alert("Action 2") }
        ] }, {
          text: "My Button",
          active: this.happy,
          icon: this.happy ? "sentiment_very_satisfied" : "sentiment_satisfied",
          click: () => { this.happy = !this.happy }
        }
      ]
    }
  }
}
</script>

and my package.json:

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-file-toolbar-menu": "^2.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.0.0",
    "sass": "^1.49.7",
    "vite": "^2.7.2"
  }
}

[motla]

It's because Vite.js doesn't like old-fashioned CommonJS modules...
Fixed in 2.0.2
Thanks for reporting.

[alex-maereanu]

Having also some problems with vite
Internal server error: Failed to resolve import "../../node_modules/node-emoji/lib/emoji.json" from "node_modules/vue-file-toolbar-menu/src/Bar/BarButtonGeneric.vue". Does the file exist?

[alex-maereanu]

@motla also:
The requested module '/node_modules/tinycolor2/tinycolor.js?v=c858acb2' does not provide an export named 'default'
And also compiling erros:
::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

I'm using 2.0.2

[motla]

I'm sorry guys I've been a bit fast for the fix and forgot to change my local tests paths.... It worked on my computer though ^^
Can you try 2.0.3 ?
@alex-maereanu Concerning the 2nd issue you mention, it seems that it happens only on the dev, but the build works fine. I'll investigate this probably tomorrow.

[alex-maereanu]

Still receiving The requested module '/node_modules/tinycolor2/tinycolor.js?v=3a0134e1' does not provide an export named 'default' error even for 2.0.3

The rest looks fine.

[alex-maereanu]

Any chances of fixing this @motla?

[motla]

For now it seems vite build and vite preview works but not vite dev.
It's the same issue as before as Vite.js doesn't like old CommonJS modules which this module depends on.
This one will be harder to solve because it's not just a JSON file...
I look at it tomorrow...

[alex-maereanu]

Thanks!

[martinszeltins]

For now it seems vite build and vite preview works but not vite dev. It's the same issue as before as Vite.js doesn't like old CommonJS modules which this module depends on. This one will be harder to solve because it's not just a JSON file... I look at it tomorrow...

@motla Thank you! Perhaps it is time to migrate from CommonJS to ES Modules.

[motla]

@ckvv will update the dependency to support ESM format. In the meantime:

You also can Use optimizeDeps.include to force a linked package to be pre-bundled.

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['@ckpack/vue-color'],
  }
});

Originally posted by @ckvv in ckpack/vue-color#9 (comment)

[motla]

Fixed in v2.0.4

[motla]

Damned. No there is another sub module which is faulty...
Uncaught SyntaxError: The requested module '/node_modules/clamp/index.js?v=fa2dabf8' does not provide an export named 'default'

[motla]

Fixed in v2.0.5. Vite dev server seems to work fine now. Sorry for the delay.

[amaliaka]

Hi @motla, I found the same issue happen in V1.5.0 (latest Vue2 release)
SyntaxError: The requested module '/node_modules/node-emoji/index.js?v=b32396a1' does not provide an export named 'default'

[motla]

@amaliaka Vue2 is now deprecated. I guess this lib still supports Vue2+Webpack but not Vue2+Vite. Can you describe your development environment?

[amaliaka]

I am working on an old Vue2 project. Migrating Vue2 and Vue3 is not feasible for my current case. The project originally use Vue CLI + webpack but currently I try to migrate it to Vite due to some vulnerability issues

[motla]

@amaliaka the issue is that the Vue2 version of this library uses vue-color as a dependency, which is not compatible with Vite. However it has been ported to Vite+Vue3 with @ckpack/vue-color, but then it is not compatible with Vue2.
Two solutions I can suggest if you really want to use this library:

• you can fork it and remove vue-color dependency from package.json and all the code related to the color picker (assuming you don't use it in your project)
• or you can copy individual components from src/Bar in your project without using it as an NPM library and install only the dependencies needed