I've just tried to run Angular-bootstrap generator and answer all the options as so:
[?] What version of angular would you like to use? 1.2.15
[?] Which official angular modules would you need? animate, route
[?] Any third-party component you may require? bootstrap#~3.1.0
[?] Would you want me to support old versions of Internet Explorer (eg. before IE9)? nose arrow keys)
[?] Should I set up one of those JS preprocessors for you? none
[?] Should I set up one of those CSS preprocessors for you? sass
[?] What's the base name of your project? bootstrap
[?] Under which lincense your project shall be released? MIT
[?] Would you mind telling me your username on GitHub? mgcrea
Everything runs fine and dandy, but when I try and run grunt serve or grunt build I get the following error: Warning: Task "bower-install" not found. Use --force to continue.
I've tried to run bower install & npm install to fix this error but I get the following: npm WARN package.json bootstrap#0.1.0 No README data
Has anyone any advice on how I can resolve this?
Please try the following:
try with "bowerInstall" - not "bower-install" as this option has been renamed in later versions
(see https://github.com/mgcrea/generator-angular-bootstrap/issues/2)
Make sure you run bowerInstall from the root directory of your app
have a look at your Gruntfile.js - is there a function "bowerInstall" ? If not, just add it:
bowerInstall: {
target: {
// Point to the files that should be updated when
// you run `grunt bower-install`
src: [
'app/views/**/*.html', // .html support...
'app/*.html', // .html support...
],
// Optional:
// ---------
cwd: '',
dependencies: true,
devDependencies: false,
exclude: [],
fileTypes: {},
ignorePath: '',
overrides: {}
}
}
You can add this function for example right after the function filerev: {....}
Make sure you have installed the package "grunt-bower-install". Have a look into your package.json. You should find the following line there:
"grunt-bower-install": "^1.6.0",
If not, just add it and then run:
npm install
grunt
Related
I'm very new to Gatsby and have a project bootstrapped with the gatsby-ghost-starter starter. The starter works just fine and now I'm attempting to install a theme for the blog section of the site.
I'm attempting to use gatsby-theme-blog for the blog section. I've ran npm install gatsby-theme-blog in the root of my project and configured gatsby-config to contain:
`gatsby-plugin-theme-ui`,
{
resolve: `gatsby-theme-blog`,
options: {
// basePath defaults to `/`
basePath: `/blog`,
},
},
Note: this is not my entire config file, the file is longer and I'm just showing what I added for the sake of installing this theme.
After installing the theme and configuring it in the config I ran gatsby build and got the following error:
The error is occurring in my node_modules file located at node_modules/gatsby-plugin-theme-ui/src/provider.js:1:1 and node_modules/gatsby-plugin-theme-ui/gatsby-ssr.js:1:1. I tried deleting the comment /* #jsx jsx */ on line 1 and restarting the server. When I remove that comment and restart I get the same error on line 2.
What is causing this error? This is my first time trying to install a theme within an existing project, am I forgetting something?
Basically I am getting this list of errors after installing react-awesome-query-builder package on a brand new installed Gatsby environment.
The examples to this solution, point to add some configuration to the webpack.config.js, but on Gatsby not sure where I can add the fixes. If someone can point me to the right direction.
While there is a way to add custom webpack config settings in Gatsby, this issue might be solvable by adding Gatsby packages for less and ant design (gatsby-plugin-antd, and gatsby-plugin-less).
npm install --save antd gatsby-plugin-antd less gatsby-plugin-less
You will also need to add them into your gatsby-config.js file:
plugins: [
{
resolve: "gatsby-plugin-antd",
options: {
style: true,
},
},
{
resolve: "gatsby-plugin-less",
options: {
javascriptEnabled: true,
},
}
]
Each of them have additional configurations you can add in. For gatsby-plugin-antd, you'll want style set to true since it is using less.
For the gatsby-plugin-less package, the options will pass through to less-loader configuration. It seemed like JS being enabled was needed for react-awesome-query-builder to run, which is deprecated. I'm not sure if there is a way to avoid having that on.
I think that should get you past that specific webpack error, I'm not sure if it will make the react-awesome-query-builder demo/example work though.
If you do end up needing to edit the webpack config, you can follow the guide on gatsby's docs.
I am getting a syntax error in IE when this component of react is loaded in the webpage. Has anybody got the same problem? This is an inherited package, and a syntax error from node_modules makes no sense?
"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
const colorConvert = __webpack_require__(/*! color-convert */ "./node_modules/color-convert/index.js");
const wrapAnsi16 = (fn, offset) => function () {
const code = fn.apply(colorConvert, arguments);
return `\u001B[${code + offset}m`;
};
const wrapAnsi256 = (fn, offset) => function () {
const code = fn.apply(colorConvert, arguments);
return `\u001B[${38 + offset};5;${code}m`;
};
If you are using newer versions of Node/NPM, check your package.json file -> "browserslist" section.
This is the default "browserslist" created for you if you do not have one defined:
In this case, if you run "npm start" on your LOCAL Environment, Babel will not create Polyfills for IE11 because its not included as a target browser in "development". To get this working, I deleted my node_modules directory completely, ran 'npm install', updated package.json with:
and ran 'npm start.
The reason why this fails is that babel or your other favorite transpiler might ignore node_modules (if that's how its configured), so you need to include it manually because IE does not support arrow function syntax.
First, if you search for wrapAnsi16 or wrapAnsi256 function names online it'll point you to common npm packages, such as: ansi-styles, chalk or color-convert, debug, strip-ansi, etc.
If you are using Webpack you can add the following to your rules:
module: {
rules: [{
exclude: /node_modules\/(?!(color-convert|ansi-styles|strip-ansi|ansi-regex|debug|react-dev-utils|chalk)\/).*/
}]
}
or, easier to read:
module: {
rules: [{
include: [
path.resolve(__dirname, 'node_modules/ansi-styles'),
path.resolve(__dirname, 'node_modules/strip-ansi'),
... other's here...
path.resolve(__dirname, 'src'),
]
}]
}
Hope this helps somebody in the future ;)
TLDR; you don't need this library, just run
npm run build
And it will be excluded from your build.
I have same problem with create-react-app, and I solve it (no). From my discovery, this library should not appear in browser, because it was designed for nodejs environment. Also I found, this library come to me as dependency of jest, and jest is dependency for tests and it come as dependency for react.
So, I run
npm run build
server -s build
And try my application in IE. And it work. So, when you run
npm start
It make file including dev dependencies and other garbage that should not appear in production and in browser at all. When you run
npm run build
It make file only with required project libraries.
I had similar issue #punkbit solution and installing 'react-app-polyfill'
and importing it at the top of the index.js file solved it
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
If it still does not work delete node-modules and reinstall also clear cache in IE.
All the best :)
This problem occurs because your compiled code contains (modern) ES6 syntax whilst IE11 only supports ES5.
A way to fix this is to instruct webpack to specifically compile the mentioned packages into ES5;
module: {
rules: [{
test: /\.(tsx?|js)$/,
include: [
// These dependencies have es6 syntax which ie11 doesn't like.
// Whenever you see a "SyntaxError" that crashes IE11 because of a new lib, add it here.
path.join(__dirname, 'node_modules/react-intl'),
path.join(__dirname, 'node_modules/pkce-challenge'),
path.join(__dirname, 'node_modules/fuse.js')
],
use: [{
loader: 'ts-loader', // Or whatever loader you're using
}]
}]
}
for me this was: fuse.js, pkce-challenge and react-intl.
Would I like to load preferably the node packages, and only if not exist, loads the bower package.
I would just use the node package only as recommended in Webpack site, but I need to load a library that is just in bower, https://github.com/Stamplay/stamplay-js-sdk and https://github.com/Stamplay/angular-stamplay
Try with bower-webpack-plugin
I installed https://github.com/lpiepiora/bower-webpack-plugin
But when I run webpack-dev-server -d --watch the error is displayed in chrome console:
Uncaught TypeError: angular.module is not a function(anonymous function) # app.js:8__webpack_require__ # bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) # bootstrap 6cecf8d96fb5a1205f10:39__webpack_require__ # bootstrap 6cecf8d96fb5a1205f10:19(anonymous function) # bootstrap 6cecf8d96fb5a1205f10:39(anonymous function) # bootstrap 6cecf8d96fb5a1205f10:39
angular.js:68Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Try with ResolverPlugin (see Webpack docs)
In webpack.config i add..
plugins: [
...
, new webpack.ProvidePlugin({
Q: 'q',
store: 'store.js',
Stamplay: 'stamplay-js-sdk'
})
, new webpack.ResolverPlugin(
[
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"]
)
],
....
resolve: {
root: [
path.join(__dirname, 'node_modules'),
path.join(__dirname, 'bower_components')
],
But, like mention here the Stamplay object is not correct!
Trying with CDN and angular-webpack-plugin
First add script tag into index.html ..
Second, add externals in webpack.config ..
externals: {
stamplay: 'Stamplay'
},
And finally .. new AngularPlugin into plugins on webpack.config
This way, worsks but I cant use angular-stamplay, when I try, a error in module stamplay apper. :(
See branch with this change here
The full project is here: https://github.com/Ridermansb/webpackBowerStarter
Ok, tried your project from git https://github.com/Ridermansb/webpackBowerStarter
And as mentioned at https://github.com/lpiepiora/bower-webpack-plugin/issues/20 I too had that Cannot resolve module 'stamplay-js-sdk' issue , then in webpackBowerStarter directory I did bower install stamplay-js-sdk then sudo npm run build and voila! It was done.
On npm run start which is same as webpack-dev-server -d --watch I get http://localhost:8080/webpack-dev-server/ like
And console says
sry if u meant something else. Does this resolves your issue ?
I have "angular-i18n" installed as a bower dependency.
When I run grunt serve or grunt build I have receive warning:
angular-i18n was not injected in your file. Please go take a look in
"/$APP_ROOT/bower_components/angular-i18n" for the file you need, then
manually include it in your file.
How can I remove this message?
Does making grunt insert this file into my index.html remove this warning?
Background
It appears that your Grunt tasks are using wiredep to look at your Bower dependencies and inject the tags for loading their associated files (link for CSS, script for JS, etc) into your HTML.
wiredep does this by looking at the bower.json file on your project to figure out what you need, then looking in the bower.json file of each dependency to figure out what they need, and so on. Having developed a dependency tree, wiredep uses the main property in the bower.json files to determine what files from each needed package should be linked into your HTML.
When a package does not have an appropriate bower configuration (missing bower.json or missing/improper main property), wiredep warns you about that problem so that you know it couldn't automatically add what you need. In other words, it's telling you that not all assets have been added to your built HTML, and that you need to manually intervene to add what's missing.
General solution
Generally, there is nothing you can do in your own code to correct this. Manually linking the file in your HTML (outside of the wiredep marked areas so as to avoid having it overwritten) will ensure your project works. wiredep, however, will always warn you when it runs because the package itself still has the problem. You'd need to open an issue to the owner of the problem package in order to ask them to correct their packaging meta info.
The project you're having issues with
I searched bower for the angular-i18n package and found that the project is hosted at https://github.com/angular/bower-angular-i18n . If you look at angular-i18n's bower.json you can see that it is missing the main property. This is why the warning is being issued.
As it turns out, though, it seems appropriate that this project does not offer a main property. The documentation for angular-i18n shows that you should bower install it, then manually link to the file that is appropriate for your desired locale. It would not be appropriate for this package to list a main file because it provides many files, none of which should be dictated as necessary by the package--it's a developer choice.
A possible solution for this case
If the warning really bothers you, or you do not like the need to manually link to the file, you could fork this package to your own GitHub account and modify the bower.json file to point main to the file you want loaded. Then you would remove angular-i18n as a dependency for your project, and add your fork's repo as a dependency instead.
Caveats:
This may cause issues keeping up to date if you are unfamiliar with maintaining Git repos/forks.
This will only work if angular-i18n is listed as an explicit dependency of your own project and is not being loaded in as a dependency for another project. If another project is loading this package, you'd have to start forking projects all the way down the tree such that you could override the configuration of each.
All in all, in this case it's probably best to manually link to the file you want and ignore the warning.
I'm getting this error message using angular-i18n in a yeoman project. The wiredep grunt task makes this error message. There are 2 solutions:
1. Exclude angular-i18n and include the file manually in the index.html
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
exclude: [
'bower_components/angular-i18n'
]
}
}
index.html
<script src="bower_components/angular-i18n/angular-locale_de-de.js"></script>
or:
2. Override/Set main attribute of bower_components/angular-i18n/bower.json
Gruntfile.js
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: /\.\.\//,
overrides: {
'angular-i18n': {
'main': 'angular-locale_de-de.js'
}
}
}
}
I choose to go with the second option overriding the main attribute. This way in the index.html the angular-i18n library still gets automatically injected by the grunt task.