React has no exported member LinkHTMLAttributes - node.js

I am building a react application using vs2017 , npm and webpack.
I can't get vs to build my solution because of the error described in my title:
Error TS2694 Build:Namespace 'React' has no exported member
'LinkHTMLAttributes'. SpyStore.React C:\Work\Development\React\Spystore\SpyStore.React\SpyStore.React\node_modules\#types\react-router\lib\Link.d.ts 10
Js File : \node_modules\#types\react-router\lib\Link.d.ts
import * as React from 'react';
import Router from './Router';
declare const Link: Link;
type Link = Link.Link;
export default Link;
declare namespace Link {
interface LinkProps extends React.LinkHTMLAttributes<Link> {
activeStyle?: React.CSSProperties;
activeClassName?: string;
onlyActiveOnIndex?: boolean;
to: Router.RoutePattern | Router.LocationDescriptor | ((...args: any[]) => Router.LocationDescriptor);
}
interface Link extends React.ComponentClass<LinkProps> {}
interface LinkElement extends React.ReactElement<LinkProps> {}
}
These are the dependencies and devdependencies inside my package.json:
"dependencies": {
"jquery": "3.1.1",
"react": "15.4.2",
"react-dom": "15.4.2",
"react-router": "3.0.2"
},
"devDependencies": {
"#types/jquery": "1.10.31",
"#types/react": "0.0.0",
"#types/react-router": "^2.0.41",
"typescript": "2.1.6",
"tslint": "4.4.2",
"webpack": "2.2.1",
"webpack-dev-middleware": "1.10.0",
"webpack-dev-server": "2.3.0",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "2.6.1",
"awesome-typescript-loader": "3.0.4-rc.2",
"url-loader": "0.5.7",
"ts-helpers": "1.1.2",
"ts-loader": "2.0.0",
"ts-node": "2.1.0",
"tslint-loader": "3.3.0",
"open-browser-webpack-plugin": "0.0.3",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.10.0",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.28.0",
"compression-webpack-plugin": "0.3.2",
"copy-webpack-plugin": "4.0.1",
"source-map-loader": "0.1.6"
}
I have tried to delete my node_modules and install them again.
Without success.
Any ideas how to solve this?

Well, clearly I didn't search long enough.. Impatient me..
My visual studio didn't show any intellisense on the error, but after some trying I only had to update my react-router to a newer version ;)

Related

Getting mongoose error on building NestJs project

I have used mongoose package in my nest project but when I am trying to build the project using npm run build.Then its throwing below error in my console:
node_modules/mongoose/node_modules/mongodb/mongodb.d.ts:34:15 - error TS2305: Module '"tls"'
has no exported member 'TLSSocketOptions'.
34 import type { TLSSocketOptions } from 'tls';
I have even updated the mongoose package to the latest version.Then also I am getting the same error:
Below are my dependencies inside package.json file:
"dependencies": {
"#apollo/gateway": "^0.38.0",
"#google-cloud/translate": "^6.2.1",
"#nestjs/common": "^8.0.6",
"#nestjs/core": "^8.0.6",
"#nestjs/cqrs": "^8.0.0",
"#nestjs/graphql": "^8.0.2",
"#nestjs/microservices": "^8.0.6",
"#nestjs/mongoose": "^9.0.3",
"#nestjs/platform-express": "^8.0.6",
"#types/luxon": "^1.15.1",
"apollo-server-express": "^2.25.2",
"bunyan": "^1.8.12",
"bunyan-rotating-file-stream": "^1.6.3",
"connect-redis": "^3.4.1",
"consul": "^0.40.0",
"device-detector-js": "^3.0.3",
"elasticsearch": "^16.2.0",
"express-session": "^1.16.2",
"firebase-admin": "^9.4.2",
"graphql": "^14.7.0",
"graphql-tools": "^4.0.4",
"json-rules-engine": "^3.1.0",
"kafkajs": "^1.15.0",
"lodash": "^4.17.21",
"luxon": "^1.16.0",
"moneysafe": "^2.2.1",
"mongodb": "^3.5.9",
"mongoose": "^6.3.0",
"nestjs-i18n": "^8.1.1",
"node-wit": "^6.0.0",
"reflect-metadata": "^0.1.12",
"rimraf": "^2.6.2",
"rxjs": "^7.3.0",
"ts-morph": "^12.0.0",
"typescript": "^4.3.5",
"uuid": "^3.3.2"
},
"devDependencies": {
"#nestjs/testing": "^5.1.0",
"#types/jest": "^23.3.1",
"#types/lodash": "^4.14.134",
"#types/node": "^10.7.1",
"#types/supertest": "^2.0.5",
"jest": "^23.5.0",
"nodemon": "^1.18.3",
"prettier": "^1.14.2",
"supertest": "^3.1.0",
"ts-jest": "^23.1.3",
"ts-loader": "^4.4.2",
"ts-node": "^7.0.1",
"tsconfig-paths": "^3.5.0",
"tslint": "5.11.0"
}
Someone let me know how can I resolve this error.Any help on this will be really appreciated.
I fixed this by updating #types/node to the latest version. This specific error message is then fixed!

