I have a header and footer react component saved to the NPM repository that i would like to include on various applications. I can include a React component by requiring it from my "parent" application. This will get the React object required to load the component if i have a js document with
var HeaderComponent = require('../../node_modules/header-component/dist');
ReactDOM.render(<HeaderComponent />, document.getElementById('header-hook'));
But also within that dist directory, I there's a styles folder with all the required styles for the header. What is the way to package a node module so that it includes accessible styles?
Related
The Next.js documentation states, that the directory src/pages is an alternative to /pages. However, my custom _app.tsx and _document.tsx files, get ignored when the pages folder is moved into src.
You can recreate this issue yourself, when creating an empty Next.js App, moving the pages folder into src and updating the import paths of the css files. The content of the index.tsx file will still be rendered, but modifications to the styles/globals.css, which is imported in the _app.tsx will have no effect.
It is impossible to have a pages folder inside of src and outside of src at the same time, therefore preventing me to use src/pages in any app which needs a modificaton to the _app.tsx or _document.tsx.
Am I missing an important part of the documentation or does this work as intended?
Changing your project folder structure or adding new _app/_document files can sometimes lead to caching issues.
Delete the .next folder and restart your dev server, to ensure any caching done by Next.js doesn't get in the way.
I'm trying to add push notifications to my svelte site using Firebase/Google Cloud Messaging (FCM), and a service worker JS file needs to exist at the absolute path: https://example.com/firebase-messaging-sw.js . However, Vitejs is bundling this with the other svelte/js code in my project. I can manually place the file there, but then it won't be transpiled. Aka these imports here won't work in the file:
import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";
So how do I tell Vite not to bundle this file and have it output at the root dir?
Alternatively, I saw there might be a way to pass a service worker differently, if that removes the need for the js file please let me know roughly how it's done.
Thank you.
I am trying to host a web app using Rails and React on Heroku. While the styling of the app works as expected locally, the styling for React components is not applied on Heroku.
In the app, I am using plain html with scss before the user logs in. After the user is logged in, I am using React including module.scss files to style React components (please see folder structure below).
What can I do to make Heroku also use the module.scss files?
Note:
I have tried importing the module.scss files into "application.scss" without success.
Not using module.scss but plain scss files for React components and importing these into "application.scss" works but is a non-elegant solution in my opinion.
I'm using vue-cli-3.4.1. After creating project, i'have added vuetify to my project using command vue add vuetify.
There is another vue web-component, which i'm trying to use in my application.
I have added scripts to index.html file, like this
<script src="https://unpkg.com/vue"></script>
<script src="path/my-component.min.js"></script>
But, after running command npm run serve, getting this error in console and showing blank page.
[Vuetify] Multiple instances of Vue detected
Your index.html file should only have one vue instance.
The vue-cli structures your application using a module system.
If you don't have one already create a components directory and place your my-component.vue there.
Then you’ll need to import my-component.vue, before you locally register it in the component you want to use it in.
Assuming the below component is named App.vue
<template>
<MyComponent />
</template>
<script>
import MyComponent from './components/my-component'
export default {
components: {
MyComponent
},
// ...
}
</script>
Now MyComponent can be used inside App.vue's template.
https://v2.vuejs.org/v2/guide/components-registration.html
Hope this helps.
With npm being the recommended packaging system as of Meteor 1.3, I now have both server-side and client-side packages in my node_modules directory. Meteor attempts to bundle all of these into one huge modules.js file.
The only way to get meteor to completely ignore files appears to be to change the file or directory name (1, 2).
But I don't want to completely ignore the files - Some modules I need only on the server side, some only on the client side.
Is there a way to get Meteor to only include certain node modules in the client side bundle, perhaps through creative naming or hacking .babelrc?
Everything needs to go into the bundle, which you place on the server. When you go to your web site, the server makes your HTML, CSS and JS available and is loaded into the browser. Only the node modules needed by your browser get loaded.
There is no need to do this :)
Hide them in server folder and import them indirectly.
To exclude certain npm node_modules from being bundled into the massive modules.js file and prevent useless megabytes of script being sent to the client: conditionally require a file that itself imports modules from within a server folder.
Like so:
/* /my-import-file.js */
import { Meteor } from 'meteor/meteor';
if (Meteor.isServer) {
module.exports = require('./server/server-only-file');
}
And the file that actually imports your large, useless-on-the-client npm modules:
/* /server/server-only-file.js */
// Import some modules that will NOT be sent to the client
import mailgun from 'mailgun.js';
import cheerio from 'cheerio';
import juice from 'juice';
export { juice, cheerio, mailgun };
Your other code can then do like so:
import { Meteor } from 'meteor/meteor';
import myImport from '/my-import-file'
if(Meteor.isServer){
myImport.doServerOnlyStuff();
}