Error invoking n. Unable to parse accessor function?

Help Requests
1

I am just starting with development and one of my first tasks was to revive old Aurelia 1 apps (upgrade node version, dependencies and fix validation). I went through and slowly but steadily updated all the dependencies in package.json finally getting everything to work and fixed the validation to validate everything we needed. I developed it and tested on localhost without any problems and even got it working on our development (npm run-script build:dev) and everything works just like a charm. Last week I tried to deploy it to our production environment (npm run-script build:production) and it went without any error on building stage. But when I go to the website on production, one of the navbuttons don’t work (the only one with modal that requires some validation) and the error message gives me nothing:

"Error: Error invoking n. Check the inner error for details.

Inner Error:
Message: Unable to parse accessor function:
function (n){return C().f[39]++,C().s[214]++,n.targets}
Inner Error Stack:
n@http://localhost:8080/app-72b6068c.cdcfb96b9b0cfb9c5c8d.bundle.js:1:68942
(…)
construct@[native code]
(…)
@http://localhost:8080/vendors-319a6989.7513530da7bc308c9dd1.bundle.js:2:10068

promiseReactionJob@[native code]
End Inner Error Stack

My request here, is just a question how I can troubleshoot that to find the root of that error in production? What’s steps should I take to investigate if error is happening only on /dist files served from build for production. I believe I might be missing some crucial package between devDependencies and Dependencies which are used for production but I am not sure.

Here is the full list of my dependencies if that matters:

“dependencies”: {
“(at)azure/msal-browser”: “^2.33.0”,
“(at)fortawesome/fontawesome-free”: “^6.3.0”,
“(at)popperjs/core”: “^2.11.6”,
“(at)types/bootstrap”: “^5.2.6”,
“aurelia-animator-css”: “^1.0.4”,
“aurelia-bootstrapper”: “^2.4.0”,
“aurelia-fetch-client”: “^1.8.2”,
“aurelia-store”: “^2.0.1”,
“aurelia-validation”: “^2.0.0”,
“bootstrap”: “^5.2.3”,
“material-design-icons”: “^3.0.1”,
“popper.js”: “^1.16.1”,
“reflect-metadata”: “^0.1.13”,
“whatwg-fetch”: “^3.6.2”
},
“devDependencies”: {
“(at)types/jest”: “^29.4.0”,
“(at)types/node”: “^18.14.2”,
“(at)types/webpack”: “^5.28.0”,
“(at)typescript-eslint/eslint-plugin”: “^5.54.0”,
“(at)typescript-eslint/parser”: “^5.54.0”,
“app-settings-loader”: “^2.0.8”,
“aurelia-cli”: “^3.0.1”,
“aurelia-loader-nodejs”: “^1.1.0”,
“aurelia-pal-nodejs”: “^3.0.0-rc.1”,
“aurelia-testing”: “^1.1.0”,
“aurelia-webpack-plugin”: “^5.0.5”,
“autoprefixer”: “^10.4.13”,
“babel-eslint”: “^10.1.0”,
“clean-webpack-plugin”: “^4.0.0”,
“copy-webpack-plugin”: “^11.0.0”,
“css-loader”: “^6.7.3”,
“cssnano”: “^5.1.15”,
“duplicate-package-checker-webpack-plugin”: “^3.0.0”,
“eslint”: “>=8.35.0”,
“eslint-config-google”: “^0.14.0”,
“expose-loader”: “^4.0.0”,
“file-loader”: “^6.2.0”,
“gulp”: “^4.0.2”,
“gulp-eslint”: “^6.0.0”,
“html-loader”: “^4.2.0”,
“html-webpack-plugin”: “^5.5.0”,
“coverage-istanbul-loader”: “^3.0.0”,
“jest”: “^29.4.3”,
“jest-cli”: “^29.4.3”,
“jest-transform-stub”: “^2.0.0”,
“json-loader”: “^0.5.7”,
“mini-css-extract-plugin”: “^2.7.2”,
“minimatch”: “^7.3.0”,
“postcss”: “^8.4.21”,
“postcss-loader”: “^7.0.2”,
“promise-polyfill”: “^8.3.0”,
“sass”: “^1.58.3”,
“sass-loader”: “^13.2.0”,
“style-loader”: “^3.3.1”,
“tree-kill”: “^1.2.2”,
“ts-jest”: “^29.0.5”,
“ts-loader”: “^9.4.2”,
“typescript”: “^4.9.5”,
“url-loader”: “^4.1.1”,
“webpack”: “^5.75.0”,
“webpack-bundle-analyzer”: “^4.8.0”,
“webpack-cli”: “^5.0.1”,
“webpack-dev-server”: “^4.11.1”
},

*replace @ with (at) cause it won’t let me post because I want to mention to many users.

2

I’d check the build for production locally. Either by doing

au run --watch --env prod

or by building it for production with

au build --env prod

and then serving locally with go live or another way to see how it behaves on your machine.

1 Like
3

