I’m familiarising myself with Meteor/Vue3 and used the CLI meteor create --vue to scaffold a basic project. I noticed the client entry main.js was in \imports\ui and so moved it to the \client folder. I updated the imports to reflect the changes and the package.json and vite.config.js files so that meteor clientEntry points to the client/main.js file (as opposed to the imports\ui\main.js as originally scaffolded.
The app was built using VS Code and meteor run and it show correctly in the browser, but keeps coming up with the following Error message. I cannot find what’s causing this message. The app works fine, but I would like to get rid of this Error message - any suggestions, please, would be very welcomed. I’m sorry if I’m being a numpty, but have tried everything, especially altering the paths in the .vue and config files.
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
Hey @william, I did a quick test, and the app generated works fine.
I used meteor create --vue test-vue, entered the directory with cd test-vue, and then started it with meteor. Everything worked as expected.
It seems the issue is because of the changes you mentioned.
I noticed the client entry main.js was in \imports\ui and so moved it to the \client folder. I updated the imports to reflect the changes and the package.json and vite.config.js files so that meteor clientEntry points to the client/main.js file (as opposed to the imports\ui\main.js as originally scaffolded.
Those changes were not necessary, as this is how the Vite integration is designed. You can see the instructions in the meteor-vite repository. There is also an example project which you can use to compare with yours.
1 Like
Thanks for your reply, but the question still remains as to why the (sole) main.js client side launch file cannot be located in the /client folder, as it used to be. In fact the default scaffolded VUE 3 build has various idiosyncrasies including the following:
1.) It would appear that if the Error message (mentioned above) is to be avoided then a main.js file has to be located in the /imports folder, AND there has to be a main.js file in the /client folder with nothing in it! This is despite all efforts to change the client side launch file details in both pacakge.json and vite.config.json.
2.) Meteor npm install primevue primeicons - doesn’t properly work either. After I
import ‘/node_modules/primeicons/primeicons.css’;
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”
I get another ERROR message:
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
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 having followed the various sources of guidance, I still can’t get the icons to work.
I suspect these 2 problems are connected as each is related to identifying bundled resources.
Any help would be much appreciated. Thanks in advance.
The meteor-vite readme mentions the following:
You can leave your Meteor client entry file empty, but it’s necessary to enable Meteor import mode. In the example above, we can create an empty imports/entrypoint/meteor.ts file.
It seems likely that it might be something connected with the above. Maybe you could create an issue in that repo? Would definitely be good for the project to get feedback on such issues.