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.
Related
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!
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've been creating a small website using NextJS. I used formik and google-map-react to validate a form and show a basic map.
IE11 is "not cooperating" in using these libraries. I've tried changing the babel config and used the next-transpile-modules package to try and provide polyfills and transpiling of the node_modules packages without result.
Any push in the right direction will be greatly appreciated!
Kind regards
After further trial and error, I found the package google-map-react to be the problem. Removing the component that uses this package solved the formik/yup errors.
With regards to google-map-react, I removed this package and used the native google maps api package (#googlemaps/js-api-loader => see documentation for usage).
To get nextjs to transpile both packages from the node_modules, the next-transpile-modules package was added and used within next.config.js.
In the end all I had to do was edit my babel.config.json file, the next.config.js and package.json file.
Below are images of what they look like now.
babel.config.json
next.config.js
add this line to package.json
Keep in mind that #babel/core, #babel/preset-env, core-js need to be installed.
I hope this solution is helpful to anybody experiencing the same problems. I also changed the title since formik wasn't the problem.
In my Meteor project it looks like I've got two versions of jQuery running. My app is using the atmosphere package materialize:materialize and I know that one of its dependencies is jQuery. In my meteor/packages folder it shows version 1.11.10 being used.
But the confusing part is in my External Libraries folder. It also shows a version of jQuery 2.0.0. The only npm package that I have used for my app was when I brought in the babel runtime that was required for Meteor version 1.4.3.2. I had in the past installed Materialize from npm but removed it some time ago. Confused to why that jQuery 2 is there.
This is fine, it happens this way because of package dependencies, Meteor depends on what is quite an old version of JQuery, and one of your npm packages depends on 2.0.
It does seem strange, but it isn't a problem.
What is happening here is some of the meteor packages depends on jquery and some of the npm packages does the same so you end up having the lib installed twice. Nothing terrible except that clients would have to download the same library twice. This is a known bug here https://github.com/meteor/meteor/issues/6626. Not sure where is it going though, it's been there for quite long already.
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..