I tried your suggestion, for some reason the first command did not work so I tried to do some variations about second approach this is what I end up with:

npm run build:prod
and then from dist directory:
http-server

This helped me get the error locally thanks!

The log trace points always to the similar direction:

Inner Error:
Message: Unable to parse accessor function:
function (n){return C().f[39]++,C().s[214]++,n.targets}
Inner Error Stack:
I@http://localhost:8080/vendors-684599ca.da9db15d3f94cfd29d98.bundle.js:1:11163
@http://localhost:8080/vendors-684599ca.da9db15d3f94cfd29d98.bundle.js:1:10714
@http://localhost:8080/vendors-684599ca.da9db15d3f94cfd29d98.bundle.js:1:27080
n@http://localhost:8080/app-72b6068c.cdcfb96b9b0cfb9c5c8d.bundle.js:1:68942
construct@[native code]
@http://localhost:8080/vendors-319a6989.7513530da7bc308c9dd1.bundle.js:2:10068
@http://localhost:8080/vendors-46804203.234fff8dd7cde6ee2552.bundle.js:2:27605
@http://localhost:8080/vendors-46804203.234fff8dd7cde6ee2552.bundle.js:2:51483
G@http://localhost:8080/vendors-46804203.234fff8dd7cde6ee2552.bundle.js:2:29663
@http://localhost:8080/vendors-46804203.234fff8dd7cde6ee2552.bundle.js:2:32411
@http://localhost:8080/vendors-46804203.234fff8dd7cde6ee2552.bundle.js:2:51678
@http://localhost:8080/vendors-3ce50090.70142f7b07d68e51d7a0.bundle.js:1:51628
promiseReactionJob@[native code]
End Inner Error Stack

The first 4 lines of error stack track to :

**(self.webpackChunkself_application_ui = self.webpackChunkself_application_ui || []).push([[234], {**
    "aurelia-validation": function(t, e, n) {
        "use strict";
        n.r(e),
        n.d(e, {

and then the rest of the logs points (7 similar lines) to line :

**"use strict";** 
(self.webpackChunkself_application_ui = self.webpackChunkself_application_ui || []).push([[167], {

So I believe I have something wrong with my validations. Any suggestion what might go wrong here? My validations work totally fine on dev, yet on production they cause errors?

4

Thanks I’ve managed to get more details this way, it appears like there is something wrong with validation modele I use.

The first 4 error lines from trace lead to lines similar to this one:

**(self.webpackChunkself_application_ui = self.webpackChunkself_application_ui || []).push([[234],** {
    "aurelia-validation": function(t, e, n) {
        "use strict";

and the rest 7 lines of log trace always lead to the same:

/*! For license information please see vendors-319a6989.7513530da7bc308c9dd1.bundle.js.LICENSE.txt */
**"use strict";**
(self.webpackChunkself_application_ui = self.webpackChunkself_application_ui || []).push([[195], {
    7062: function(t, e, n) {

I still don’t understand hoverer what’s causing the issue on production that has not occur in development. I believe that “use strict” might not be happening on development but I am not sure where thet “use strict” is coming from.

5

Hi @Janek !

First things first, the code you have posted,

function (n){return C().f[39]++,C().s[214]++,n.targets}

are instrumented code from @jsdevtools/coverage-istanbul-loader to measure the code coverage during tests. The latest version of aurelia-validation (v2.0.0) already contains the fix. Maybe try to update the version? And that should fix this error.

However, you should not (or rather need not) really deploy the instrumented code to production. Probably, consider adding conditional loaders when you are bundling for test as opposed to bundling for production deployment.

Lastly, IMO, it does not make sense to instrument those property accessor lambdas for code coverage at all (because the function body is parsed for the property name, as opposed to invoking those). To avoid instrumenting the property accessors, you can do something like this:

.ensure(/* istanbul ignore next */ (n) => n.targets)
6

Hy @Sayan751

Just as a side note, I was already using Aurelia-validation in v2.0.0 ( I don’t know if it’s useful info).

I also went though my validation and added “/* istanbul ignore next */” to validation. After some time trying to get it working only using this I understood that it does not stop instanbul-coverage-loader from loading on those lines but only “exempt” them from validation lines at the end (I think so). So only adding the comments did not work but after change in webpack config it works like a charm.

To show for anyone in future I went though your advice and adjusted my webpack config from :

	{
		test: /\.ts/,
		exclude: /node_modules/,
		use: ["@jsdevtools/coverage-istanbul-loader", "ts-loader"],
	},

to

  {
      test: /\.ts/,
      exclude: /node_modules/,
      use: process.env.NODE_ENV === "development"
      ? ["@jsdevtools/coverage-istanbul-loader", "ts-loader"]
      : ["ts-loader"],
  }

(I am not sure that this is “properly” implemented but it works so if anyone better could show better implementation that would be great).

An my code started working, thanks!

@ormasoftchile Thanks for guidance how I can troubleshoot production that was valuable lesson! It helped me a lot.