Nx: Parsing failed after yarn update to latest

[sagarpatel8384]

Expected Behavior

The application should properly compile, build, and serve.

Current Behavior

Application is unable to compile (see below for logs).

Failure Information (for bugs)

The application was building properly on version 8.1.2. I required an update to latest to fix an es5/differential loading issue. I ran yarn update as per the documentation and my application no longer compiles.

Steps to Reproduce

Please provide detailed steps for reproducing the issue.

1. yarn update (from version 8.1.2 -> latest)
2. yarn start

Failure Logs

Receiving the following message on compilation (yarn start):

ERROR in ./index.tsx 10:16
Module parse failed: Unexpected token (10:16)
File was processed with these loaders:
 * ../../../node_modules/@nrwl/web/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import { Provider } from 'react-redux';
| import App from './App';
> ReactDOM.render(<Provider store={store}>
|     <ConnectedRouter history={history}>
|       <App />
ℹ ｢wdm｣: Failed to compile.
No type errors found
Version: typescript 3.4.5

Other

Here are my tsconfig files (first is for global and second is for my specific application).

{
  "compileOnSave": false,
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "module": "esnext",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "rootDir": "."
  },
  "exclude": ["node_modules", "tmp"]
}

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "jsx": "react",
    "allowJs": true,
    "types": ["node", "jest"]
  },
  "paths": {
    "@components/*": ["src/components/*"],
    "@environment/*": ["src/environment/*"],
    "@redux/*": ["src/redux/*"]
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

[jaysoo]

@sagarpatel8384 Can you also share the workspace.json entry for the app?

[jaysoo]

@sagarpatel8384 Hey, sorry I meant the workspace configuration used by the CLI. It could be angular.json or workspace.json.

[sagarpatel8384]

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "",
  "projects": {
    "test-app": {
      "root": "apps/test-app/",
      "sourceRoot": "apps/test-app/src",
      "projectType": "application",
      "prefix": "aui",
      "schematics": {
        "@nrwl/schematics:component": {
          "style": "scss"
        }
      },
      "architect": {
        "build": {
          "builder": "@nrwl/web:build",
          "options": {
            "webpackConfig": "apps/test-app/webpack.config.js",
            "outputPath": "dist/apps/test-app",
            "index": "apps/test-app/src/index.html",
            "main": "apps/test-app/src/index.tsx",
            "polyfills": "apps/test-app/src/polyfills.ts",
            "tsConfig": "apps/test-app/tsconfig.app.json",
            "assets": [
              "apps/test-app/src/favicon.ico",
              {
                "glob": "**/*",
                "input": "../../../libs/shared-assets/src/lib",
                "output": "./assets"
              }
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "libs/shared-styles/src/lib"
              ]
            },
            "styles": [
              "apps/test-app/src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "apps/test-app/src/environments/environment.ts",
                  "with": "apps/test-app/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@nrwl/web:dev-server",
          "options": {
            "buildTarget": "test-app:build",
            "proxyConfig": "apps/test-app/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "buildTarget": "test-app:build:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "apps/test-app/tsconfig.app.json",
              "apps/test-app/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!apps/test-app/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "apps/test-app/jest.config.js",
            "tsConfig": "apps/test-app/tsconfig.spec.json"
          }
        }
      }
    },
    "test-app-e2e": {
      "root": "apps/test-app-e2e",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@nrwl/cypress:cypress",
          "options": {
            "cypressConfig": "apps/test-app-e2e/cypress.json",
            "tsConfig": "apps/test-app-e2e/tsconfig.e2e.json",
            "devServerTarget": "test-app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "test-app:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "apps/test-app-e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**",
              "!apps/test-app-e2e/**"
            ]
          }
        }
      }
    },
    "shared-assets": {
      "root": "libs/shared-assets",
      "sourceRoot": "libs/shared-assets/src",
      "projectType": "library",
      "prefix": "aui",
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/shared-assets/tsconfig.lib.json",
              "libs/shared-assets/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/shared-assets/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/shared-assets/jest.config.js",
            "tsConfig": "libs/shared-assets/tsconfig.spec.json"
          }
        }
      },
      "schematics": {
        "@nrwl/schematics:component": {
          "styleext": "scss"
        }
      }
    },
    "developer-portal": {
      "root": "libs/developer-portal",
      "sourceRoot": "libs/developer-portal/src",
      "projectType": "library",
      "prefix": "aui",
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/developer-portal/tsconfig.lib.json",
              "libs/developer-portal/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/developer-portal/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/developer-portal/jest.config.js",
            "tsConfig": "libs/developer-portal/tsconfig.spec.json"
          }
        }
      },
      "schematics": {
        "@nrwl/schematics:component": {
          "styleext": "scss"
        }
      }
    },
    "shared-styles": {
      "root": "libs/shared-styles",
      "sourceRoot": "libs/shared-styles/src",
      "projectType": "library",
      "prefix": "aui",
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/shared-styles/tsconfig.lib.json",
              "libs/shared-styles/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/shared-styles/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/shared-styles/jest.config.js",
            "tsConfig": "libs/shared-styles/tsconfig.spec.json"
          }
        }
      },
      "schematics": {
        "@nrwl/schematics:component": {
          "styleext": "scss"
        }
      }
    },
    "shared-react-ui": {
      "root": "libs/shared-react-ui",
      "sourceRoot": "libs/shared-react-ui/src",
      "projectType": "library",
      "prefix": "aui",
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/shared-react-ui/tsconfig.lib.json",
              "libs/shared-react-ui/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/shared-react-ui/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/shared-react-ui/jest.config.js",
            "tsConfig": "libs/shared-react-ui/tsconfig.spec.json"
          }
        }
      },
      "schematics": {
        "@nrwl/schematics:component": {
          "styleext": "scss"
        }
      }
    },
    "shared-react-state": {
      "root": "libs/shared-react-state",
      "sourceRoot": "libs/shared-react-state/src",
      "projectType": "library",
      "prefix": "aui",
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/shared-react-state/tsconfig.lib.json",
              "libs/shared-react-state/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/shared-react-state/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/shared-react-state/jest.config.js",
            "tsConfig": "libs/shared-react-state/tsconfig.spec.json"
          }
        }
      },
      "schematics": {
        "@nrwl/schematics:component": {
          "styleext": "scss"
        }
      }
    },
    "shared-utils": {
      "root": "libs/shared-utils",
      "sourceRoot": "libs/shared-utils/src",
      "projectType": "library",
      "schematics": {},
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/shared-utils/tsconfig.lib.json",
              "libs/shared-utils/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/shared-utils/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/shared-utils/jest.config.js",
            "tsConfig": "libs/shared-utils/tsconfig.spec.json"
          }
        }
      }
    },
    "compute": {
      "root": "libs/compute",
      "sourceRoot": "libs/compute/src",
      "projectType": "library",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "libs/compute/tsconfig.lib.json",
            "project": "libs/compute/ng-package.json"
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/compute/tsconfig.lib.json",
              "libs/compute/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/compute/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/compute/jest.config.js",
            "tsConfig": "libs/compute/tsconfig.spec.json"
          }
        }
      }
    },
    "studio": {
      "root": "libs/studio",
      "sourceRoot": "libs/studio/src",
      "projectType": "library",
      "schematics": {},
      "architect": {
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "libs/studio/tsconfig.lib.json",
              "libs/studio/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**",
              "!libs/studio/**"
            ]
          }
        },
        "test": {
          "builder": "@nrwl/jest:jest",
          "options": {
            "jestConfig": "libs/studio/jest.config.js",
            "tsConfig": "libs/studio/tsconfig.spec.json"
          }
        }
      }
    }
  },
  "cli": {
    "warnings": {
      "typescriptMismatch": false,
      "versionMismatch": false
    },
    "defaultCollection": "@nrwl/angular"
  },
  "schematics": {},
  "defaultProject": "test-app"
}

[jaysoo]

Can you update your test-app's build architect by adding the webpackConfig line?

      "architect": {
        "build": {
          "builder": "@nrwl/web:build",
          "options": {
            "outputPath": "dist/apps/test-app",
            "index": "apps/test-app/src/index.html",
            "main": "apps/test-app/src/index.tsx",
            "polyfills": "apps/test-app/src/polyfills.ts",
            "tsConfig": "apps/test-app/tsconfig.app.json",
            "webpackConfig": "@nrwl/react/plugins/babel"
          },
          ...
      }

[jaysoo]

Sorry, I meant replacing the webpackConfig entry with @nrwl/react/plugins/babel.

[sagarpatel8384]

works, great thank you! I was using a custom webpack config for custom path alias at the app level but not a big deal.

[jaysoo]

@sagarpatel8384 No problem! You can still use your own custom webpack if you want, just make sure to import the function from @nrwl/react/plugins/babel and call that in your own custom config function first.