POSTCSS - NPM Error Running NPM RUN PRODUCTION

I'm getting the following error anytime I try to run 'npm run production'. The rest of the error is just a list of 'node_modules' packages where this error also occur.
ERROR in ./resources/assets/sass/app.scss
Module build failed: ModuleBuildError: Module build failed: TypeError: Cannot read property 'unprefixed' of undefined at clearDecl (/Users/prusso/Sites/qut-match-my-skills/node_modules/postcss-unprefix/lib/clearDecl.js:13:30)
I believe the error is in the version of 'autoprefixer' and/or 'postcss-unprefix'. Please check my 'devDependencies' below:
"devDependencies": {
"autoprefixer": "^8.6.3",
"babel-eslint": "^8.2.6",
"babel-polyfill": "^6.26.0",
"browser-sync": "^2.24.5",
"browser-sync-webpack-plugin": "2.0.1",
"cross-env": "^5.2.0",
"cssnano": "^3.10.0",
"eslint": "^4.0.0",
"eslint-plugin-vue": "^4.7.1",
"laravel-mix": "^2.1.11",
"postcss-unprefix": "^2.1.3",
"prettier-eslint": "^8.8.2",
"raw-loader": "^0.5.1"
},
"dependencies": {
"#nextindex/next-scss": "^1.2.1",
"animate-sass": "^0.8.2",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"es6-promise": "^4.2.4",
"family.scss": "^1.0.8",
"lodash.compact": "^3.0.1",
"lodash.get": "^4.4.2",
"normalize.css": "^8.0.0",
"portal-vue": "^1.3.0",
"smoothscroll-polyfill": "^0.4.3",
"uuid": "^3.3.2",
"vue": "^2.5.16",
"vue-parallaxy": "^1.1.1",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4",
"zeus-grid": "^8.2.0"
}
Other thing that I have noticed is that if I comment out the following line 'require('postcss-unprefix')' inside 'webpack.mix.js' and run 'npm run production' everything works fine.
mix.options({
postCss: [
// require('postcss-unprefix'),
require('autoprefixer')({
browsers: '>0.1%',
}),
require('cssnano')({
preset: [
'default',
{
discardComments: {
removeAll: true,
},
},
],
}),
],
});
Thanks for your help!!
try autoprefixer:10.2.5 latest version
Trt postcss-rtlcss package insted of postcss-rtl
Latest version (postcss#^8.0.0)
npm install postcss-rtlcss --save-dev
Latest legacy version (postcss#^7.0.0)
npm install postcss-rtlcss#legacy --save-dev

Cannot find module 'ngx-bootstrap'

I'm having an issue in my application with ngx-bootstrap whereby it now can't detect the module unless you specify the path
For example:
import { BsModalService, BsModalRef } from 'ngx-bootstrap';
produces "Cannot find module 'ngx-bootstrap'".
Removing the reference and checking quickfixes just replaces the reference with:
import { BsModalService, BsModalRef} from 'ngx-bootstrap/modal/public_api';
Obviously this isn't ideal as they should be available through ngx-bootstrap without specifying the folder, and i would have to go through dozens of components and change these references which shouldn't be necessary. Has anyone had this problem before?
I've already tried:
npm install
npm update in case there were updates in recent commits
Deleting node_modules folder and doing npm install again
Re-installing ngx-bootstrap on its own - npm install ngx-bootstrap --save
npm cache clean
I've even started afresh and cloned my app into another location, run npm install, and the same thing happens
This was working fine yesterday. I'm not sure what I'm missing.
More info:
Angular CLI: 9.0.2
Node: 12.16.1
OS: win32 x64
Angular: 9.0.1
package.json:
"private": true,
"dependencies": {
"#agm/core": "^1.1.0",
"#angular-devkit/build-angular": "^0.900.7",
"#angular/animations": "9.0.1",
"#angular/cdk": "^9.2.0",
"#angular/common": "9.0.1",
"#angular/compiler": "9.0.1",
"#angular/core": "9.0.1",
"#angular/forms": "9.0.1",
"#angular/platform-browser": "9.0.1",
"#angular/platform-browser-dynamic": "9.0.1",
"#angular/router": "9.0.1",
"#auth0/angular-jwt": "^4.0.0",
"#microsoft/signalr": "^3.1.3",
"#ng-select/ng-select": "^3.7.3",
"#ngx-progressbar/core": "^5.3.2",
"#ngx-pwa/local-storage": "^9.0.3",
"#types/date-fns": "^2.6.0",
"angular-9-datatable": "^0.1.1",
"angular-calendar": "^0.28.2",
"angular-gauge": "^3.1.2",
"angular-gridster2": "^9.0.1",
"angular-resize-event": "^1.2.1",
"bootstrap": "^4.4.1",
"chartjs-plugin-annotation": "^0.5.7",
"ckeditor4-angular": "^1.1.0",
"core-js": "^3.6.4",
"crypto-js": "^4.0.0",
"echarts": "^4.7.0",
"file-saver": "^2.0.2",
"html2canvas": "^1.0.0-rc.5",
"jspdf": "^1.5.3",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"ng-dynamic-component": "^6.1.0",
"ng2-dragula": "^2.1.1",
"ng4-charts": "^1.0.2",
"ngx-bootstrap": "^5.3.2",
"ngx-color": "^4.1.1",
"ngx-echarts": "^4.2.2",
"ngx-image-compress": "^8.0.4",
"ngx-image-cropper": "^3.1.5",
"ngx-infinite-scroll": "^8.0.1",
"ngx-material-timepicker": "^5.5.1",
"ngx-pagination": "^5.0.0",
"ngx-swiper-wrapper": "^9.0.1",
"ngx-toastr": "^12.0.1",
"pluralize": "^8.0.0",
"rxjs": "6.5.4",
"rxjs-compat": "6.5.4",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.10.0",
"valid-url": "^1.0.9",
"zone.js": "^0.10.3"
},
"devDependencies": {
"#angular/cli": "9.0.2",
"#angular/compiler-cli": "9.0.1",
"#angular/language-service": "9.0.1",
"#types/echarts": "^4.4.4",
"#types/file-saver": "^2.0.1",
"#types/googlemaps": "^3.39.2",
"#types/jasmine": "3.5.3",
"#types/jasminewd2": "2.0.8",
"#types/jspdf": "^1.3.3",
"#types/node": "^13.9.8",
"#types/pluralize": "0.0.29",
"#types/valid-url": "^1.0.3",
"codelyzer": "^5.2.2",
"ie-shim": "^0.1.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.1",
"karma-jasmine": "~3.1.1",
"karma-jasmine-html-reporter": "^1.5.3",
"node-sass": "^4.13.1",
"protractor": "~5.4.3",
"ts-node": "~8.6.2",
"tslint": "~6.0.0",
"typescript": "3.7.5",
"webpack-bundle-analyzer": "^3.6.1"
},
If anyone has any ideas let me know
Thanks!
Based on ngx-bootstrap documentation, angular 9 doesn't support this kind of import . If you want to use BsModalService , ButtonsModule and so on you have to import them as below :
// RECOMMENDED
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
instead of :
// NOT RECOMMENDED
import { BsModalService, BsModalRef , ButtonsModule } from 'ngx-bootstrap';
As per https://github.com/valor-software/ngx-bootstrap/issues/5753
Updated documentation: https://valor-software.com/ngx-bootstrap/#/modals
// RECOMMENDED
import { ModalModule } from 'ngx-bootstrap/modal';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { ModalModule } from 'ngx-bootstrap';
#NgModule({
imports: [ModalModule.forRoot(),...]
})
export class AppModule(){}
This is the ideal solution as it is the one that is documented by the maintainer of the repo.
I had the same problem today, trying to update from Angular 9.0.2 to Angular 9.1.0.
I guess it's because you have in your package.json: "ngx-bootstrap": "^5.3.2", so npm is taking the latest version available on ngx-bootrap tag: 5.6.0. (At least that's the version I have today)
I've solved just replacing the imports on my code, from 'ngx-bootstrap' to 'ngx-bootstrap/someBootstrapComponent'.
For example, my previous import was:
import { BsModalRef, BsModalService } from 'ngx-bootstrap';
And my new import looks like:
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
I know this is not an ideal solution, but meanwhile at least you can have your app compiling properly.
I hope it helps.
Best regards,
Jesús.
So it seems like it might be a problem with later versions of ngx-bootstrap. In my package.json, I replaced "ngx-bootstrap": "^5.3.2" with "ngx-bootstrap": "5.3.2", ran npm install and it built without any problems.
import { ModalModule } from 'ngx-bootstrap/modal';
This must be working .. simple solution
For some reason, the same package.json that's ran before, now doesn't works. The advice above work like a charm.
Solution: remove the ^.
"ngx-bootstrap": "^5.3.2" to "ngx-bootstrap": "5.3.2"
I am currently using Angular 9 with the latest version of ngx-bootstrap.
I believe the latest implementation is to import the BsDatepickerModule in the app.module.ts file like this
Import statement in app.module.ts code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
in app.module.ts imports:
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot()
]
Component Code:
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
#Component({ selector: 'app-', templateUrl: './register.component.html', styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {
bsConfig: Partial<BsDatepickerConfig>;
constructor() {}
ngOnInit() {
this.bsConfig = Object.assign({}, { containerClass: 'theme-blue' });
}
}
package.json
"#angular/core": "~9.1.7",
"bootstrap": "^4.5.0",
"ngx-bootstrap": "^5.6.1",
"#angular/cli": "~9.1.6"
From the official site:
Usage
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
// RECOMMENDED
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)
import { BsDatepickerModule } from 'ngx-bootstrap';
#NgModule({
imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot(),
...
]
})
export class AppModule(){}
https://valor-software.com/ngx-bootstrap/#/datepicker
techjunkieblog.com

