Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got undefined Use --force to continue

Question

I have a big problem. We use angular.js application and maven to build our application.Previosly everyhing worked when we build our application with bower.json.

And from yesterday we got this error

Warning: /builds/t2i/xecm/xecm-webapp/src/main/webapp/services/document-service.js: Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got undefined Use --force to continue. Property left of ForInStatement expected node to be of a type ["VariableDeclaration","LVal"] but instead got undefined Use --force to continue.

when we build our application.

I searched on google for this issue and I found out that it is somehow related to the version of babel. But I don't get it how it worked previosly and now it does not work.

I checked and I am 100% sure that we did not changed ANY dependency, not just for babel but and also for other dependencies.

In the file document-service.js where the problem occurs, we did not maked any changes also. The last change there was 2 months ago and in this 2 months everything worked and the build was passing.

What could be the issue ? I never experienced some strange issue like this and I really don't know what should I do,what should I check to find where is the problem and how can I solve this...

This is how my bower.json looks like

{
    "name": "${project.artifactId}",
    "version": "{project.version}",
    "homepage": "https://example.com/",
    "appPath": "webapp",
    "main": ["./${project.artifactId}.js"],
    "private": true,
    "dependencies": {
        "json3": "~3.2.6",
        "angular-resource": "1.6.4",
        "angular-cookies": "1.6.4",
        "angular-route": "1.6.4",
        "angular-animate": "1.6.4",
        "angular-sanitize": "1.6.4",
        "angular-touch": "1.6.4",
        "angular-gestures": "0.3.1",
        "angular-spinner": "1.0.1",
        "angular-css-injector": "1.4.0",
        "angular-truncate": "*",
        "angular-dynamic-locale": "~0.1.32",
        "angular-once": "~0.1.8",
        "angular-capitalize-filter": "~3.0.0",
        "angular-ui-router": "1.0.5",
        "xcomponent-widgets": "${project.build.directory}/${bower.components.dir}/xcomponent-widgets",
        "angular": "1.6.4",
        "ng-img-crop": "0.3.2",
        "angular-bootstrap-switch": "0.5.2",
        "angular-toastr": "2.1.1",
        "angular-moment": "1.0.1",
        "moment-timezone": "0.5.13",
        "moment": "2.15.2",  
        "ng-focus-if": "1.0.5",
        "ng-file-upload": "12.2.3",
        "ng-device-detector": "4.0.3",
        "textAngular":"1.5.16",        
        "angular-base64":"2.0.4",
        "jspdf":"1.3.2",
        "angular-clipboard":"1.5.0",
        "ngclipboard":"1.1.1",
        "angular-swx-session-storage":"1.0.2",
        "angular-cache":"4.6.0",
        "angular-highlightjs":"0.4.0",
        "angularjs-slider": "6.4.3",
        "angular-ui-select": "0.19.8",
        "angular-bootstrap":"2.5.0"
    },
    "overrides": {
        "bootstrap": {
            "main": [
                "less/bootstrap.less",
                "dist/css/bootstrap.css",
                "dist/js/bootstrap.js"
            ]
        }
    },
    "devDependencies": {
        "angular-mocks": "1.6.4",
        "angular-scenario": "1.6.4",
        "bootstrap": "~3.1.1"
    },
    "resolutions": {
        "angular": "1.6.4",
        "jquery": ">=1.9.0",
        "bootstrap": "~3.1.1",
        "moment": "2.15.2",
        "ng-file-upload": "10.1.5"
    }

}

We also use grunt and this is how the babel configurations looks like inside gruntfile-dev.js

  babel: {
            options: {
                sourceMap: true,
                presets: ['@babel/preset-env'],
                sourceType: 'module'
            },
            dev: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.sources %>',
                    dest: '<%= yeoman.dev %>',
                    src: [
                        '**/*.js'
                    ]
                }]
            }
        },

Answer 1

Check your code on "for" loops which have "var" variable initialization and replace it with "let". In my case it resolved the issue.

Answer 2

After spending a day combing through possible files that were triggering this error message, it looks like what was actually causing this was a CR-LF at the end of on of our component JS files. However, since they're invisible in some IDEs we had to use process of elimination to narrow it down. Just something to keep in mind dear reader.

Answer 3

the issue has been resolved by adding let instead of var in for loop. but why is the issue happening?

Answer 4

In my case, the issue was that nested loops use the same variable names.

For example,

for (var i = 0; i < maxLenght; i++) {
  for (var i = 0; i < maxCount; i++) {
  }
}

Changing var to let would fix the issue but the better fix is changing nested variable's name.

Answer 5

I saw this same error on my React App... So, not Angular granted, but in case anyone else comes up against this (or future me)...

For me, the issue was an out of date caniuse-lite. I was getting this in the console output further up when I ran npm run build;

Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest Why you should do it regularly: https://github.com/browserslist/update-db#readme.

Running the npx update-browserslist-db@latest command as suggested fixed my issue.

It installed the following package [email protected], and updated from 1.0.30001516 to 1.0.30001576;

npx update-browserslist-db@latest                                                                                                                                                           in pwsh at 11:10:51 
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y
Latest version:     1.0.30001576
Installed version:  1.0.30001516
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ npm install caniuse-lite
Cleaning package.json dependencies from caniuse-lite
$ npm uninstall caniuse-lite
caniuse-lite has been successfully updated