Related
I am trying to use Font-awesome icons in my Angular-13 Application, whenever I try to use <fa-icon [icon]="[someIconName]"></fa-icon> it throws a below errors. I am unable to use any of the font-awesome Icons. Please help me with this. I further deleted node_module folder and then reinstalled it but was unable to fix it.
./node_modules/bootstrap/dist/css/bootstrap.min.css.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet1.rules[5].rules[0].oneOf[0].use1!./node_modules/postcss-loader/dist/cjs.js??ruleSet1.rules[5].rules[0].oneOf[0].use[2]!./node_modules/bootstrap/dist/css/bootstrap.min.css
Warning: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning
(6:29521) autoprefixer: Replace color-adjust to print-color-adjust.
The color-adjust shorthand is currently deprecated.
./node_modules/#fortawesome/angular-fontawesome/fesm2015/angular-fontawesome.mjs
Error: Module build failed (from ./node_modules/#angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: Cannot create property 'message' on string
'C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules#fortawesome\angular-fontawesome\fesm2015\angular-fontawesome.mjs:
This application depends upon a library published using Angular
version 14.0.0, which requires Angular version 14.0.0 or newer to work
correctly. Consider upgrading your application to use a more recent
version of Angular. 134 | } 135 | FaStackItemSizeDirective.ɵfac =
i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0",
ngImport: i0, type: FaStackItemSizeDirective, deps: [], target:
i0.ɵɵFactoryTarget.Directive });
136 | FaStackItemSizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.0", type:
FaStackItemSizeDirective, selector:
"fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]", inputs: {
stackItemSize: "stackItemSize", size: "size" }, usesOnChanges: true,
ngImport: i0 });
| ^^^^^^^^^^9m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^9m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^9m^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
137 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version:
"14.0.0", ngImport: i0, type: FaStackItemSizeDirective, decorators: [{
138 | type: Directive, 139 | args: [{'
at run (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules#babel\core\lib\transformation\index.js:37:15)
at run.next ()
at Function.transform (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules#babel\core\lib\transform.js:25:41)
at transform.next ()
at step (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:261:32)
at C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:273:13
at async.call.result.err.err (C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:223:11)
at C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\gensync\index.js:37:40
Error:
node_modules/#fortawesome/angular-fontawesome/icon/duotone-icon.component.d.ts:54:18
error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).
54 static ɵcmp: i0.ɵɵComponentDeclaration<FaDuotoneIconComponent,
"fa-duotone-icon", never, { "swapOpacity": "swapOpacity";
"primaryOpacity": "primaryOpacity"; "secondaryOpacity":
"secondaryOpacity"; "primaryColor": "primaryColor"; "secondaryColor":
"secondaryColor"; }, {}, never, never, false>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error:
node_modules/#fortawesome/angular-fontawesome/icon/icon.component.d.ts:66:18
error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).
66 static ɵcmp: i0.ɵɵComponentDeclaration<FaIconComponent,
"fa-icon", never, { "icon": "icon"; "title": "title"; "spin": "spin";
"pulse": "pulse"; "mask": "mask"; "styles": "styles"; "flip": "flip";
"size": "size"; "pull": "pull"; "border": "border"; "inverse":
"inverse"; "symbol": "symbol"; "rotate": "rotate"; "fixedWidth":
"fixedWidth"; "classes": "classes"; "transform": "transform";
"a11yRole": "a11yRole"; }, {}, never, never, false>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error:
node_modules/#fortawesome/angular-fontawesome/layers/layers-counter.component.d.ts:20:18
error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).
20 static ɵcmp:
i0.ɵɵComponentDeclaration<FaLayersCounterComponent,
"fa-layers-counter", never, { "content": "content"; "title": "title";
"styles": "styles"; "classes": "classes"; "position": "position"; },
{}, never, never, false>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error:
node_modules/#fortawesome/angular-fontawesome/layers/layers-text.component.d.ts:32:18
error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).
32 static ɵcmp: i0.ɵɵComponentDeclaration<FaLayersTextComponent,
"fa-layers-text", never, { "content": "content"; "title": "title";
"styles": "styles"; "classes": "classes"; "spin": "spin"; "pulse":
"pulse"; "flip": "flip"; "size": "size"; "pull": "pull"; "border":
"border"; "inverse": "inverse"; "rotate": "rotate"; "fixedWidth":
"fixedWidth"; "transform": "transform"; }, {}, never, never, false>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error:
node_modules/#fortawesome/angular-fontawesome/layers/layers.component.d.ts:18:18
error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).
18 static ɵcmp: i0.ɵɵComponentDeclaration<FaLayersComponent,
"fa-layers", never, { "size": "size"; "fixedWidth": "fixedWidth"; },
{}, never, ["*"], false>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error:
node_modules/#fortawesome/angular-fontawesome/stack/stack-item-size.directive.d.ts:11:18
error TS2314: Generic type 'ɵɵDirectiveDeclaration' requires 6 type argument(s).
11 static ɵdir:
i0.ɵɵDirectiveDeclaration<FaStackItemSizeDirective,
"fa-icon[stackItemSize],fa-duotone-icon[stackItemSize]", never, {
"stackItemSize": "stackItemSize"; "size": "size"; }, {}, never, never,
false>;
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error:
node_modules/#fortawesome/angular-fontawesome/stack/stack.component.d.ts:18:18
error TS2314: Generic type 'ɵɵComponentDeclaration' requires 7 type argument(s).
18 static ɵcmp: i0.ɵɵComponentDeclaration<FaStackComponent,
"fa-stack", never, { "size": "size"; }, {}, never, ["*"], false>;
This is package.json
Thank you in Advance
It is quite hard to guess the error without more information, but following the error message:
TypeError: Cannot create property 'message' on string 'C:\Users\ALTrakesg2\Downloads\Employee-feedback-management-system\frontend\node_modules\#fortawesome\angular-fontawesome\fesm2015\angular-fontawesome.mjs: This application depends upon a library published using Angular version 14.0.0, which requires Angular version 14.0.0 or newer to work correctly.
Looks like you need to upgrade Angular version in order to use your current #fortawesome library version.
Depending on your Angular version, you should install the matching #fortawesome/angular-fontawesome version, to do this, just check the compatibility table:
https://github.com/FortAwesome/angular-fontawesome
Example for Angular 14.x:
npm i -S #fortawesome/angular-fontawesome#0.11.0 #fortawesome/fontawesome-svg-core #fortawesome/free-solid-svg-icons #fortawesome/free-brands-svg-icons
For Angular 13, use :
ng add #fortawesome/angular-fontawesome#0.10.x
It will solve the issue.
You don't need to do anything ,just match your angular version with fontawesome version and then,it's ready to use....
Go through this link
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
Uninstall #angular/material, and reinstall from with the official command which makes a previous configuration of the theme to use, the error occurs due to unmatchability or not selecting a default theme.
Solution: install angular-core version.
npm install #angular/cdk#version
ng add #angular/material#version
I had the similar issue with toastr in Angular.
Generic type 'ɵɵComponentDeclaration' requires between 7 and 8 type arguments.
50 static ɵcmp: i0.ɵɵComponentDeclaration<ToastNoAnimation, "[toast-component]", never, {}, {}, never, never, false, never>
Just change your config to
ToastrModule.forRoot(
{
maxOpened: 1,
progressBar: true,
progressAnimation: 'decreasing',
preventDuplicates: true,
}),
I don't think this is a duplicate issue. I only have #polymer/polymer installed as a dependency and imported into my vendor bundle (no #polymer/paper-input). I'm using v3.0.5 and I don't even see iron-meta in the dependency tree (via npm list) and my stack trace looks different - it points to polymer/lib/elements/dom-module.js
dom-module.js:178 Uncaught DOMException: Failed to execute 'define' on
'CustomElementRegistry': this name has already been used with this
registry
The trace points to this line customElements.define('dom-module', DomModule);
at #polymer/polymer/lib/elements/dom-module.js?:178:16
I'm attempting to setup a basic Polymer 3 project. I'm using Webpack with babel-loader to compile to es5. Because I'm compiling to es5, I'm including the custom-elements-es5-adapter.js along with webcomponents-bundle.js per instructions on the webcomponentsjs repo. Those scripts are simply copied from node_modules to the output directory and the script tags are included in the html head.
As for my component code, I'm creating separate js chunks for each polymer component as well as a separate chunk for shared imports which currently only includes Polymer. The compilation and code splitting works without error and the resulting chunks are added to the html before the closing body tag.
The Webpack SplitChunks plugin pulls the #polymer/polymer imports into the separate chunk so that they are only included once.
The goal is to have all required vendor code pulled into a common script and each component in a tiny chunk of it's own that can be selectively included.
my-common.js (shared/common chunk)
my-button.js (component chunk)
my-tabs.js (component chunk)
...more component chunks
With my current setup, the chunks appear to be created correctly.
In theory and based on what I've read so far, this should work but I'm completely stuck on this error.
If I bundle my component files together, everything works fine.
Here's an example of one of my very simple component files:
import { html, PolymerElement } from '#polymer/polymer';
export default class MyButton extends PolymerElement {
constructor() {
super();
}
static get template() {
return html`
<slot></slot>
`;
}
static get properties() {
return { }
}
}
customElements.define('my-button', MyButton);
Here is the webpack config I've created for this proof of concept:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const SRC_PATH = path.resolve(__dirname, './src');
const DIST_PATH = path.resolve(__dirname, './dist');
module.exports = {
entry: {
'my-button': `${SRC_PATH}/js/components/my-button.js`,
'my-tabs': `${SRC_PATH}/js/components/my-tabs.js`
},
output: {
filename: 'js/[name].js',
path: DIST_PATH
},
resolve: {
extensions: ['.js']
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: [[
'env',
{
targets: {
browsers: [
'last 2 versions',
'ie > 10'
]
},
debug: true
}
]]
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: `${SRC_PATH}/index.html`,
filename: 'index.html',
inject: 'head'
}),
new CopyWebpackPlugin([{
from: './node_modules/#webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
to: 'js/vendor',
toType: 'dir'
}, {
from: './node_modules/#webcomponents/webcomponentsjs/webcomponents-bundle.js',
to: 'js/vendor',
toType: 'dir'
}, {
from: './node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js',
to: 'js/vendor',
toType: 'dir'
}]),
new BundleAnalyzerPlugin()
],
optimization: {
splitChunks: {
cacheGroups: {
default: false,
commons: {
name: 'my-common',
chunks: 'all',
minChunks: 2
}
}
},
minimizer: [
new UglifyJSPlugin({
uglifyOptions: {
ie8: false,
safari10: false,
compress: {
warnings: false,
drop_console: true
},
output: {
ascii_only: true,
beautify: false
}
}
})
]
},
devServer: {
contentBase: DIST_PATH,
compress: false,
overlay: {
errors: true
},
port: 8080,
host: '127.0.0.1'
}
};
And here's the html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>polymer-3-sandbox</title>
<meta name="description" content="A polymer 3 sandbox">
<link rel="manifest" href="/manifest.json">
<script src="/js/vendor/webcomponents-bundle.js"></script>
<script src="/js/vendor/custom-elements-es5-adapter.js"></script>
<script type="text/javascript" src="js/my-common.js"></script>
<script type="text/javascript" src="js/my-button.js"></script>
<script type="text/javascript" src="js/my-tabs.js"></script>
</head>
<body>
<p>
<my-button>Learn More</my-button>
</p>
</body>
</html>
We have solved this problem with a nested polymer removal script, check the original github issue here.
The trick is to get npm to run a preinstall.sh script by adding the following to your package.json file :
"scripts": {
"preinstall": "../preinstall.sh"
}
Then run the following script which installs npm scriptlessly twice to get around install bugs :
#!/bin/bash
# Author: Flatmax developers
# Date : 2018 10 17
# License : free
npm i --ignore-scripts || true
if [ `ls node_modules/ | wc -l` -eq "0" ]; then
zenity --error --text="ERROR : cb() never called\nrm node_modules and pacakge-lock.json and try again"
fi
npm i --ignore-scripts || true
if [ `ls node_modules/ | wc -l` -eq "0" ]; then
zenity --error --text="ERROR : cb() never called\nrm node_modules and pacakge-lock.json and try again"
fi
. ../fixNestings.sh
Finally, the actual nestings removal script is like so :
#!/bin/bash
# Author: Flatmax developers
# Date : 2018 10 17
# License : free
# The following function will remove nested directories, where $1 exists like so
# node_modules/.*/node_modules/$1
# #param $1 the module name to remove nestings of
function rmNestedMod(){
name=$1
paths=`find -L node_modules -name $1 | sed "s|^node_modules/||;s|/\$name$||" | grep node_modules`
for p in $paths; do
echo rm -rf node_modules/$p/$name
rm -rf node_modules/$p/$name
done
}
# remove all nested polymer namespaces
namespaces=`ls node_modules/#polymer/`
for n in $namespaces; do
rmNestedMod "$n"
done
I could run it before. But now i cant. It is in a project. My friend who has this project from git latst repository (that is also how i imported) can run protractor under gateway with gulp protractor qa. But for me it gives errors
vegan#vegan:~/xxx-yyyy/gateway$ gulp protractor qa
[16:04:08] Using gulpfile ~/xxx-yyyy/gateway/gulpfile.js
[16:04:08] Starting 'protractor'...
[16:04:08] Starting 'qa'...
[16:04:08] Finished 'qa' after 67 μs
Using ChromeDriver directly...
[launcher] Running 1 instances of WebDriver
/home/vegan/xxx-yyyy/gateway/node_modules/selenium-webdriver/http/index.js:174
callback(new Error(message));
^
Error: ECONNREFUSED connect ECONNREFUSED 127.0.0.1:40886
at ClientRequest.<anonymous> (/home/vegan/xxx-yyyy/gateway/node_modules/selenium-webdriver/http/index.js:174:16)
at emitOne (events.js:90:13)
at ClientRequest.emit (events.js:182:7)
at Socket.socketErrorListener (_http_client.js:306:9)
at emitOne (events.js:90:13)
at Socket.emit (events.js:182:7)
at emitErrorNT (net.js:1265:8)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)
From: Task: WebDriver.createSession()
at Function.webdriver.WebDriver.acquireSession_ (/home/vegan/xxx-yyyy/gateway/node_modules/selenium-webdriver/lib/webdriver/webdriver.js:157:22)
at Function.webdriver.WebDriver.createSession (/home/vegan/xxx-yyyy/gateway/node_modules/selenium-webdriver/lib/webdriver/webdriver.js:131:30)
at new Driver (/home/vegan/xxx-yyyy/gateway/node_modules/selenium-webdriver/chrome.js:810:36)
at [object Object].DirectDriverProvider.getNewDriver (/home/vegan/xxx-yyyy/gateway/node_modules/gulp-protractor/node_modules/protractor/lib/driverProviders/direct.js:68:16)
at [object Object].Runner.createBrowser (/home/vegan/xxx-yyyy/gateway/node_modules/gulp-protractor/node_modules/protractor/lib/runner.js:186:37)
at /home/vegan/xxx-yyyy/gateway/node_modules/gulp-protractor/node_modules/protractor/lib/runner.js:276:21
at _fulfilled (/home/vegan/xxx-yyyy/gateway/node_modules/gulp-protractor/node_modules/q/q.js:797:54)
at self.promiseDispatch.done (/home/vegan/xxx-yyyy/gateway/node_modules/gulp-protractor/node_modules/q/q.js:826:30)
at Promise.promise.promiseDispatch (/home/vegan/xxx-yyyy/gateway/node_modules/gulp-protractor/node_modules/q/q.js:759:13)
at /home/vegan/xxx-yyyy/gateway/node_modules/gulp-protractor/node_modules/q/q.js:525:49
[launcher] Process exited with error code 1
[16:04:10] gulp-notify: [JHipster Gulp Build] Error: protractor exited with code 1
[16:04:10] Finished 'protractor' after 2.41 s
[16:04:10] E2E Tests failed
I did not touch any of conf files of protractor. They are default.
that is in package json
},
"engines": {
"node": "^4.3"
},
this is the error line for 174
request.on('error', function(e) {
if (e.code === 'ECONNRESET') {
setTimeout(function() {
sendRequest(options, callback, opt_data, opt_proxy);
}, 15);
} else {
var message = e.message;
if (e.code) {
message = e.code + ' ' + message;
}
callback(new Error(message));
}
});
this is in packagejson in selenumwebdriver
{
"_args": [
[
"selenium-webdriver#https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.48.2.tgz",
"/home/vegan/xxx-yyyy/gateway"
]
],
"_from": "selenium-webdriver#2.48.2",
"_id": "selenium-webdriver#2.48.2",
"_inCache": true,
"_location": "/selenium-webdriver",
"_phantomChildren": {
"bufferutil": "1.2.1",
"options": "0.0.6",
"ultron": "1.0.2",
"utf-8-validate": "1.2.2",
"xmlbuilder": "4.2.1"
},
"_requested": {
"name": "selenium-webdriver",
"raw": "selenium-webdriver#https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.48.2.tgz",
"rawSpec": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.48.2.tgz",
"scope": null,
"spec": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.48.2.tgz",
"type": "remote"
},
"_requiredBy": [
"/gulp-protractor/protractor",
"/protractor"
],
"_resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.48.2.tgz",
"_shasum": "b26a4631430d0a9f36284ee0cfe09676e8f348ca",
"_shrinkwrap": null,
"_spec": "selenium-webdriver#https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.48.2.tgz",
"_where": "/home/vegan/xx-yyyy/gateway",
"bugs": {
"url": "https://github.com/SeleniumHQ/selenium/issues"
},
"dependencies": {
"adm-zip": "0.4.4",
"rimraf": "^2.2.8",
"tmp": "0.0.24",
"ws": "^0.8.0",
"xml2js": "0.4.4"
},
"description": "The official WebDriver JavaScript bindings from the Selenium project",
"devDependencies": {
"express": "^4.11.2",
"mocha": ">= 1.21.x",
"multer": "^0.1.7",
"promises-aplus-tests": "^2.1.0",
"serve-index": "^1.6.1"
},
"engines": {
"node": ">= 0.12.x"
},
"homepage": "https://github.com/SeleniumHQ/selenium",
"keywords": [
"automation",
"selenium",
"testing",
"webdriver",
"webdriverjs"
],
"license": "Apache-2.0",
"main": "./index",
"name": "selenium-webdriver",
"optionalDependencies": {},
"readme": "# selenium-webdriver\n\nSelenium is a browser automation library. Most often used for testing\nweb-applications, Selenium may be used for any task that requires automating\ninteraction with the browser.\n\n## Installation\n\nSelenium supports Node `0.12.x` and `4.x`. Users on Node `0.12.x` must run with\nthe --harmony flag. Selenium may be installed via npm with\n\n npm install selenium-webdriver\n\nOut of the box, Selenium includes everything you need to work with Firefox. You\nwill need to download additional components to work with the other major\nbrowsers. The drivers for Chrome, IE, PhantomJS, and Opera are all standalone\nexecutables that should be placed on your\n[PATH](http://en.wikipedia.org/wiki/PATH_%28variable%29). The SafariDriver\nbrowser extension should be installed in your browser before using Selenium; we\nrecommend disabling the extension when using the browser without Selenium or\ninstalling the extension in a profile only used for testing.\n\n| Browser | Component |\n| ----------------- | ---------------------------------- |\n| Chrome | [chromedriver(.exe)][chrome] |\n| Internet Explorer | [IEDriverServer.exe][release] |\n| PhantomJS | [phantomjs(.exe)][phantomjs] |\n| Opera | [operadriver(.exe)][opera] |\n| Safari | [SafariDriver.safariextz][release] |\n\n## Usage\n\nThe sample below and others are included in the `example` directory. You may\nalso find the tests for selenium-webdriver informative.\n\n var webdriver = require('selenium-webdriver'),\n By = require('selenium-webdriver').By,\n until = require('selenium-webdriver').until;\n\n var driver = new webdriver.Builder()\n .forBrowser('firefox')\n .build();\n\n driver.get('http://www.google.com/ncr');\n driver.findElement(By.name('q')).sendKeys('webdriver');\n driver.findElement(By.name('btnG')).click();\n driver.wait(until.titleIs('webdriver - Google Search'), 1000);\n driver.quit();\n\n### Using the Builder API\n\nThe `Builder` class is your one-stop shop for configuring new WebDriver\ninstances. Rather than clutter your code with branches for the various browsers,\nthe builder lets you set all options in one flow. When you call\n`Builder#build()`, all options irrelevant to the selected browser are dropped:\n\n var webdriver = require('selenium-webdriver'),\n chrome = require('selenium-webdriver/chrome'),\n firefox = require('selenium-webdriver/firefox');\n\n var driver = new webdriver.Builder()\n .forBrowser('firefox')\n .setChromeOptions(/* ... */)\n .setFirefoxOptions(/* ... */)\n .build();\n\nWhy would you want to configure options irrelevant to the target browser? The\n`Builder`'s API defines your _default_ configuration. You can change the target\nbrowser at runtime through the `SELENIUM_BROWSER` environment variable. For\nexample, the `example/google_search.js` script is configured to run against\nFirefox. You can run the example against other browsers just by changing the\nruntime environment\n\n # cd node_modules/selenium-webdriver\n node example/google_search\n SELENIUM_BROWSER=chrome node example/google_search\n SELENIUM_BROWSER=safari node example/google_search\n\n### The Standalone Selenium Server\n\nThe standalone Selenium Server acts as a proxy between your script and the\nbrowser-specific drivers. The server may be used when running locally, but it's\nnot recommend as it introduces an extra hop for each request and will slow\nthings down. The server is required, however, to use a browser on a remote host\n(most browser drivers, like the IEDriverServer, do not accept remote\nconnections).\n\nTo use the Selenium Server, you will need to install the\n[JDK](http://www.oracle.com/technetwork/java/javase/downloads/index.html) and\ndownload the latest server from [Selenium][release]. Once downloaded, run the\nserver with\n\n java -jar selenium-server-standalone-2.45.0.jar\n\nYou may configure your tests to run against a remote server through the Builder\nAPI:\n\n var driver = new webdriver.Builder()\n .forBrowser('firefox')\n .usingServer('http://localhost:4444/wd/hub')\n .build();\n\nOr change the Builder's configuration at runtime with the `SELENIUM_REMOTE_URL`\nenvironment variable:\n\n SELENIUM_REMOTE_URL=\"http://localhost:4444/wd/hub\" node script.js\n\nYou can experiment with these options using the `example/google_search.js`\nscript provided with `selenium-webdriver`.\n\n## Documentation\n\nAPI documentation is included in the `docs` directory and is also available\nonline from the [Selenium project][api]. Addition resources include\n\n- the #selenium channel on freenode IRC\n- the [selenium-users#googlegroups.com][users] list\n- [SeleniumHQ](http://www.seleniumhq.org/docs/) documentation\n\n## Contributing\n\nContributions are accepted either through [GitHub][gh] pull requests or patches\nvia the [Selenium issue tracker][issues]. You must sign our\n[Contributor License Agreement][cla] before your changes will be accepted.\n\n## Issues\n\nPlease report any issues using the [Selenium issue tracker][issues]. When using\nthe issue tracker\n\n- __Do__ include a detailed description of the problem.\n- __Do__ include a link to a [gist](http://gist.github.com/) with any\n interesting stack traces/logs (you may also attach these directly to the bug\n report).\n- __Do__ include a [reduced test case][reduction]. Reporting \"unable to find\n element on the page\" is _not_ a valid report - there's nothing for us to\n look into. Expect your bug report to be closed if you do not provide enough\n information for us to investigate.\n- __Do not__ use the issue tracker to submit basic help requests. All help\n inquiries should be directed to the [user forum][users] or #selenium IRC\n channel.\n- __Do not__ post empty \"I see this too\" or \"Any updates?\" comments. These\n provide no additional information and clutter the log.\n- __Do not__ report regressions on closed bugs as they are not actively\n monitored for upates (especially bugs that are >6 months old). Please open a\n new issue and reference the original bug in your report.\n\n## License\n\nLicensed to the Software Freedom Conservancy (SFC) under one\nor more contributor license agreements. See the NOTICE file\ndistributed with this work for additional information\nregarding copyright ownership. The SFC licenses this file\nto you under the Apache License, Version 2.0 (the\n\"License\"); you may not use this file except in compliance\nwith the License. You may obtain a copy of the License at\n\nhttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing,\nsoftware distributed under the License is distributed on an\n\"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\nKIND, either express or implied. See the License for the\nspecific language governing permissions and limitations\nunder the License.\n\n[api]: http://seleniumhq.github.io/selenium/docs/api/javascript/\n[cla]: http :/ /go o.gl/qC50R\n[chrome]: http://chromedriver.storage.googleapis.com/index.html\n[gh]: https://github.com/SeleniumHQ/selenium/\n[issues]: https://github.com/SeleniumHQ/selenium/issues\n[opera]: https://github.com/operasoftware/operachromiumdriver/releases\n[phantomjs]: http://phantomjs.org/\n[reduction]: http://www.webkit.org/quality/reduction.html\n[release]: http://selenium-release.storage.googleapis.com/index.html\n[users]: https://groups.google.com/forum/#!forum/selenium-users\n",
"readmeFilename": "README.md",
"repository": {
"type": "git",
"url": "git+https://github.com/SeleniumHQ/selenium.git"
},
"scripts": {
"test": "mocha --harmony -t 600000 --recursive test"
},
"version": "2.48.2"
}
those are versions
vegan#vegan:~/xx-yyyy/gateway$ node -v
v5.12.0
vegan#vegan:~/xx-yyyy/gateway$ npm -v
3.8.6
my friend also has this versions but he can run Also i could until lasst week. I dont know what happened. I deleted node modules, resetted all but did not work.
i dont know what i can give information about.
i also tried this
https://stackoverflow.com/a/34758398/6804200
changed configjson to this
{
"webdriverVersions": {
"seleniumServerJar": './node_modules/protractor/selenium/selenium-server-standalone-2.51.0.jar',
"chromedriver": "2.21",
"iedriver": "2.51.0"
}
}
but nothng changed.
i did also npm update
gulp protractor is
gulp.task(
'protractor', function () {
configObj['args'] = [];//to be able to add multiple parameters
if (argv.suite) {
configObj['args'].push(
'--suite',
argv.suite
);
}
return gulp.src([])
.pipe(plumber({errorHandler: handleErrors}))
.pipe(protractor(configObj))
.on(
'error', function () {
gutil.log('E2E Tests failed');
process.exit(1);
}
);
}
);
var configObj = {
configFile: config.test + 'protractor.conf.js'
};
protractorconf is
var HtmlScreenshotReporter = require("protractor-jasmine2-screenshot-reporter");
var JasmineReporters = require('jasmine-reporters');
var prefix = 'src/test/javascript/'.replace(/[^/]+/g, '..');
exports.config = {
chromeDriver: prefix + 'node_modules/protractor/selenium/chromedriver',
allScriptsTimeout: 240000,
suites: {
register: './e2e/account/register/*.js',
login: './e2e/account/login/*.js'
},
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
framework: 'jasmine2',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 240000
},
onPrepare: function () {
var disableNgAnimate = function () {
angular
.module('disableNgAnimate', [])
.run(
[
'$animate',
function ($animate) {
$animate.enabled(false);
}
]
);
};
var disableCssAnimate = function () {
angular
.module('disableCssAnimate', [])
.run(
function () {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'body * {' +
'-webkit-transition: none !important;' +
'-moz-transition: none !important;' +
'-o-transition: none !important;' +
'-ms-transition: none !important;' +
'transition: none !important;' +
'}';
document.getElementsByTagName('head')[0].appendChild(style);
}
);
};
browser.addMockModule('disableNgAnimate', disableNgAnimate);
browser.addMockModule('disableCssAnimate', disableCssAnimate);
browser.driver.manage().window().maximize();
}
};
gulp tasks of qa
gulp.task('qa', function () {
argv.baseUrl = qaurl;
configObj['args'].push(
'--baseUrl',
argv.baseUrl
);
});
i got this when i do npm install
npm WARN lifecycle gateway#0.0.0~postinstall: cannot run in wd %s %s
(wd=%s) gateway#0.0.0 webdriver-manager update
/home/vegan/xx-yyy/gateway npm WARN optional Skipping failed optional
dependency /chokidar/fsevents: npm WARN notsup Not compatible with
your operating system or architecture: fsevents#1.0.17
also i get this
vegan#vegan:~/xx-yyy/gateway$ sudo npm install -g protractor
npm WARN deprecated minimatch#0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
/usr/bin/protractor -> /usr/lib/node_modules/protractor/bin/protractor
/usr/bin/webdriver-manager -> /usr/lib/node_modules/protractor/bin/webdriver-manager
/usr/lib
└─┬ protractor#5.0.0
└── source-map-support#0.4.11
it is a spring boot project. it uses gulp. the project is not needed to be up to run the protractor.
Remove & reinstall npm, gulp, nodejs.
Could you please update the gulp-protractor-qa plugin. Mean while i hope you are using gulp-protractor update that also.
Update gulp-protractor to version 3.0.0
npm update gulp-protractor & give a try it should work.
Here is my webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
context: __dirname,
entry: {
javascript: './static/jsx/main.jsx'
},
output: {
path: path.resolve('./static/js/app/'),
filename: 'bundle.js'
},
module: {
preLoaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'source-map'
}
],
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.(jpg|png)$/,
loader: 'url-loader?limit=25000',
include: path.resolve('./static/images/')
}
]
},
};
Here is example of using png in a jsx file
import L from 'leaflet';
import { LayersControl, Marker, Popup } from 'react-leaflet';
const src = require('./marker-icon-red.png');
//Extend the Default marker class
let RedIcon = L.Icon.Default.extend({
options: {
iconUrl: src
}
});
let redIcon = new RedIcon();
When I run webpack for my jsx files (using gulp)
gulp.task('transform', function() {
return gulp.src(path.JS)
.pipe(webpack( require('./webpack.config.js') ))
.on('error', swallowError)
.pipe(gulp.dest(path.DEST_BUILD));
});
I get this error
[15:14:10] Starting 'transform'...
Error in plugin 'webpack-stream'
Message:
./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
# ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Version: webpack 1.13.2
Asset Size Chunks Chunk Names
bundle.js 1.48 MB 0 [emitted] javascript
ERROR in ./static/jsx/map/markers/marker-icon-red.png
Module parse failed: D:\work\Cycling\static\jsx\map\markers\marker-icon-red.png
Unexpected character '?' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '?' (1:0)
at Parser.pp$4.raise (D:\work\Cycling\node_modules\webpack\node_modules\acor
n\dist\acorn.js:2221:15)
at Parser.pp$7.getTokenFromCode (D:\work\Cycling\node_modules\webpack\node_m
odules\acorn\dist\acorn.js:2756:10)
at Parser.pp$7.readToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2477:17)
at Parser.pp$7.nextToken (D:\work\Cycling\node_modules\webpack\node_modules\
acorn\dist\acorn.js:2468:15)
at Parser.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:515:10)
at Object.parse (D:\work\Cycling\node_modules\webpack\node_modules\acorn\dis
t\acorn.js:3098:39)
at Parser.parse (D:\work\Cycling\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (D:\work\Cycling\node_modules\webpack\lib\N
ormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (D:\work\Cycling\node_modules\webpack-cor
e\lib\NormalModuleMixin.js:310:10)
at nextLoader (D:\work\Cycling\node_modules\webpack-core\lib\NormalModuleMix
in.js:275:25)
# ./static/jsx/map/markers/parkings_markers.jsx 19:10-42
[15:14:21] Finished 'transform' after 11 s
As I understood it's babel tries to read png file, although I told webpack that png files should be treated by url-loader not babel.
What am I doing wrong?
Thanks for help!
Your url-loader config is set to only consider images from ./static/images, because of the include property:
{
test : /\.(jpg|png)$/,
loader : 'url-loader?limit=25000',
include : path.resolve('./static/images/')
}
However, the image you're trying to require is located in a different directory (./static/jsx/map/markers/).
If you remove the include, it'll probably work.
Renaming img1.PNG to img1.png solved it in my case.
I would like to extract the messages from the source code to a JSON file, using Babel v6, react-intl v2, and webpack. It's all compiling fine, but not extracting anything. How do I make v2 of react-intl properly extract the messages?
There's an option messagesDir:
I've tried:
new file .babel.rc from here: https://github.com/yahoo/babel-plugin-react-intl/issues/23 – probably misspelt name, should be .babelrc.
new file .babelrc:
{
"extra": {
"react-intl": {
"messagesDir": "./i18n",
"enforceDescriptions": true
}
}
}
With webpack config
{ test: /\.js$/,
loader: 'babel-loader',
query: {
// react needed for JSX syntax
// es2015 needed for modules
// stage0 needed to do splats (...variable)
presets: ['react', 'es2015', 'stage-0'],
// react-intl extracts i18n messages to a shared file
// add-module-exports removes the need to do `require('a').default`
plugins: ['react-intl', 'add-module-exports'],
cacheDirectory: true
},
exclude: /node_modules|bower_components/
},
gives: "index.js: Unknown option: /.babelrc.extra" as the error message.
I've tried adding the above extra property to the webpack configuration above, too. It gives a very similar error message.
Versions:
✗ npm ls | grep "intl"
├─┬ babel-plugin-react-intl#2.0.0
│ └── intl-messageformat-parser#1.2.0
├── intl#1.0.1
├── intl-locales-supported#1.0.0
├── intl-messageformat#1.2.0
├─┬ react-intl#2.0.0-pr-3
│ ├── intl-format-cache#2.0.4
The answer is to use a very custom webpack syntax:
Syntax is thus:
5 plugins: [
- ['react-intl', {
6 'messagesDir': './i18n'
6 }], 'add-module-exports']