WARN [launcher]: PhantomJS have not captured in 60000 ms, killing

I realize there are other posts regarding this issue but I haven't been able to find anything all day that helps solve my issue, I'm wondering if anyone would know a fix or be able to point me in the right direction based on my specific package versions.
I am running gulp to build my project, when it gets to the karma/karma-coverage.conf.js file it errors out with the warning I noted in the title -> PhantomJS have not captured in 60000 ms, killing..
I'm running NPM v 3.3.7, Node v 6.10.1
My package.json:
{
"engines": {
"node": ">=4.2.4",
"npm": ">=2.1.6"
},
"dependencies": {},
"devDependencies": {
"browser-sync": "1.9.0",
"date-format": "0.0.2",
"del": "1.1.1",
"dgeni": "^0.4.1",
"dgeni-packages": "^0.10.13",
"glob": "^6.0.4",
"gulp": "3.8.10",
"gulp-angular-filesort": "1.0.4",
"gulp-batch": "1.0.4",
"gulp-bump": "0.3.0",
"gulp-concat": "2.4.3",
"gulp-copy": "0.0.2",
"gulp-filelist": "0.1.0",
"gulp-filter": "2.0.0",
"gulp-header": "1.2.2",
"gulp-help": "1.3.1",
"gulp-if": "1.2.5",
"gulp-ignore": "1.2.1",
"gulp-inject": "1.1.1",
"gulp-load-plugins": "0.8.0",
"gulp-minify-css": "^0.4.4",
"gulp-minify-html": "0.1.8",
"gulp-ng-html2js": "0.1.8",
"gulp-rename": "1.2.0",
"gulp-replace": "0.5.2",
"gulp-ruby-sass": "0.7.1",
"gulp-sourcemaps": "1.3.0",
"gulp-strip-debug": "1.0.2",
"gulp-tap": "0.1.3",
"gulp-tslint": "4.3.3",
"gulp-typescript": "2.10.0",
"gulp-uglify": "^1.1.0",
"gulp-useref": "^1.1.2",
"gulp-util": "3.0.2",
"gulp-watch": "^4.1.0",
"gulp-zip": "^3.0.2",
"jshint-stylish": "1.0.0",
"karma": "0.12.25",
"karma-as-promised": "1.0.0",
"karma-chrome-launcher": "0.1.5",
"karma-coverage": "0.2.6",
"karma-firefox-launcher": "0.1.3",
"karma-ie-launcher": "^0.1.5",
"karma-jasmine": "0.2.3",
"karma-junit-reporter": "0.2.2",
"karma-ng-html2js-preprocessor": "0.1.2",
"karma-phantomjs-launcher": "^1.0.0",
"license-collector": "^0.1.1",
"lodash": "^3.7.0",
"main-bower-files": "2.1.0",
"merge-stream": "^1.0.0",
"phantomjs": "1.9.19",
"phantomjs-polyfill": "0.0.1",
"request": "2.53.0",
"require-dir": "0.1.0",
"run-sequence": "1.0.2",
"shelljs": "0.3.0",
"tslint": "3.5.0",
"typedoc": "0.3.12",
"typescript": "1.7.3",
"yargs": "1.3.3"
}
}
My karma-coverage.conf.js
/**
* Run Karma using this configuration file in order to have code coverage
*/
var baseConfig = require('./karma-debug.conf.js');
module.exports = function (config) {
baseConfig(config);
var path = require("path");
var JS_AND_CSS_REGEXP = /(.js|.css)$/i;
// Adds 'coverage' pre-processing on JS files
config.preprocessors['build/debug/components/**/*.js'] = ['coverage'];
// Adds a plugin dependency on karma-coverage
config.plugins.push('karma-coverage');
// Registers reporter
config.reporters.push('coverage');
// Browsers options : PhantomJS, Chrome ...
config.browsers = ['PhantomJS'];
// !!!! : Comment code below if you don't choose PhantomJS Browser : It adds the bind polyfill to phantomJS.
config.files.push({
pattern: 'node_modules/phantomjs-polyfill/bind-polyfill.js',
served: true,
included: true,
watched: false
});
config.autoWatch = false;
config.singleRun = true;
// Configure Reporter
config.coverageReporter = {
reporters: [{type: 'cobertura', dir: 'build/reports/coverage/'}, {type: 'html', dir: 'build/reports/coverage/'}]
}
// override development configuration!
config.browserNoActivityTimeout = 30000;
};
Any help is appreciated!
Please try adding the environment variable
PHANTOMJS_BIN
with value
C:\Program Files\nodejs\phantomjs.cmd
I fell in similar problem and it solved. the value might be different in your installation. (I had to restart my OS, win 10)

