I have updated a lot of dependencies of my project, it's based on a theme that recently released a new version and I updated my project with this new version.
The problem, is that I'm having many issues after the updates (as I expected), but after fixing all compiler issues I find myself with this error:
Error:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nodeName' of null TypeError: Cannot read property 'nodeName' of null at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports ( http://localhost:4200/0.chunk.js:6326:8 ), :159:258)
My package.json:
{
"name": "projectName",
"version": "1.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"build:dev": "./node_modules/.bin/ng build",
"build:prod": "./node_modules/.bin/ng build --prod --aot=false",
"build:aot": "./node_modules/.bin/ng build --prod --aot",
"build:aot2": "node --max_old_space_size=4096 ./node_modules/.bin/ng build --prod --aot",
"build": "npm run build:dev",
"clean:dist": "npm run rimraf -- dist",
"clean:install": "npm set progress=false && npm install",
"clean:start": "npm start",
"clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
"e2e:live": "npm run e2e -- --elementExplorer",
"e2e": "npm run protractor",
"lint": "npm run tslint \"src/**/*.ts\"",
"postversion": "git push && git push --tags",
"prebuild:dev": "npm run clean:dist",
"prebuild:prod": "npm run clean:dist",
"preclean:install": "npm run clean",
"preclean:start": "npm run clean",
"preversion": "npm test",
"protractor": "protractor",
"rimraf": "rimraf",
"server:dev": "./node_modules/.bin/ng serve",
"server": "npm run server:dev",
"start": "npm run server:dev",
"test": "./node_modules/.bin/ng test",
"tslint": "tslint",
"typedoc": "typedoc",
"version": "npm run build",
"ng": "ng",
"pree2e": "webdriver-manager update --standalone false --gecko false"
},
"private": true,
"dependencies": {
"@angular-redux/store": "^6.4.5",
"@angular/animations": "^4.2.2",
"@angular/cli": "^1.1.1",
"@angular/common": "^4.2.2",
"@angular/compiler": "^4.2.2",
"@angular/compiler-cli": "^4.2.2",
"@angular/core": "^4.2.2",
"@angular/forms": "^4.2.2",
"@angular/http": "^4.2.2",
"@angular/platform-browser": "^4.2.2",
"@angular/platform-browser-dynamic": "^4.2.2",
"@angular/router": "^4.2.2",
"X-editable": "github:vitalets/x-editable",
"angular-2-dropdown-multiselect": "^1.3.2",
"bootstrap": "3.3.7",
"bootstrap-colorpicker": "2.5.1",
"bootstrap-duallistbox": "3.0.6",
"bootstrap-markdown": "2.10.0",
"bootstrap-progressbar": "0.9.0",
"bootstrap-slider": "^9.8.0",
"bootstrap-tagsinput": "0.7.1",
"bootstrap-timepicker": "0.5.2",
"chart.js": "2.6.0",
"classlist.js": "^1.1.20150312",
"clockpicker": "0.0.7",
"clone": "2.1.1",
"core-js": "2.4.1",
"debounce": "^1.0.2",
"dropzone": "^5.1.0",
"dygraphs": "2.0.0",
"fuelux": "^3.16.0",
"he": "1.1.1",
"highcharts": "5.0.12",
"intl": "^1.2.5",
"ion-rangeslider": "2.1.7",
"jquery": "^3.2.1",
"jquery-color": "1.0.0",
"jquery-jcrop": "0.9.13",
"jquery-knob": "1.2.11",
"jquery-ui-npm": "1.12.0",
"jquery-validation": "1.16.0",
"jquery.maskedinput": "1.4.1",
"markdown": "0.5.0",
"morris.js": "0.5.0",
"ng2-datetime": "https://github.com/elt/ng2-datetime/tarball/dynamic_template",
"ng2-logger": "^1.0.3",
"ngx-bootstrap": "^1.7.1",
"ngx-popover": "0.0.16",
"nouislider": "10.0.0",
"raphael": "2.2.7",
"redux": "^3.6.0",
"rxjs": "^5.4.0",
"scriptjs": "2.5.8",
"select2": "4.0.3",
"smartadmin-plugins": "^1.0.20",
"summernote": "^0.8.4",
"to-markdown": "3.0.4",
"ts-helpers": "1.1.2",
"web-animations-js": "^2.2.5",
"webpack": "^2.6.1",
"zone.js": "0.8.12"
},
"devDependencies": {
"@types/jasmine": "2.5.52",
"@types/jquery": "2.0.46",
"@types/node": "7.0.31",
"codelyzer": "3.0.1",
"css-loader": "0.28.4",
"exports-loader": "0.6.4",
"expose-loader": "0.7.3",
"file-loader": "0.11.2",
"imports-loader": "0.7.1",
"jasmine-core": "2.6.3",
"jasmine-spec-reporter": "4.1.0",
"karma": "1.7.0",
"karma-chrome-launcher": "2.1.1",
"karma-cli": "1.0.1",
"karma-coverage-istanbul-reporter": "1.3.0",
"karma-jasmine": "1.1.0",
"karma-jasmine-html-reporter": "0.2.2",
"karma-remap-istanbul": "0.6.0",
"protractor": "5.1.2",
"raw-loader": "0.5.1",
"script-loader": "^0.7.0",
"style-loader": "0.18.2",
"ts-node": "3.0.6",
"tslint": "5.4.3",
"typescript": "2.3.4",
"url-loader": "0.5.9"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
In a desperate attempt, I reinstalled: script-loader
dependency, just to be sure.
I am pretty clueless, any tip or advice or even solution would be much appreciated!
Thanks in advice!
Update 1:
I have posted a more clear and updated image of the error that I find in console.
When I click on those errors (See code line 6329), I get here:
If anybody has a clue of what is causing the error or even know a good way to debug it and find the issue it would be of great help!
I have found the issue: DataTables
.
I'm using the DataTables library, and is having an issue with the initialization of the table.
I could not fix the DataTables issue yet, but this is the source of the error.
So, in order to make this question useful and don't delete it I'll explain how I got to that conclusion:
TypeError: Cannot read property 'nodeName' of null
is typical in jQuery, so, start searching in your main jQuery libraries is a good option. node_modules
and typing npm install
in console can be of help (even if drastic, but helped me).I hope this may help someone that's stuck with this issue for a while.
Breaking my App to find the issue I have found that many libraries throw this error, all of them were jQuery based libraries.
Good luck!
Make sure your table has the same element count in thead, tbody, tfoot. If you have 10 headers, 10 body columns, but 9 footers, it will not find the footer node and you will see the error. Common mistake would be adding additional column, but forgetting adding the footer (if any).
I had this issue when working with an hybrid app (AngularJS and Angular) in a migration process.
In my downgrade file, a component was declared twice :
angular.module('myApp')
...
.directive(
'myDowngradedComponent',
downgradeComponent({ component: myDowngradedComponent }) as angular.IDirectiveFactory
)
...
.directive(
'myDowngradedComponent',
downgradeComponent({ component: myDowngradedComponent }) as angular.IDirectiveFactory
)
...
The number of tfoot
columns doesn't match the number of thead
columns. That is likely the issue.
Thanks
Removing responsive: true
(a property that I'm no longer using) from DataTable({...})
fixed it.
package.json
:
...
"datatables.net-bs4": "^1.10.20",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.1",
...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.