chihab / dotenv-run

Seamlessly load environment variables. Supports cli, esbuild, rollup, vite, webpack, angular. ESM and Monorepos.
238 stars 17 forks source link

module parse filed error when use process object (Angular + Nx) #91

Open SeyedMostafaHosseinian opened 5 months ago

SeyedMostafaHosseinian commented 5 months ago

error:

Error: Module parse failed: parser.destructuringAssignmentPropertiesFor is not a function
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@angular-devkit/build-angular/node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
TypeError: parser.destructuringAssignmentPropertiesFor is not a function

package.json

{
  "name": "pumpcode",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "frontend:web": "yarn nx run frontend-web:serve",
    "cm": "cz",
    "deps:start": "docker compose -f ./tools/deps/docker-compose.yaml up -d",
    "deps:kill": "docker compose -f ./tools/deps/docker-compose.yaml kill",
    "deps:restart": "yarn deps:kill && yarn deps:start",
    "deps:stats": "docker compose -f ./tools/deps/docker-compose.yaml ps",
    "api:build": "yarn nx run backend-api:build --configuration=production",
    "api:run": "yarn api:build && node ./dist/apps/backend/api/main.js",
    "api:dev": "yarn nx run backend-api:serve:development --inspect=false ",
    "migration:gen": "yarn typeorm-ts-node-commonjs migration:generate  ./apps/backend/api/src/database/migrations/Migration -d ./apps/backend/api/src/database/connection-config.ts",
    "migration:create": "yarn typeorm-ts-node-commonjs migration:create  ./apps/backend/api/src/database/migrations/Seed",
    "migration:run": "yarn typeorm-ts-node-commonjs migration:run  -d ./apps/backend/api/src/database/connection-config.ts",
    "migration:rev": "yarn typeorm-ts-node-commonjs migration:revert  -d ./apps/backend/api/src/database/connection-config.ts",
    "angular-client:gen": "docker run --rm --net host -v ${PWD}:/local swaggerapi/swagger-codegen-cli-v3:3.0.40  generate -i /local/swagger-spec.json --lang typescript-angular  -o /local/libs/clients"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~15.2.0",
    "@angular/cdk": "^15.2.0",
    "@angular/common": "~15.2.0",
    "@angular/compiler": "~15.2.0",
    "@angular/core": "~15.2.0",
    "@angular/forms": "~15.2.0",
    "@angular/material": "^15.2.0",
    "@angular/platform-browser": "~15.2.0",
    "@angular/platform-browser-dynamic": "~15.2.0",
    "@angular/router": "~15.2.0",
    "@nestjs-modules/mailer": "^1.10.3",
    "@nestjs/cache-manager": "^2.2.0",
    "@nestjs/common": "^9.0.0",
    "@nestjs/config": "^3.1.1",
    "@nestjs/core": "^9.0.0",
    "@nestjs/platform-express": "^9.0.0",
    "@nestjs/swagger": "^7.2.0",
    "@nestjs/typeorm": "^10.0.1",
    "@nrwl/angular": "15.9.2",
    "@types/bcrypt": "^5.0.2",
    "@types/jsonwebtoken": "^9.0.5",
    "@types/nodemailer": "^6.4.14",
    "axios": "^1.0.0",
    "bcrypt": "^5.1.1",
    "cache-manager": "^5.3.2",
    "cache-manager-redis-store": "^3.0.1",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.0",
    "dotenv": "^16.3.1",
    "jsonwebtoken": "^9.0.2",
    "nest-access-control": "^3.1.0",
    "nestjs-minio-client": "^2.2.0",
    "nodemailer": "^6.9.8",
    "pg": "^8.11.3",
    "pug": "^3.0.2",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "typeorm": "^0.3.17",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.2.0",
    "@angular-devkit/core": "~15.2.0",
    "@angular-devkit/schematics": "~15.2.0",
    "@angular-eslint/eslint-plugin": "~15.0.0",
    "@angular-eslint/eslint-plugin-template": "~15.0.0",
    "@angular-eslint/template-parser": "~15.0.0",
    "@angular/cli": "~15.2.0",
    "@angular/compiler-cli": "~15.2.0",
    "@angular/language-service": "~15.2.0",
    "@commitlint/cli": "^18.4.3",
    "@commitlint/config-conventional": "^18.4.3",
    "@nestjs/schematics": "^9.0.0",
    "@nestjs/testing": "^9.0.0",
    "@ngx-env/builder": "^15.2.1",
    "@nrwl/cypress": "15.9.2",
    "@nrwl/eslint-plugin-nx": "15.9.2",
    "@nrwl/jest": "15.9.4",
    "@nrwl/js": "15.9.4",
    "@nrwl/linter": "15.9.2",
    "@nrwl/nest": "15.9.4",
    "@nrwl/node": "15.9.4",
    "@nrwl/web": "15.9.2",
    "@nrwl/webpack": "15.9.4",
    "@nrwl/workspace": "15.9.2",
    "@schematics/angular": "~15.2.0",
    "@types/jest": "^29.4.0",
    "@types/multer": "^1.4.11",
    "@types/node": "~18.7.1",
    "@typescript-eslint/eslint-plugin": "^5.36.1",
    "@typescript-eslint/parser": "^5.36.1",
    "autoprefixer": "^10.4.0",
    "commitizen": "^4.3.0",
    "cypress": "^12.2.0",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "husky": "^8.0.3",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.0.0",
    "nx": "15.9.2",
    "postcss": "^8.4.5",
    "prettier": "^2.6.2",
    "tailwindcss": "^3.0.2",
    "ts-jest": "^29.0.5",
    "ts-node": "10.9.1",
    "typescript": "~4.9.5"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  }
}

