Stencil: Cannot read properties of null (reading 'flags')

[LuckeeDev]

Describe the bug When I try to run nx serve design, I get this error in the console:

Cannot read properties of null (reading 'flags')

 >  NX   Running target "design:serve" failed

To Reproduce Create a new NX repo with Stencil.

Expected behavior The serve command should launch the app.

[LuckeeDev]

Apparently, loadConfig from @stencil/core/compiler is returning null with the data it receives in the file executors/stencil-runtime/stencil-config.ts

[DominikPieper]

Could you add the output of "nx report" and your stencil and project configs?

[chogland]

Any update on this?

[DominikPieper]

@chogland not really. I didn’t get any more information and wasn’t able to reproduce the error. Did you have the same error?

[chogland]

Yes, I have the same error. See attached image.

It is claiming about the line 43 but unsure what would cause this. I've ensure my components aren't the problem by removing the components all together. Would LOVE to get this resolved :-(

[chogland]

@DominikPieper here is a repo that should allow you to reproduce (i am on Windows in case you don't see the same issue).

the command is nx run core-components:build --verbose

Appreciate your help.

https://github.com/chogland/nxext-stencil

[chogland]

@DominikPieper , any chance you can review my sample repo and help determine what may be the issue? Let me know if you need my dependency list or anything else.

[chogland]

Updates, some details within the Stencil config that were unrelated to NX. (postcss and purge issues).

[JonScottLee]

I am also having this issue. I simply created a workspace, and ran the same generators as original poster. I'm on a Mac, running Big Sur.

Node : 16.15.1
OS   : darwin x64
yarn : 1.22.17

nx : 14.3.6
@nrwl/angular : Not Found
@nrwl/cypress : 14.3.6
@nrwl/detox : Not Found
@nrwl/devkit : 14.3.6
@nrwl/eslint-plugin-nx : 14.3.6
@nrwl/express : Not Found
@nrwl/jest : 14.3.6
@nrwl/js : 14.3.6
@nrwl/linter : 14.3.6
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : 14.3.6
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 14.3.6
@nrwl/web : 14.3.6
@nrwl/workspace : 14.3.6
typescript : 4.7.4
---------------------------------------
Community plugins:
@nxext/stencil: 14.0.6

Stencil Config

import { Config } from '@stencil/core';

import { sass } from '@stencil/sass';

import { reactOutputTarget } from '@stencil/react-output-target';

export const config: Config = {
  namespace: 'powder-core',
  taskQueue: 'async',
  plugins: [sass()],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },

    reactOutputTarget({
      componentCorePackage: '@powder-ds/powder-core',
      proxiesFile: '../../../libs/powder-core-react/src/generated/components.ts',
      includeDefineCustomElements: true,
    }),
  ],
};

Project.json

{
  "$schema": "../../node_modules/nx/schemas/project-schema.json",
  "sourceRoot": "libs/powder-core/src",
  "projectType": "library",
  "generators": {
    "@nxext/stencil:component": {
      "style": "scss"
    }
  },
  "tags": [],
  "targets": {
    "test": {
      "executor": "@nxext/stencil:test",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/powder-core/tsconfig.lib.json",
        "configPath": "libs/powder-core/stencil.config.ts",
        "outputPath": "dist/libs/powder-core"
      }
    },
    "build": {
      "executor": "@nxext/stencil:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/powder-core/tsconfig.lib.json",
        "configPath": "libs/powder-core/stencil.config.ts",
        "outputPath": "dist/libs/powder-core"
      },
      "configurations": {
        "production": {
          "dev": false,
          "prod": true
        }
      }
    },
    "serve": {
      "executor": "@nxext/stencil:serve",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/powder-core/tsconfig.lib.json",
        "configPath": "libs/powder-core/stencil.config.ts",
        "outputPath": "dist/libs/powder-core"
      }
    },
    "e2e": {
      "executor": "@nxext/stencil:e2e",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/powder-core/tsconfig.lib.json",
        "configPath": "libs/powder-core/stencil.config.ts",
        "outputPath": "dist/libs/powder-core"
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": "libs/powder-core/**/*.{ts,tsx}"
      }
    }
  }
}

[LuckeeDev]

@DominikPieper sorry for the late reply, here are my nx report and configs.

NX Report

Node : 16.13.1
OS   : win32 x64
yarn : 1.22.18

nx : 13.10.1
@nrwl/angular : Not Found
@nrwl/cypress : 13.10.1
@nrwl/detox : Not Found
@nrwl/devkit : 13.10.1
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : Not Found
@nrwl/jest : 13.10.1
@nrwl/js : Not Found
@nrwl/linter : 13.10.1
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : Not Found
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : Not Found
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 13.10.1
@nrwl/web : Not Found
@nrwl/workspace : 13.10.1
typescript : 4.6.3
rxjs : 6.6.7
---------------------------------------
Community plugins:
     @nxext/stencil: 13.2.3

Stencil config

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'design',
  taskQueue: 'async',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
};

Tailwind Config

module.exports = {
  content: ['./src/components/**/*.tsx'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Project config

{
  "root": "libs/design",
  "sourceRoot": "libs/design/src",
  "projectType": "library",
  "generators": {
    "@nxext/stencil:component": {
      "style": "css"
    }
  },
  "tags": [],
  "targets": {
    "test": {
      "executor": "@nxext/stencil:test",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/design/tsconfig.lib.json",
        "configPath": "libs/design/stencil.config.ts",
        "outputPath": "dist/libs/design"
      }
    },
    "build": {
      "executor": "@nxext/stencil:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/design/tsconfig.lib.json",
        "configPath": "libs/design/stencil.config.ts",
        "outputPath": "dist/libs/design"
      },
      "configurations": {
        "production": {
          "dev": false,
          "prod": true
        }
      }
    },
    "serve": {
      "executor": "@nxext/stencil:serve",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/design/tsconfig.lib.json",
        "configPath": "libs/design/stencil.config.ts",
        "outputPath": "dist/libs/design"
      }
    },
    "e2e": {
      "executor": "@nxext/stencil:e2e",
      "outputs": ["{options.outputPath}"],
      "options": {
        "projectType": "library",
        "tsConfig": "libs/design/tsconfig.lib.json",
        "configPath": "libs/design/stencil.config.ts",
        "outputPath": "dist/libs/design"
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": "libs/design/**/*.{ts,tsx}"
      }
    },
    "storybook": {
      "executor": "@nrwl/workspace:run-commands",
      "options": {
        "commands": ["nx run design:serve", "nx run design:serve-storybook"],
        "parallel": true
      }
    },
    "serve-storybook": {
      "executor": "@nrwl/storybook:storybook",
      "options": {
        "uiFramework": "@storybook/html",
        "port": 4400,
        "config": {
          "configFolder": "libs/design/.storybook"
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    },
    "build-storybook": {
      "executor": "@nrwl/storybook:build",
      "outputs": ["{options.outputPath}"],
      "options": {
        "uiFramework": "@storybook/html",
        "outputPath": "dist/storybook/design",
        "config": {
          "configFolder": "libs/design/.storybook"
        }
      },
      "configurations": {
        "ci": {
          "quiet": true
        }
      }
    }
  }
}