everything was working just fine and suddenly now Vue components are not receiving the props sent on router-view.
I've tried deleting the 'local' and .cache folders and running
meteor
again but still the other Vue components don't get the props (undefined).
I've tried to build some previous commits of my repo but everywhere the props are not being sent now.
in a neighboring directory, another meteor-vuejs-vuerouter proj is still working perfectly with similar routing.
I've changed browsers, tried terminal instead of iterm2, etc.
In Vue tools, I can see App.vue getting the data from subscription and computed properties are generated. but then in the child Vue component, the props show as 'undefined'.
Any ideas on where in the build process of meteor or any other place that vue-router could be causing this problem?
Many thanks in advance.
even when my package.json file had "vue-router": "^3.0.0", in both projects, in the project where the router was misbehaving i found the vue-router 2.0 version instead of 3.0 ..i don't know how it crept in..someone suggested package-lock.json is useful but for now i manually deleted the older version n copied the newer folder into node_modules and it now works!
Related
I need help. I'm developing a vue-3 (Quasar/Electron) app with a separate component library. What I'm trying to get working is to develop the component library locally alongside the main app with hot reload.
It's pretty simple, I already have the component library configured as a Vue plugin. If I push to NPM and add it to my project as an npm dependency, everything works fine. What doesn’t work is when I use yarn link to symlink locally and then add it the same way:
import { MyComponentLib } from 'my-component-lib';
app.use(MyComponentLib);
This worked fine on vue-2 as any changes to the local component lib would get reloaded and immediately shown during development. However with vue-3, you can only load a plugin once (even in development). After the first load you will get a warning: "[Vue warn]: Plugin has already been applied to target app.".
You basically need to restart the app everytime to see changes to your local component library. Does anyone know how to get around this?
I am using intl-tel-input in my project which I installed using npm. Every thing seems to work fine when I test using Firebase emulators but it stops working post deployment.
Upon checking the Sources tab in Chrome dev tools, I can see that the module is not properly included. (Pls check images) However, I am completely unable to figure out why. Please help!
Emulator Screenshot with the Telephone Input field working fine.
Screenshot taken post deployment with the Telephone input field broken.
Source File - intlTelInput.js located at /node_modules/intl-tel-input/build/css/intlTelInput.js
Source File - intlTelInput.css located at /node_modules/intl-tel-input/build/js/intlTelInput.css
By default Firebase ignores node_modules directories when deploying.
There are a few options you could use to resolve this.
Use a build tool like Rollup or Webpack to generate bundles that include node dependencies.
Copy required node_modules files to a different directory like assets and load them from there.
Update firebase.json to not ignore node_modules on deploy. Note that this will probably greatly increase the size of deployed applications if you have any number of node packages.
I'm building a meteor app with meteor-angular2 package. But with .css it's quite unfunny so far.. As soon is try to import a css file in a component, meteor is "modules-loader" is telling that this is not a module i'm trying to import (true basically :D)
Now i'm fiddling around with a basic webpack+ng2 setup and i can get it easily running with direct imports of .css files in typescript - just because i can configure the webpack loaders correctly (you can even get css-modules in this way with ng2!)
So, in the docs of the latest meteor angular2 package release it is somwhere written that it is basically packing all the stuff with webpack.
What's the right way to modify this underlaying webpack config? Is it even possible? Do i have to fork the package repo to change it? At a first shot i didn't find the webpack stuff in there..
I recently updated my Meteor App to 1.3 and also want to migrate to the "new style" of coding, meaning ES2015, React, later on Apollo/GraphQL.
First I only want to use the import syntax. But when I meteor add Ecmascript it will then hang on meteor:
Building for web.browser /
takes forever.
Any ideas why?
I had the same issue. In my case this is how I got it fixed. May be it is the same for you.
I had multiple third party libraries in client/lib folder.
To use ES6 syntax, I added 'ecmascript' to my .meteor/packages file and after that issuing the meteor command would just hang.
During trial and error, I figured out that
deleting the client/lib directory made meteor to start
.
For the libraries my application depends on, I went to https://atmospherejs.com, searched for the meteor specific package name for the dependency and added these to .meteor/packages file.
e.g: Instead of copying the datatables.js and datatables.css inside client/lib folder, add 'menway:jquery-datatables' to .meteor/packages or issue the command meteor add menway:jquery-datatables
I am using React with Meteor.
I have decided to use React Modal https://www.npmjs.com/package/react-modal
Error: Cannot find module 'react/lib/ExecutionEnvironment' from '/Users/bliss/Coder/ReactMeteor/vedicjoy-react/packages/npm-container/.npm/package/node_modules/react-modal/lib/components'
The steps I took where:
1.) In my package.json file I added "react-modal": "0.5.0"
2.) In the client.browserify.js I added Modal = require('react-modal');
Then after I got the error I even tried adding this package https://www.npmjs.com/package/exenv
to the package.son file ...but that did not make the error go away.
I am using MeteorJS Framework with React.
What can I do to make react-modal work inside my project?
You must be using React 0.14 in your Browserify packages. Facebook removed ExecutionEnvironment from this version of React, the react-modal devs are aware of this, and it has been solved in the new release (which apparently comes out sometime this afternoon).
Quick fix.
Here's a quick fix until that happens (source):
$ npm i -D fbjs
Then in yourproject/packages/npm-container/.npm/package/node_modules/react-modal/lib/components/Modal.js replace 'react/lib/ExecutionEnvironment' with 'fbjs/lib/ExecutionEnvironment'
Edit: it's not as easy as I thought. Apparently components of different React releases aren't compatible with eachother. :-(. Will report back later.