Uncaught Error: Cannot find module '../imports/ui/App.vue' & Failed to decode downloaded font:http://localhost:3000/node_modules/primeicons/fonts/primeicons.woff2 localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135

[willibeach]

The default scaffolded VUE 3 build has various idiosyncrasies including the following:

1.) Location of the main.js file; It would appear that the following Error message appears if the main.js file is moved from the scaffolded /imports/ui folder to the original /client folder. Furthermore a main.js file also has to be in the /client folder albeit with nothing in it. This occurs despite all efforts to change the client side launch details in both pacakge.json and vite.config.json. To replicate the problem; run>meteor create myVue3App --vue and then replace \client\main.js with \imports\ui\main.js making sure to replace any references in main.js and package.json and vite.config.js accordingly.

Uncaught Error: Cannot find module ‘…/imports/ui/App.vue’ at makeMissingError (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:234:12) at Module.resolve (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:249:17) at Module.moduleLink [as link] (modules.js?hash=5cc727ed431d9bd903ec812e35f1b13c011757d2:306:25) at app.js?hash=6c4464a9048f92378268973933d11c148928194b:78:11 at module (main.js:36:1) at fileEvaluate (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:388:7) at Module.require (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:270:27) at require (modules-runtime-hot.js?hash=0990604f99408d08cb3a9ff8e3bbfa6692eb6570:310:21) at app.js?hash=6c4464a9048f92378268973933d11c148928194b:145:15

2.) Import font files; The loader fails to identify and decode imported font files. The Error message given after importing the primevue primeicons package is:

Failed to decode downloaded font: http://localhost:3000/node_modules/primeicons/fonts/primeicons.woff2 localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135 localhost/:1 Failed to decode downloaded font: http://localhost:3000/node_modules/primeicons/fonts/primeicons.woff localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135 localhost/:1 Failed to decode downloaded font: http://localhost:3000/node_modules/primeicons/fonts/primeicons.ttf localhost/:1 OTS parsing error: invalid sfntVersion: 1008813135

To replicate on the basic scaffolded meteor create myVue3App --vue project:

run> meteor npm install primevue primeicons

then in main.js add: import PrimeVue from "primevue/config"; import Button from "primevue/button"; import ‘/node_modules/primeicons/primeicons.css’; ... app.use(PrimeVue) app.component('Button', Button); ... and then embed a reference to an icon in say, a Button component, inside a Vue template, such as this:

Button icon=“pi pi-user” label=“Click Me”

Clearly there is a configuration issue with the vite/meteor/Vue 3 scaffolded configuration, but having thrashed around checking all the references, imports and configurations are as I believe they should be after having followed the various sources of guidance, I still can’t get the icons to show, or get rid of the Error messages.

I suspect these 2 problems are connected as each is related to identifying bundled resources.

[harry-73]

Hi,

I use this package without any issue (at least this one) with this configuration:

• /client/main.js is blank
• import/ui/main.js has the code, i.e. import App from 'App.vue' ...
• in the vite.config.js, there is the entry:

 meteor: {
    clientEntry: 'imports/ui/main.js'
  }

• in package.json:

"meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  },

Hope, it will help

[willibeach]

Thanks Steph... and yes I agree I can make it work with the default scaffolding. However, my Q related to the idiosyncrasy of having to have two main.js files. the one in the \client folder must be blank, the other in imports/ui contains the startup code that largely used to be in the \clients\main.js file. I would like to understand why there cannot simply be one configurable client entry point as per any normal tool?

My second Q related to the use of Primevue Primeicons and the inability to access the primeicons font. Again this seems to be related to the tooling being unable to identify and decode the font file. I'm certain the path to the file is correct and having followed every option in the guidance available, I can see no reason why the simple example code of the default scaffolded project, doesn't show the Primevue icons when, for example, used in a Button component.

So whilst I'll happily stick to the default scaffolded configuration, even though I don't like the main.js point, I still can't include Primeicons in my vue project. And again, this has something to do with the quirky nature of the meteor/vue/vite tooling. Any help resolving this would be much appreciated. Thanks in advance.

[JorgenVatle]

Meteor-Vite works by hiding your app's npm dependencies and other module imports from the Meteor' bundler and compiling those using Vite instead of Meteor Isopack.

The Meteor-specific entrypoint (specified in your package.json) is used to force Meteor to include Atmosphere packages in your final production bundle. Without these explicit imports, the packages will simply be omitted from the bundle, which may lead to runtime errors if your app depends on that package during runtime.

The Vite entrypoint (specified in vite.config.{js|ts}) is used as your new application entrypoint. We analyze any imports made from this entrypoint to determine whether it provided by Meteor or available through npm. Imports for npm packages will be handled by Vite. Any Atmosphere package imports will be delegated to the pre-existing Meteor client bundle. If those packages support lazy-loading, we append explicit imports for those packages to your Meteor mainModule to "un-lazy-load" them.

Meteor's package lazy-loading has some good performance benefits, but dropping this in favor of Vite still brings serious performance benefits.

---

Over to the issues you're seeing. It seems like primeicons is being imported from your Meteor entrypoint rather than the Vite entrypoint. Or possibly both. A quick way to test whether this is the case is to point Meteor to an empty client entrypoint module:

Meteor entry

// package.json
{
"meteor": {
  "mainModule": {
    "client":  "client/main.js",
    "server": "server/main.js"
  }
}
}

// client/main.js
// (no content)

Vite entry

// vite.config.js
export default defineConfig({
  plugins: [
    vue(),
    meteorVite({
      clientEntry: 'client/main.vite.js',
    })
  ].
})

// client/main.vite.js
import { createApp } from 'vue';
import AppComponent from '../imports/ui/AppComponent.vue'

const App = createApp(AppComponent);

App.mount('#app')'

If you're still having issues, could you create a repository reproducing the issue? I have a feeling it's just a configuration issue But if something else is up, I'll have a fix out for you promptly for ya. 👍