Nextjs, import styles from node_modules fails in production - css

Nextjs is not loading css for specific packages in production and yet works fine in development even after following Nextjs documents. As is suggested by several devs.
This is happening for several packages i have installed.
in _app.js
import 'react-toastify/dist/ReactToastify.css';
import "react-responsive-carousel/lib/styles/carousel.min.css";
in pages/about.js where am using the carousel
import {Carousel} from 'react-responsive-carousel';
<div>
<Carousel>
...
</Carousel>
</div>
The above setup works fine in development but cannot get it to work in production.
I should note, that many such questions are not receiving the attention and response.

Related

where to look in meteor app if vue-router suddenly stops sending props to other vue compoents

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!

Vue 3 local component library (sfc) development not working due to Plugins not reloading

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?

Import vuejs components inside wordpress theme

I am creating a wordpress site with vuejs framework. I am about to put vuejs components into this directory.
wp-content/themes/{theme}/components
The problem is, I can't import vuejs components with ES6 import App from './components/App.vue' functionality.
I tried using CDN but I don't know how importing of components works.
Does anybody know?
the are 2 main solutions for this problem:
(best): compile your project (for example with the vue-CLI) in such a way that all imports used in the project are compiled into simple, browser-readable js files
use the http-vue-loader library to load components directly from the browser (this solution works perfectly, but in terms of performance with many components it is not recommended)

React Native FIrebase with Wix React Native Navigation

Has anyone got these 2 working together?
I added react native firebase to my app and it crashes on start up.
I then tested the starter kit provided by react native firebase and once I install react native navigation the app crashes.
Using React Native 0.51, React native navigation v1.1.365 and react native firebase 3.2.2
Thanks
Yeah.
It's Possible.
What I did Was first Installed Firebase and configured.
Then I Installed Wix/react-native Navigation. Follow the steps mentioned in the Official Documentation.
Link for the same to Install and configure is https://wix.github.io/react-native-navigation/#/installation-android.
a command to install library is
"sudo npm install --save react-native-navigation#latest".
Note: App crashes due to MainActivity File. Please remove unwanted code snippet. It should have following code snippet only. As shown Below.
In MainActivity.java it should extend
com.reactnativenavigation.controllers.SplashActivity instead of ReactActivity.
This file can be located in android/app/src/main/java/com/yourproject/.
import com.reactnativenavigation.controllers.SplashActivity;
public class MainActivity extends SplashActivity {
}
Managed to get up and running fully with React Native FCM. Seems to be the best option if using react native navigation.

can i modify underlaying webpack config in meteor angular2?

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..

Resources