I am using react-bootstrap front-end library in my react project. React-bootstrap components are not working properly.
I also checked the official react-bootstrap website and it also misses the styling of the website.
What could be the reason for that styling issue?
I already tried to add import 'bootstrap/dist/css/bootstrap.min.css';
in the index.js file but that is affecting my other UI components which I do not want to mess up.
You have to add the import for:
'bootstrap/dist/css/bootstrap.min.css';
in your index.js or whatever. If the import will mess up your design on your page, you have to adjust the used classes etc. It's required to load the Bootstrap styles in order to use react-bootstrap library.
Related
I would like to work on a remote React component, which would later be linked in a different React Application. I would like to be able to import this component live in the application though so that I can work on the component and see it's live preview in a actual application ?
I was thinking aboout using federated modules but I would prefer a solution to work with Vite
I'm attempting to use a shared library for reusable components and using just 2 out of the box Create react apps. One is called 'shared-lib' the other 'project-example'. I made a super simple component in shared-lib, exported (working when I test). I NPM linked both seemingly correctly (shared-lib is in my project-example node_modules with a special icon).
I built the shared-lib, I also imported the shared component (SharedComponent)
import SharedComponent from 'shared-lib'; <- lib is in my node_modules
../shared-lib/src/index.js
SyntaxError: /Users/bemker/dev/portals-modern/shared-lib/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (8:3):
Add #babel/plugin-transform-react-jsx (https://git.io/vb4yd) to the 'plugins' section of your Babel config to enable transformation.
I'm following a vid tutorial and he didn't have to eject his create react app, but I'm guessing this is where the error is coming from.
Here is the vid I'm following if anyone wants to take a look. https://www.youtube.com/watch?v=B7iYJT_ll-U
Anyone know why this is occurring, or how to get past it (preferably without ejecting)?
I couldn't find a solution using the above, but there is a package similar to Create React App for building libraries that made it pretty easy. Its not maintained by FB, but it worked for me.
https://github.com/transitive-bullshit/create-react-library
https://github.com/transitive-bullshit/react-modern-library-boilerplate (multiple exports)
vid tutorial using it: https://www.youtube.com/watch?v=N8d-CLmg3hw
second w/ 'real' usage: https://www.youtube.com/watch?v=6R699AQYH74
Hope this helps someone.
I'm not able to import the axios package using ReactJs integrated to my website. It looks like it's only possible when you create a new react app as in my case I dont have a package file only a package-lock one. What's my problem here and what are my options? I have a django back-end.
I have a Node.js Angular app which I am trying to import babylon.js into.
Current Setup
1) npm install --save babylonjs to get the npm repo installed in my project's node modules.
The following image depicts the folder structure of the npm repo.
2)In my angular component I import the BABYLON declaration from the babylon.module.d.ts and babylon.max.js files in the above picture like so.
import * as BABYLON from 'babylon.js'
Babylonjs now works great, has typings enabled and everything, so I
can use BABYLON as pictured below
Problem
None of the included extensions are hooked up. These extensions are located in the following folders
(Full folder structure is in the first image. I left the gui folder open since that is the specific extension I am >trying to activate at this time)
The main babylon.module.d.ts file defines BABYLON as follows:
declare module BABYLON { //class types are defined in here }
The gui extension (all others follow the same logic) declares itself as a part of BABYLON as follows:
declare module BABYLON.GUI { //extend classes & create new classes in here in here }
Attempted solutions
1) babylon.gui.d.ts declares BABYLON.GUI so I simply tried the following
import * as BABYLON from 'babylonjs';
import * as BABYLON.GUI from 'babylonjs/dist/preview release/gui/babylon.gui';
This generates the following Typescript error: Duplicate identifier 'BABYLON', which is not surprising, however, BABYLON.GUI is how thebabylon.gui.d.ts` file declares its parts.
2) Using the CDN in the index.html file. This works, however, types will not work. Even if I got typings to work,using the CDN is less performant. The resources will be loaded in the document <head> every page. with imports the resources will only be queried when the component is active.
3) Appending the babylon.gui.d.ts file to the babylon.module.d.ts file. BABYLON.GUI` is still undefined.
Modifications to the npm repo are undesireable anyways, since any npm updates, or installs will overwrite the changes.
4) I spoke with a BABYLON developer here, and we kind of hit a dead end.
Does anyone have any input on how to import this extension properly?
PS. once we get this answered I'm going to work with the dev to implement a seamless experience for all node users who wish to incorporate babylon.js into their projects!
I spoke with the lead developer deltakosh about this.
To clear a few things up:
This issue is not with npm
This issue is not with node
This issue is with how Babylon is structured
The developers are actively refactoring to support the import behavior desired in the above question.
If anyone is curious here is the link to the open issue on github pertaining to this question.
In the interim to use Babylon while import support for importing packages is being worked on I have done the following:
Use the CDN for all babylon libraries
To get rid of typescript compilation issues declare the following at the top of your .ts file declare let BABYLON: any; This will make babylon with packages useable, however, we will not have any typings benefits in the interim.
Feel free to chime in if you have found a more elegant interim solution!
How can I properly install Twitter Bootstrap into my meteor project?
I know I can do meteor add bootstrap but I can't customize the variables (ie colors and the sorts). I've also looked at nemo64:bootstrap but same issue, I can only include and exclude modules of Twitter Bootstrap but not the variables.
How can I properly include Twitter Bootstrap and have access to the variables.less ?
In order to control the order in which Meteor loads .less files you need to add .import.less to the file extension. If you import the bootstrap less files into your project and rename them, you will have finite control of all the mixins and variables. Here is a great post that summarizes this. http://www.manuel-schoebel.com/blog/meteorjs-and-twitter-bootstrap---the-right-way