Angular - TypeError: Cannot read property 'nodeName' of null

Question

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!

Answer 1

Removing responsive: true (a property that I'm no longer using) from DataTable({...}) fixed it.

---

Extra details:

package.json:

...
"datatables.net-bs4": "^1.10.20",
"datatables.net-responsive-bs4": "^2.2.3",
"datatables.net-rowgroup-bs4": "^1.1.1",
...

Answer 2

The number of tfoot columns doesn't match the number of thead columns. That is likely the issue.

Ref: https://datatables.net/forums/discussion/50611/cannot-read-property-nodename-of-null-when-i-am-adding-row-in-tfoot

Thanks

Answer 3

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
    )
    ...

Answer 4

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).

Answer 5

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:

1. TypeError: Cannot read property 'nodeName' of null is typical in jQuery, so, start searching in your main jQuery libraries is a good option.
2. After navigating and seing that it was happening only in that view, I started analyzing 1 by 1 all the components of that view.
3. Reinstall your npm packages. If you did a huge upgrade of your project, removing node_modules and typing npm install in console can be of help (even if drastic, but helped me).
4. Use Chrome's debugger.
5. Use console logs.
6. If you are using a theme, and this theme is working properly. Try to break it adding your stuff one at a time until it breaks. There has to be a reason for your App breaking but your App's theme not breaking.
7. Compare projects (the theme's project and yours) in order to point out potential code issues.

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!