After installing Meteor via Chocolatey on windows 10, and meteor add twbs:bootstrap This Meteor app gives a barowser error
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3
So which version am I running now?
meteor list did not produce any jquery related lines.
./meteor/versions file has a line saying "jquery#1.11.11"
But didn't meteor create already install a jQuery as per the web site? "This package is automatically included in every new Meteor app by meteor create."
DO I need to run meteor add jquery? but I remember doing that already at least once. and "jquery": "^3.5.1" is under dependencies in packages.json and package-lock.json
The command: meteor show jquery shows package: jquery#3.0.0
Please help untangle this. Thanks
Solved:
meteor remove twbs:bootstrap
npm install bootstrap
Added "popper.js":"^1.16.0" to dependencies in package.json
There is a difference between the Meteor package version jquery#3.0.0 and the npm version `"jquery": "^3.5.1".
The Meteor package jquery#3.0.0 allows to override deprecated jQuery versions (for example delivered as direct dependency of an old Meteor package) with the jQuery version, installed via npm.
./meteor/versions file has a line saying "jquery#1.11.11"
Note, that just adding jquery#3.0.0 sometimes fails (when packages require direct dependencies). Then you have to change in your .meteor/packages the entry jquery#3.0.0 to jquery#3.0.0!
However, this may still cause the mentioned error, because your jQuery will be a version > 3 (because your project will then use the npm jQuery 3.5.1).
What are your options then to resolve the error:
a) Install npm jquery > 1 and < 3
b) Install the latest jQuery and use Bootstrap 4 via npm
option a
The first option would basically require you to run meteor npm install --save jquery#2.2.4 to get the latest jQuery < 3.
This could be a fast solution, if your app will be used internally (for example in a corporate intranet or smth.) but would be a big problem if out in the wild. There are plenty of vulnerabilities that have been detected since 3.5.1 and you should think about, whether this will be an issue or not.
option b
The better way is to also use the latest bootstrap an jQuery from the beginning and use their npm packages. It is a bit more of work than just adding twbs:bootstrap but it gives you the flexibility and maintainability that you need:
install the latest npm packages
$ meteor remove twbs:botstrap
$ meteor npm install --save jquery#latest bootstrap popper.js
edit the Meteor jquery package
Open .meteor/packages in your editor of choice and change:
jquery#3.0.0 to jquery#3.0.0!
import the packages
In your startup routine, for example in client/main.js you do the following:
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css' // default theme
import popper from 'popper.js'
global.Popper = global.Popper || popper
(optional) import a custom theme
If you want to apply your own theme, your may also install the scss toolchain:
$ meteor remove standard-minifier-css
$ meteor add fourseven:scss seba:minifiers-autoprefixer
and then import your custom theme instead of the standard css:
import 'bootstrap'
import popper from 'popper.js'
import './theme.scss'
global.Popper = global.Popper || popper
to apply your own theme, you need to have theme.scss to follow the structure below:
/* import the necessary Bootstrap files */
#import "{}/node_modules/bootstrap/scss/functions";
#import "{}/node_modules/bootstrap/scss/variables";
#import "{}/node_modules/bootstrap/scss/mixins/buttons";
/* these are just examples, if your theme overrides more you need to import the respective files */
/* -------begin customization-------- */
/* here your custom theme variables, colors etc. */
/* ------- end customization -------- */
/* finally, import Bootstrap to set the changes! */
#import "{}/node_modules/bootstrap/scss/bootstrap.scss";
I know this might be too much of an answer but in the long run I highly suggest you to omit the deprecated BS3 and go for a more flexible strategy, as shown in option b here.
Related
In my node_modules I added the dependency of bootstrap that allows me to get dropdown.js.
But when I am going on the page where I am using a dropdown, when I click on the dropdown button it doesn't work on development mode and it returns the following error:
dropdown.js:186 Uncaught TypeError: u is not a constructor
at c.t.show (dropdown.js:186)
at c.t.toggle (dropdown.js:137)
at HTMLButtonElement.<anonymous> (dropdown.js:375)
at Function.each (jquery.js:367)
at jQuery.fn.init.each (jquery.js:202)
at jQuery.fn.init.c._jQueryInterface [as dropdown] (dropdown.js:362)
at HTMLButtonElement.<anonymous> (dropdown.js:528)
at HTMLDocument.dispatch (jquery.js:5237)
at HTMLDocument.elemData.handle (jquery.js:5044)
The concerned line in this dropdown.js file is the following one:
this._popper = new Popper(referenceElement, this._menu, this._getPopperConfig());
"Popper is not a constructor."
I tried this:
this._popper = Popper.createElement(referenceElement, this._menu, this._getPopperConfig());
But it is still not working.
What is strange is that I get this error only in development mode, not in production.
Here is the link to the entire file dropdown.js but I am not sure it will be helpful:
dropdown.js
If you are using "bootstrap": "^4.4.1", and #popperjs/core v2.x combinations,bootstrap may not support popperjs version. So downgrade your version to get rid of this error.
Option 1:
npm install popper.js#^1.12.9 --save
and Add following script between jquery and bootstrap scripts.
"node_modules/popper.js/dist/umd/popper.min.js",
Option 2:
Add following script tag to index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
Have you also added bootstrap.js (includes dropdown) and might cause this conflict. If not how is dropdown.js added to your code ? Do those checks:
1. If you are using some package manager. If yes, try to install dependencies via it.
2. Import last versions of jQuery, popper and dropdown.js.
3. Check. Maybe you are using another package where you already imported jQuery or bootstrap. (if using templates check them too) It should be imported just once.
The problem : Wrong version of Popper library
The solution :
check the official documentation of Bootstrap. If your version is not 4.6.X, please select the correct one. Then check the proper version of Popper (and JQuery, we never know...) regarding your version of bootstrap.
If version installed doesn't match, execute the following command lines :
Uninstall Popper library:
npm remove #popperjs/core
npm remove popper.js
Re-install the correct version (here, it is the "1.16.1"):
npm install popper.js#^1.16.1 --save
Sadly in 2021 this is still a problem and the biggest issue (and this will offend someone) lies with bootstrap developers.
https://getbootstrap.com/docs/4.6/components/dropdowns/
Their documentation doesn't list any version dependencies and versions become out of date quite quickly which is why many of the above answers are no longer correct.
My personal situation was hampered by the fact that I was using cdnjs.cloudflare.com and the code I had was inherited from prior developers and popper was included separately to bootstrap.
Until bootstrap devs improve their documentation to list compatible popper versions there is only one working solution for people using cdnjs.cloudflare.com
Import bootstrap.bundle.min.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.bundle.min.js" ></script>
I want to add fontawesome 5 to my angular-cli 8.0.2 project (with scss) by copy fonts to project (not link them from internet) and without using any external plugins/projects but in direct way.
So I create project and install fontawesome (free) via npm as follows
ng n --style=scss --routing=true myproject
cd myproject
npm install --save-dev #fortawesome/fontawesome-free
I modify files:
In angular.json in key projects.myproject.architect.build.options.styles I add following value to array
"./node_modules/#fortawesome/fontawesome-free/scss/fontawesome.scss"
In styles.scss I add line:
#import "../node_modules/#fortawesome/fontawesome-free/scss/fontawesome.scss";
In src/app/app.component.html after Wellcome text I add
<i class="fas fa-sync-alt"></i>
Then I run command ng serve and go in browser to http://localhost:4200/ and see this:
I use different instructions from internet but this is best result that I get - but still doesn't work (we see square instead this icon). What to do to fix this problem?
Font Awesome now provides Font Awesome Angular component, but you can also use the following plain approach:
npm install --save #fortawesome/fontawesome-free
Load Font Awesome icons by just simply adding the following into styles.scss:
$fa-font-path: '~#fortawesome/fontawesome-free/webfonts';
#import "~#fortawesome/fontawesome-free/scss/fontawesome.scss";
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
#import "~#fortawesome/fontawesome-free/scss/brands.scss";
Tested on Angular v8.2.14 and Angular CLI v8.3.19.
EDIT: The reason why the icons don't display is that you didn't specify the type of icon style. You can find a list of supported icon styles here (or listed below):
brands.scss
solid.scss
regular.scss
light.scss
Original answer
The SCSS file that FontAwesome includes in its NPM package does not set itself up for you: you're supposed to import the individual SCSS files yourself. (See the docs on the SCSS part for more info)
Instead, you should include the already compiled CSS so that you don't have to import the SCSS files manually. (Run the command below to set the style)
ng config projects.myproject.architect.build.options.styles "./node_modules/#fortawesome/fontawesome-free/css/all.css"
(Or manually add "./node_modules/#fortawesome/fontawesome-free/css/all.css" to your project's styles)
For more info on what FontAwesome includes in its package, refer to the docs.
I would like to use the dat.GUI library for a project that's build with Webpack 2. If I install the module via npm -install --save-dev dat.gui and then try to import it using import * as DAT from 'dat.gui'; I get the following error when Webpack is trying to compile my project:
ERROR in ./~/dat.gui/src/dat/controllers/NumberControllerSlider.js
Module not found: Error: Can't resolve 'style' in
'/home/me/myProject/node_modules/dat.gui/src/dat/controllers'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix
when using loaders.
I know this error occurs when using Webpack 2 to build Webpack 1 based projects. But why is Webpack even trying to build the module if there already is a build version inside node_modules/dat.gui/build';? Is there a way to tell Webpack or NPM to use the existing build version without trying to re-build it?
When importing a node module, webpack looks into its package.json and uses the main field as entry of the module, similar to what Node.js does (webpack looks for more fields by default, see resolve.mainFields).
Since for dat.gui the main field does not point to the built version but to the source, which actually inlines loaders as seen in dat.gui#0.6.1 - NumberControllerSlider.js for the styleSheet import, and that is not a good idea in general and certainly not to publish.
But you can import the built version by specifying the corresponding path. So your import would be:
import * as DAT from 'dat.gui/build/dat.gui.js';
If you'd like to still import just dat.gui you can configure resolve.alias to point to the built version as follows:
resolve: {
alias: {
'dat.gui': 'dat.gui/build/dat.gui.js'
}
}
With that you can use your original import statement:
import * as DAT from 'dat.gui';
I don't want to use the react-bootstrap components,
I simply want to use Bootstrap on a React site.
I installed Bootstrap with npm : npm install bootstrap
and added it in my package.json dependencies :
"dependencies": {
[...],
"bootstrap": "^3.3.5"
}
and added it to my App.js file : import bootstrap from 'bootstrap';
However, the style is not applied and it looks like a website from 1995.
I also tried to add import bootstrap from 'bootstrap'; to my index.js without success.
What am I missing?
You also need to add the CSS to your page. You can either:
copy bootstrap.css from node_modules/bootstrap/dist/css/, put it in a public folder, and add it to your page normally (which isn't ideal if you ever plan to upgrade bootstrap)
or
if you're using something like webpack or gulp, you can just add bootstrap.css to your CSS bundle
I'm quite new in Vue, so maybe it would be an obvious question for you.
I'm working on Java web application in microservices architecture and I've decided to prepare frontend part of all my services in Vue. My frontend views schould look very similar because this will be a CRM type of app. I already prepared my HTML skeleton, CSS styles and JS using Pingendo.
What is important I need to keep my Header and Footer sections the same all the time in specified microservice. Best option for such thing is to use routing in Vue and rout only the content between Header and Footer components. Generally rather obvious idea.
The problem is how to create new Vue project using already prepared HTML, CSS and JS files?
I used Vue CLI to create my project and just run vue create project-name command with default configuration.
Pingendo use Bootstrap, JQuery and Popper libraries, which I have to import to my Vue project using npm
install bootstrap jquery popper.js to install it and I have no warnings and errors now coused by lack of dependecies to this libraries.
I have also follow this instructions and installed basic config of webpack using npm install -D vue-loader vue-template-compiler but after npm run serve I have an error:
ERROR Failed to compile with 1 errors 10:10:28 PM
error in ./src/components/test
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#
loaders
> <template>
| <h2>this is TEST Component content</h2>
| </template>
# ./src/router/index.js 4:0-37 14:15-19
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.7:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
My Test.vue component is very simple:
<template>
<h2>this is TEST Component content</h2>
</template>
<script>
export default {
name: 'test'
}
</script>
<style>
</style>
I don't know what I'm doing wrong. Everything has a default config with necessary additions. What steps should I do to make such project working?
Repository: https://bitbucket.org/jacekmucha91/storycrm-manager-vue/src/master/
It is questionable using jQuery with Vue. You can do the things you need to in Vue without jQuery, so I would first check that you are correctly choosing the tools you need. What exactly do you need jQuery for that Vue won't handle?
Additionally, there are a lot of plugins for Vue that handle the nuances properly, so for Bootstrap you should be installing Bootstrap-Vue as well. Check that there aren't specific-to-Vue versions of libraries you want to use. This will let you avoid these issues.
For reference:
https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/