project.json:


{
  "name": "frontend-admin",
  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "prefix": "admin",
  "sourceRoot": "apps/frontend/admin/src",
  "tags": [],
  "targets": {
    "build": {
      "executor": "@ngx-env/builder:browser",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/frontend/admin",
        "index": "apps/frontend/admin/src/index.html",
        "main": "apps/frontend/admin/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/frontend/admin/tsconfig.app.json",
        "assets": [
          "apps/frontend/admin/src/favicon.ico",
          "apps/frontend/admin/src/assets"
        ],
        "styles": [
          "@angular/material/prebuilt-themes/deeppurple-amber.css",
          "apps/frontend/admin/src/styles.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@ngx-env/builder:dev-server",
      "options": {
        "port": 4400
      },
      "configurations": {
        "production": {
          "browserTarget": "frontend-admin:build:production"
        },
        "development": {
          "browserTarget": "frontend-admin:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "executor": "@ngx-env/builder:extract-i18n",
      "options": {
        "browserTarget": "frontend-admin:build"
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": [
          "apps/frontend/admin/**/*.ts",
          "apps/frontend/admin/**/*.html"
        ]
      }
    },
    "test": {
      "executor": "@ngx-env/builder:karma",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/frontend/admin/jest.config.ts",
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    },
    "serve-static": {
      "executor": "@nrwl/web:file-server",
      "options": {
        "buildTarget": "frontend-admin:build",
        "port": 4400
      }
    }
  }
}
chihab commented 5 months ago

It would help if you can reproduce the issue in a newly created nx project

EDIT: I was able to reproduce it, I am looking into it. It only happens on v15

SeyedMostafaHosseinian commented 5 months ago

hello chihab. I have been stuck with this error for a long time. After a lot of research, I came up with a clue. According to this link. This error occurs when using customized configuration, and if the webpack version does not match in bundlers.

i used from follow commands to check webpack versions:

npm ls webpack

and result:


├─┬ @angular-devkit/build-angular@15.2.10
│ ├─┬ @angular-devkit/build-webpack@0.1502.10
│ │ └── webpack@5.76.1 deduped    <======================================
│ ├─┬ @ngtools/webpack@15.2.10
│ │ └── webpack@5.76.1 deduped
│ ├─┬ babel-loader@9.1.2
│ │ └── webpack@5.76.1 deduped
│ ├─┬ copy-webpack-plugin@11.0.0
│ │ └── webpack@5.76.1 deduped
│ ├─┬ css-loader@6.7.3
│ │ └── webpack@5.76.1 deduped
│ ├─┬ less-loader@11.1.0
│ │ └── webpack@5.76.1 deduped
│ ├─┬ mini-css-extract-plugin@2.7.2
│ │ └── webpack@5.76.1 deduped
│ ├─┬ postcss-loader@7.0.2
│ │ └── webpack@5.76.1 deduped
│ ├─┬ sass-loader@13.2.0
│ │ └── webpack@5.76.1 deduped
│ ├─┬ source-map-loader@4.0.1
│ │ └── webpack@5.76.1 deduped
│ ├─┬ webpack-dev-middleware@6.0.1
│ │ └── webpack@5.76.1 deduped
│ ├─┬ webpack-dev-server@4.11.1
│ │ ├─┬ webpack-dev-middleware@5.3.3
│ │ │ └── webpack@5.76.1 deduped
│ │ └── webpack@5.76.1 deduped
│ ├─┬ webpack-subresource-integrity@5.1.0
│ │ └── webpack@5.76.1 deduped
│ └─┬ webpack@5.76.1
│   └─┬ terser-webpack-plugin@5.3.9
│     └── webpack@5.76.1 deduped
├─┬ @ngx-env/builder@17.2.3
│ └─┬ @dotenv-run/webpack@1.3.4
│   └── webpack@5.89.0 deduped         <=======================================
├─┬ @nrwl/angular@15.9.2
│ ├─┬ @nrwl/webpack@15.9.2
│ │ └── webpack@5.89.0 deduped
│ └── webpack@5.89.0
└─┬ @nrwl/webpack@15.9.4
  ├─┬ babel-loader@9.1.3
  │ └── webpack@5.89.0 deduped
  ├─┬ copy-webpack-plugin@10.2.4
  │ └── webpack@5.89.0 deduped
  ├─┬ css-loader@6.8.1
  │ └── webpack@5.89.0 deduped
  ├─┬ css-minimizer-webpack-plugin@3.4.1
  │ └── webpack@5.89.0 deduped
  ├─┬ file-loader@6.2.0
  │ └── webpack@5.89.0 deduped
  ├─┬ fork-ts-checker-webpack-plugin@7.2.13
  │ └── webpack@5.89.0 deduped
  ├─┬ less-loader@11.1.0
  │ └── webpack@5.89.0 deduped
  ├─┬ mini-css-extract-plugin@2.4.7
  │ └── webpack@5.89.0 deduped
  ├─┬ postcss-loader@6.2.1
  │ └── webpack@5.89.0 deduped
  ├─┬ sass-loader@12.6.0
  │ └── webpack@5.89.0 deduped
  ├─┬ source-map-loader@3.0.2
  │ └── webpack@5.89.0 deduped
  ├─┬ style-loader@3.3.3
  │ └── webpack@5.89.0 deduped
  ├─┬ stylus-loader@7.1.3
  │ └── webpack@5.89.0 deduped
  ├─┬ terser-webpack-plugin@5.3.9
  │ └── webpack@5.89.0 deduped
  ├─┬ ts-loader@9.5.1
  │ └── webpack@5.89.0 deduped
  ├─┬ webpack-dev-server@4.15.1
  │ ├─┬ webpack-dev-middleware@5.3.3
  │ │ └── webpack@5.89.0 deduped
  │ └── webpack@5.89.0 deduped
  ├─┬ webpack-subresource-integrity@5.1.0
  │ └── webpack@5.89.0 deduped
  └── webpack@5.89.0 deduped

As you can see, their webpack versions are different. I started to install webpack@5.76.1 diretly into project which I had not installed as a main package. After installation, the webpack version for ngx-env/builder@ also changed to 5.76.1 and when I ran the project It was working correctly. But do you think this is the right way to solve the problem? Is there a better way to sync the webpack version?

It should be mentioned that I installed different versions of your package and that was the problem And that I checked this in my main project for now