"babelHelpers.asyncToGenerator is not a function" on React-Native 0.16.0 and 0.17.0

I updated React-Native from 0.14.0 to 0.16.0 and from now, I have errors at runtime:
Here are the npm dependencies:
"dependencies": {
"async": "^1.5.0",
"immutable": "^3.7.6",
"react-native": "^0.16.0",
"react-native-contacts": "../../react-native-contacts",
"react-native-contacts-rx": "^1.0.1",
"react-native-gifted-messenger": "0.0.7",
"react-native-i18n": "0.0.6",
"react-redux": "^4.0.1",
"redux": "^3.0.5",
"rx": "^4.0.7"
},
"devDependencies": {
"babel-eslint": "^5.0.0-beta6",
"eslint": "^1.10.3",
"eslint-config-airbnb": "^2.1.1",
"eslint-plugin-react": "^3.11.3",
"events": "^1.1.0",
"flux": "^2.1.1",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"redux-devtools": "^3.0.0"
}
And my .babelrc file:
{
"retainLines": true,
"compact": true,
"comments": false,
}
Any suggestions?
The Questions was answered in an issue #Jean Lebrument submitted. Positing answer here for stumblers like myself...
https://github.com/facebook/react-native/issues/4844
The problem is most likely in your .babelrc file. If you experience this problem, compare your .babelrc file to react natives default one. Try removing the file or building off of default one, adding the features that you need.
Make sure to restart your packager, stop, and re-run your project.
I had this exact same problem you can check out what I did here - https://stackoverflow.com/a/53069785/2884655
But in short I just imported the babel-plugin-transform-async-to-generator module into my project and added it into my babelrc file

Resources