I've recently had to clone an project and rebuild bower packages. jQuery has updated I believe, and is now throwning an warning:
Warning:
Please go take a look in "app/bower_components/jquery"
for the file you need, then manually include it in your file.
I've done this. And everythign works properly. However, everytime I grunt serve the warning still gets thrown?
jquery was not injected in your file.
How do I remove this error? and will this error out a grunt build? I'm sure the warning is harmless but it's really upsetting to keep seeing it.
main .bower.json
{
"name": "jordan",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"angular-resource": "1.2.6",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6",
"angular-route": "1.2.6",
"jquery-ui": "~1.10.3"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
.bower.json for jquery
{
"name": "jquery",
"version": "2.1.0",
"ignore": [
"**/.*",
"build",
"speed",
"test",
"*.md",
"AUTHORS.txt",
"Gruntfile.js",
"package.json",
"bower.json"
],
"dependencies": {
"sizzle": "1.10.16"
},
"devDependencies": {
"requirejs": "~2.1.8",
"qunit": "~1.12.0",
"sinon": "~1.7.3"
},
"keywords": [
"jquery",
"javascript",
"library"
],
"homepage": "https://github.com/jquery/jquery",
"_release": "2.1.0",
"_resolution": {
"type": "version",
"tag": "2.1.0",
"commit": "cac43f3ef791b7e68c1917a734fb92e04450c111"
},
"_source": "git://github.com/jquery/jquery.git",
"_target": ">=1.6",
"_originalSource": "jquery"
}
You can workaround this problem changing the bower.json of your project and override some package with problem
"overrides": {
"jquery": {
"main": "./dist/jquery.js"
}
}
You can sse more about that in https://github.com/bower/bower/issues/585
But, looks like that current version of the JQuery is playing into the Bower rules.
As explained on the related Github issues available here:
https://github.com/stephenplusplus/grunt-bower-install/issues/55
This isn't an error with grunt-bower-install - this is, sadly, jQuery not playing by Bower's rules. It's not possible for this tool to work with a Bower package that doesn't specify main property. Like any other package that doesn't, the solution is to manually include the reference to the file inside of your HTML file, like the good ol' days
I'm sorry man, I had the same problem just now :(
In general, if you get this error it is because the author of whatever bower component you are using either hasn't included a bower.json file in the component or hasn't define a "main" property in the bower.json folder. If the component is being actively maintained, you should open a github issue asking for a proper bower.json file in the component. Here is an real world example...
https://github.com/CreateJS/SoundJS/issues/76
Related
[Build Error in parcel # 2.7.0 start when I am trying to add external index.html file in the main I also ignored the main but it also doesn't work for me. Will please someone help me to solve this problem It also not working with JavaScript file when I added externally and also getting error with html file but I want to add the html file but as a solution I try to add JavaScript file but it also doesn't work for me. Will please someone solve this issue or tell me how to solve this issue
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "unrelated.js",
"targets": {
"main": false
},
"scripts": {
"start": "parcel start index.html",
"build": "parcel build index.html"
},
"author": "Meelad Sultan",
"license": "ISC",
"devDependencies": {
"parcel": "^2.7.0"
}
}
enter code here
At last I can find the solution of my problem after almost a day if someone else facing the same problem they just do add the **Browsers list ** in the package.json file before script and ignore the main target and also set the parcel to latest then the parcel will run successfully and do not give any server error or build error. And don't forget to run periodically npx browerlist#latest --update-db. It will update your package-lock file with new caniuse-lite version. In this case, you will be sure that last two version or > 0.2% will target what you expect
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "unrelated.js",
"target": {
"main": false
},
"browserslist": "> 0.5%, last 2 versions, not dead",
"scripts": {
"start": "parcel index.html "
},
"author": "Meelad Sultan",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"parcel": "latest"
},
"dependencies": {
"sass": "^1.55.0"
}
}
I'm using parcel to process typescript for a webextension.
JQuery and its type definitions are installed via npm.
At the top of my typescript file I have:
import $ from "jquery";
import "bootstrap";
But at runtime, Chrome complains that jquery is not defined.
A minimal example to reproduce the problem is on git: https://github.com/lhk/parcel_jquery_bug_demo
git clone https://github.com/lhk/parcel_jquery_bug_demo
cd parcel_jquery_bug_demo
npm install
parcel build src/manifest.json
Now you can open chrome and load the dist folder
The git repo contains:
src/manifest.json
{
"manifest_version": 2,
"name": "pc",
"version": "0.0.1",
"description": "none",
"author": "",
"content_security_policy":"script-src 'self'; object-src 'self'",
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": [
"./content/index.ts"]
}
]
}
src/content/index.ts
import $ from "jquery";
import "bootstrap";
$(function () {
$('[data-toggle="popover"]').popover();
});
./package.json
{
"name": "pc",
"version": "0.1.0",
"description": "",
"author": "",
"license": "",
"devDependencies": {
"parcel-plugin-web-extension": "^1.4.0",
"typescript": "^3.1.3"
},
"dependencies": {
"#types/bootstrap": "^3.3.7",
"#types/jquery": "^3.3.10",
"bootstrap": "^3.3.7",
"jquery": "^3.3.1"
}
}
After you loaded the extension in chrome, you can load any website.
The error message is:
Uncaught ReferenceError: jQuery is not defined
I'm using:
Parcel 1.10.1
Node v8.12.0
npm 6.4.1
ubuntu 18.04.1 64bit
chrome 70
I think this problem is related to the import of bootstrap. The following code works:
import $ from "jquery";
//import "bootstrap";
$(function () {
//$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').click(function(){});
});
So the dependency of my typescript code is actually handled by parcel. But bootstrap also needs jQuery and that is somehow not satisfied.
Parcel actually takes no part in the issue, it is mostly that jQuery/Bootstrap relies on the $ and jQuery function being exposed in the global scope.
This is fairly simple to archive by doing the following (for JS only, since TS will complain about window not having the property $ and jQuery):
import jquery from "jquery";
window.$ = window.jQuery = jquery;
import "bootstrap";
But since you're using TypeScript you will need to do more in order to get the linting and intellisense support working too.
Install the TypeScript definition file npm install --save-dev #types/jquery #types/bootstrap
use import * as $ from 'jquery'; to import it.
Configure the libs for the DOM api since they are not enable by default for TypeScript, this will allow you to use a proper window and document but you
need to change window to (<any> window)
tsconfig.json
{
"compilerOptions": {
//...
"lib": ["dom"],
//...
},
}
I added a babel plugin (babel-plugin-auto-import) with this .babelrc
{
"plugins": [[
"auto-import", {
"declarations": [
{ "anonymous": ["jQuery"], "path": "jquery" }
]
}
]]
}
Everything seems to be working.
New package.json
{
"name": "pc",
"version": "0.1.0",
"description": "",
"author": "",
"license": "",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-auto-import": "^0.9.3",
"parcel-plugin-web-extension": "^1.4.0",
"typescript": "^3.1.3"
},
"dependencies": {
"#types/bootstrap": "^3.3.7",
"#types/jquery": "^3.3.10",
"bootstrap": "^3.3.7",
"jquery": "^3.3.1"
}
}
Meteor version 1.7.0.5
Using meteortesting:mocha
I have a very simple meteor react app. I added a test file in imports/startup/simple-schema.tests.js
describe('Todos_item', function () {
console.log('Todo');
});
I was running npm run test-app so it should be logged in console but that file actually doesn't run. But when I added this snippet to my tests/main.js Todo is logged in console. So am I missing something.
My directory tree
package.json
{
"name": "meteor-bootstrap",
"private": true,
"scripts": {
"start": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer"
},
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"meteor-node-stubs": "^0.4.1",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router-dom": "^4.3.1",
"simpl-schema": "^1.5.3"
},
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
},
"testModule": "tests/main.js"
},
"engines": {
"node": "8.11.4"
}
}
Any help will be greatly appreciated. Thanks in advance.
New Meteor apps since 1.7 have eager loading turned off by default (which is causing your problem)
The behaviour is controlled by the meteor section in your package.json.
To restore the eager loading behaviour for tests, delete the testModule key-value pair from your package.json. It should look like this:
"meteor": {
"mainModule": {
"client": "client/main.js",
"server": "server/main.js"
}
},
If you want to restore pre-1.7 behaviour for all files, just delete the whole meteor section from package.json
If you don't want to use eager loading, you will need to import all of your test files from the tests/main.js file
Also one thing to add when with #Fred answer importing test files have to use require not import though I am not sure is it due to my node version or not I am using my node version v6.11.1
My bower.json:
{
"name": "best-project-ever",
"version": "0.0.0",
"dependencies": {
...
"xdomain": "0.6.11"
},
"devDependencies": {}
}
Running bower install, or bower install xdomain creates:
app/
bower_components/
xdomain/
bower.json
But nothing else! The bower.json file for xdomain clearly specifies including xdomain.js and xdomain.min.js (ignoring everything BUT those files), but neither file is downloaded by bower. Any ideas? =)
{
"name": "jpillora/xdomain",
"version": "0.6.10",
"main": "dist/0.6/xdomain.js",
"license": "MIT",
"ignore": [
"*",
"!bower.json",
"!dist/0.6/xdomain.js",
"!dist/0.6/xdomain.min.js"
],
"dependencies": {},
"devDependencies": {}
}
bower.json spec says, that they are using the exact same syntax as .gitignore-files.
.gitignore does specify the "!" as follows:
An optional prefix "!" which negates the pattern; any matching file excluded by a previous pattern will become included again. It is not possible to re-include a file if a parent directory of that file is excluded.
Note the bold sentence, which is exactly the problem.
I have generated an app using Yeoman-Angular Generator, but the angular.js and other Angular files are missing from the project. I can see these dependencies in the bower.json file as follows:
{
"name": "mi-portfolio",
"version": "0.0.0",
"dependencies": {
"angular": "1.2.6",
"json3": "~3.2.6",
"es5-shim": "~2.1.0",
"jquery": "~1.10.2",
"bootstrap": "~3.0.3",
"angular-cookies": "1.2.6",
"angular-sanitize": "1.2.6"
},
"devDependencies": {
"angular-mocks": "1.2.6",
"angular-scenario": "1.2.6"
}
}
But, the JS files themselves aren't available. So, I get the 'angular is not defined' error when running the app. I ran the commands as given in the Yeoman-Angular Generator's documentation. Is there something I'm missing here?
Try running bower install, sometimes this fails when running Yeoman so you've gotta attempt manually.