Assets are not served when running the target serve command

[nemonemi]

Current Behavior

I have just updated to v13.9.2, and started seeing this problem.

The application starts saying there are no problems, however, no assets are being copied or served, and thus, when the application starts, it reports that it cannot load those assets like translation files, mockServiceWorker.js and similar.

Expected Behavior

This is a regression, as it has worked before without any code change.

The application should build and run without errors and the assets should be served properly.

My project.json file:

{
  "root": "apps/bd/certificates",
  "sourceRoot": "apps/bd/certificates/src",
  "projectType": "certificates",
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "development",
      "options": {
        "baseHref": "/bd/certificates/management/",
        "outputPath": "dist/apps/bd/certificates",
        "index": "apps/bd/certificates/src/index.html",
        "main": "apps/bd/certificates/src/main.tsx",
        "polyfills": "apps/bd/certificates/src/polyfills.ts",
        "tsConfig": "apps/bd/certificates/tsconfig.app.json",
        "styles": [],
        "scripts": [],
        "webpackConfig": "@nrwl/react/plugins/webpack"
      },
      "configurations": {
        "development": {
          "optimization": false,
          "outputHashing": "all",
          "sourceMap": true,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": false,
          "vendorChunk": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ],
          "assets": [
            "apps/bd/certificates/src/favicon.ico",
            "apps/bd/certificates/src/assets",
            "apps/bd/certificates/src/mockServiceWorker.js",
            {
              "glob": "**/*",
              "input": "libs/ui/src/lib/layout-and-navigation/main-navigation-bar/shared-assets/",
              "output": "./assets"
            }
          ]
        },
        "production": {
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "extractLicenses": false,
          "vendorChunk": false,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            }
          ],
          "assets": [
            "apps/bd/certificates/src/favicon.ico",
            "apps/bd/certificates/src/assets",
            {
              "glob": "**/*",
              "input": "libs/ui/src/lib/layout-and-navigation/main-navigation-bar/shared-assets/",
              "output": "./assets"
            }
          ]
        }
      }
    },
    "serve": {
      "executor": "@nrwl/web:dev-server",
      "options": {
        "buildTarget": "bd-certificates:build:development",
        "port": 4203,
        "hmr": true
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "options": {
        "lintFilePatterns": ["apps/bd/certificates/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["coverage/apps/bd/certificates"],
      "options": {
        "jestConfig": "apps/bd/certificates/jest.config.js",
        "passWithNoTests": true
      }
    },
    "generateClient": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": ["yarn graphql-codegen --config codegen.yml"],
        "cwd": "apps/bd/certificates",
        "parallel": false
      }
    },
    "generateTranslations": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": ["yarn i18next --config \"./i18next-parser.config.js\""],
        "cwd": "apps/bd/certificates",
        "parallel": false
      }
    }
  },
  "tags": []
}

Also, when running target build, I can see the files that are being copied, but there's a Warning.
Even when I run it with the set NODE_EVN=development && nx build bd-certificates --verbose command.

λ nx build bd-certificates --verbose

 >  NX   Running target build for project bd-certificates and 1 task(s) it depends on

 ————————————————————————————————————————————————————————————————————————————————————————————————————————————

> nx run ui:build

Bundling ui...
  index.esm.js 278.658 KB
  index.umd.js 293.871 KB
⚡ Done in 75.39s

> nx run bd-certificates:build:development --verbose

assets by path assets/ 47 KiB
  assets by path assets/locales/ 16.9 KiB 12 assets
  assets by path assets/mocks/ 29.3 KiB 4 assets
  assets by path assets/config/ 920 bytes
    asset assets/config/env.js 669 bytes [emitted] [from: src/assets/config/env.js] [copied]
    asset assets/config/env.d.ts 251 bytes [emitted] [from: src/assets/config/env.d.ts] [copied]
  asset assets/.gitkeep 0 bytes [emitted] [from: src/assets/.gitkeep] [copied]
assets by path *.js 6.03 MiB
  assets by status 6.01 MiB [big]
    asset main.js 5.75 MiB [emitted] [big] (name: main) 1 related asset
    asset polyfills.js 265 KiB [emitted] [big] (name: polyfills) 1 related asset
  asset runtime.js 9.96 KiB [emitted] (name: runtime) 1 related asset
  asset mockServiceWorker.js 9.28 KiB [emitted] [from: src/mockServiceWorker.js] [copied]
asset favicon.ico 158 KiB [emitted] [from: src/favicon.ico] [copied]
asset 6ae26cc7be3b327c.png 148 KiB [emitted] [immutable] [from: ../../../libs/ui/src/lib/interaction-and-system-feedback/error-display/assets/error-pages-key-visual.png] (auxiliary name: main)
Entrypoint main [big] 5.76 MiB (7.22 MiB) = runtime.js 9.96 KiB main.js 5.75 MiB 3 auxiliary assets
Entrypoint polyfills [big] 275 KiB (314 KiB) = runtime.js 9.96 KiB polyfills.js 265 KiB 2 auxiliary assets


WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
'"production"' !== '"development"'

webpack 5.70.0 compiled with 1 warning (a2c351b34470c085)

Similar issue #9253

Environment

Node : 16.14.0
OS : win32 x64
yarn : 3.0.2

nx : 13.9.2
@nrwl/angular : undefined
@nrwl/cypress : 13.9.2
@nrwl/detox : undefined
@nrwl/devkit : 13.9.2
@nrwl/eslint-plugin-nx : 13.9.2
@nrwl/express : undefined
@nrwl/jest : 13.9.2
@nrwl/js : 13.9.2
@nrwl/linter : 13.9.2
@nrwl/nest : undefined
@nrwl/next : undefined
@nrwl/node : undefined
@nrwl/nx-cloud : undefined
@nrwl/nx-plugin : undefined
@nrwl/react : 13.9.2
@nrwl/react-native : undefined
@nrwl/schematics : 8.12.11
@nrwl/storybook : 13.9.2
@nrwl/web : 13.9.2
@nrwl/workspace : 13.9.2
typescript : 4.3.5
rxjs : 6.6.7

[gmarkc]

I'm running nx version 13.8.8 and having the same issue. If I run the "build" command, the assets show up in the dist folder as expected. But when I run with the "serve" command, they are not served up.

[AdaskoTheBeAsT]

after that warning started to appear
WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
'"production"' !== '"development"'

we have troubles with generating source maps
downgraded to 13.8.3 for now

[nemonemi]

@AdaskoTheBeAsT, what you are referring to should be part of a separate ticket. Here the focus is on the problem with the static Assets not being served/copied.

[AdaskoTheBeAsT]

ok sorry

[nemonemi]

No problem ;)

[nemonemi]

I've figured out the culprit.
Basically, the assets are there, but the path to them is wrong.
If I would set my baseHref in project.json to /, then everything would work.

This has been changed from how it worked before.

[joshribakoff]

Same problem here, fixed by switching the project from esbuild to "executor": "@nrwl/webpack:webpack",

[nemonemi]

That is not really a fix, but a total replacement of the solution.
In my case, I've used the @nrwl/web:webpack. Your using the esbuild might have had some other implications.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.