Cannot read properties of null (reading 'flags')

[bressanelle]

Node version: 16.14.0

I'm using NX workspaces and trying to integrate stencil/tailwind but I'm getting this error

I followed this example. This error happens when I set tailwindCssPath in stencil.config.ts

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin';
import tailwindcss from 'tailwindcss';
import { defaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor';
import tailwindConf from './tailwind.config';
import purgecss from '@fullhuman/postcss-purgecss';
import autoprefixer from 'autoprefixer';

export const config: Config = {
  namespace: 'design-system',
  taskQueue: 'async',
  plugins: [
    sass(),
    tailwind({
      tailwindConf,
      tailwindCssPath: './src/styles/tailwind.css',
      postcss: {
        plugins: [
          tailwindcss(),
          purgecss({
            content: ['./**/*.tsx'],
            safelist: [
              ':root',
              ':host',
              ':shadow',
              '/deep/',
              '::part',
              '::theme',
            ],
            defaultExtractor,
          }),
          autoprefixer(),
        ],
      },
    }),
    tailwindHMR(),
  ],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      dir: '../../dist/libs/design-system/dist',
    },
    {
      type: 'www',
      dir: '../../dist/libs/design-system/www',
      serviceWorker: null, // disable service workers
    },
  ],
};

my package.json

{
  "name": "monorepo-frontend",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "ds:build": "npx nx build design-system",
    "ds:start": "npx nx run design-system:serve"
  },
  "private": true,
  "dependencies": {
    "@angular-architects/module-federation": "^13.0.1",
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@nrwl/angular": "13.8.3",
    "@nxext/stencil": "^13.1.2",
    "autoprefixer": "^10.4.2",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.2.0",
    "@angular-eslint/eslint-plugin": "~13.0.1",
    "@angular-eslint/eslint-plugin-template": "~13.0.1",
    "@angular-eslint/template-parser": "~13.0.1",
    "@angular/cli": "~13.2.0",
    "@angular/compiler-cli": "~13.2.0",
    "@angular/language-service": "~13.2.0",
    "@fullhuman/postcss-purgecss": "^4.1.3",
    "@nrwl/cli": "13.8.3",
    "@nrwl/cypress": "13.8.3",
    "@nrwl/eslint-plugin-nx": "13.8.3",
    "@nrwl/jest": "13.8.3",
    "@nrwl/linter": "13.8.3",
    "@nrwl/tao": "13.8.3",
    "@nrwl/workspace": "13.8.3",
    "@stencil/angular-output-target": "^0.4.0",
    "@stencil/core": "^2.12.0",
    "@stencil/postcss": "2.1.0",
    "@stencil/sass": "1.5.2",
    "@tailwindcss/forms": "^0.4.0",
    "@types/autoprefixer": "^9.7.2",
    "@types/jest": "27.0.2",
    "@types/node": "16.11.7",
    "@types/puppeteer": "~5.4.4",
    "@typescript-eslint/eslint-plugin": "~5.10.0",
    "@typescript-eslint/parser": "~5.10.0",
    "cssnano": "^5.0.17",
    "cypress": "^9.1.0",
    "eslint": "~8.7.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "26.6.3",
    "jest-config": "26.6.3",
    "jest-preset-angular": "11.1.1",
    "prettier": "^2.5.1",
    "puppeteer": "~5.3.1",
    "stencil-tailwind-plugin": "^1.2.2",
    "tailwindcss": "^3.0.23",
    "ts-jest": "26.5.6",
    "typescript": "~4.5.2"
  }
}

[Poimen]

Hi,

Sorry, I've never used nx before.

As far as I know, you should be able to run the build without nx being involved(?)

Would you be able to test if it works like that?

I suspect it has something to do with pathing, but I'm guessing.

Are you able to put a small repo together that demonstrates the error?

Thanks

On Wed, 23 Feb 2022, 18:50 Hiury Bressanelle, @.***> wrote:

Node version: 16.14.0

I'm using NX workspaces and trying to integrate stencil/tailwind but I'm getting this error

[image: image] https://user-images.githubusercontent.com/53632252/155362223-547cca5f-c78a-4c68-bf6d-c53e5b91b459.png

I followed this example. https://github.com/Poimen/stencil-tailwind-plugin-example/blob/main/stencil-component-example/stencil.config.ts This error happens when I set tailwindCssPath in stencil.config.ts

import { Config } from @./core'; import { sass } from @./sass'; import tailwind, { tailwindHMR } from 'stencil-tailwind-plugin'; import tailwindcss from 'tailwindcss'; import { defaultExtractor } from 'tailwindcss/lib/lib/defaultExtractor'; import tailwindConf from './tailwind.config'; import purgecss from @.***/postcss-purgecss'; import autoprefixer from 'autoprefixer';

export const config: Config = { namespace: 'design-system', taskQueue: 'async', plugins: [ sass(), tailwind({ tailwindConf, tailwindCssPath: './src/styles/tailwind.css', postcss: { plugins: [ tailwindcss(), purgecss({ content: ['./*/.tsx'], safelist: [ ':root', ':host', ':shadow', '/deep/', '::part', '::theme', ], defaultExtractor, }), autoprefixer(), ], }, }), tailwindHMR(), ], outputTargets: [ { type: 'dist', esmLoaderPath: '../loader', dir: '../../dist/libs/design-system/dist', }, { type: 'www', dir: '../../dist/libs/design-system/www', serviceWorker: null, // disable service workers }, ], };

my package.json

{ "name": "monorepo-frontend", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "nx", "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main", "start": "nx serve", "build": "nx build", "test": "nx test", "ds:build": "npx nx build design-system", "ds:start": "npx nx run design-system:serve" }, "private": true, "dependencies": { @./module-federation": "^13.0.1", @./animations": "~13.2.0", @./common": "~13.2.0", @./compiler": "~13.2.0", @./core": "~13.2.0", @./forms": "~13.2.0", @./platform-browser": "~13.2.0", @./platform-browser-dynamic": "~13.2.0", @./router": "~13.2.0", @./angular": "13.8.3", @./stencil": "^13.1.2", "autoprefixer": "^10.4.2", "rxjs": "~7.4.0", "tslib": "^2.0.0", "zone.js": "~0.11.4" }, "devDependencies": { @./build-angular": "~13.2.0", @./eslint-plugin": "~13.0.1", @./eslint-plugin-template": "~13.0.1", @./template-parser": "~13.0.1", @./cli": "~13.2.0", @./compiler-cli": "~13.2.0", @./language-service": "~13.2.0", @./postcss-purgecss": "^4.1.3", @./cli": "13.8.3", @./cypress": "13.8.3", @./eslint-plugin-nx": "13.8.3", @./jest": "13.8.3", @./linter": "13.8.3", @./tao": "13.8.3", @./workspace": "13.8.3", @./angular-output-target": "^0.4.0", @./core": "^2.12.0", @./postcss": "2.1.0", @./sass": "1.5.2", @./forms": "^0.4.0", @./autoprefixer": "^9.7.2", @./jest": "27.0.2", @./node": "16.11.7", @./puppeteer": "~5.4.4", @./eslint-plugin": "~5.10.0", @.***/parser": "~5.10.0", "cssnano": "^5.0.17", "cypress": "^9.1.0", "eslint": "~8.7.0", "eslint-config-prettier": "8.1.0", "eslint-plugin-cypress": "^2.10.3", "jest": "26.6.3", "jest-config": "26.6.3", "jest-preset-angular": "11.1.1", "prettier": "^2.5.1", "puppeteer": "~5.3.1", "stencil-tailwind-plugin": "^1.2.2", "tailwindcss": "^3.0.23", "ts-jest": "26.5.6", "typescript": "~4.5.2" } }

— Reply to this email directly, view it on GitHub https://github.com/Poimen/stencil-tailwind-plugin/issues/19, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAE2XNBSJOLI5X5A4NSCNPLU4UF4TANCNFSM5PE5HLIQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you are subscribed to this thread.Message ID: @.***>

[dgonzalezr]

Hi there @Poimen

I'm also testing Nx because we're thinking to move over it, I've set up a dummy project within Stencil and will add Tailwind and the Stencil-Tailwind-Plugin to check if everything works as expected (in theory it should). I'll keep u posted 🙂

[Poimen]

@dgonzalezr thanks 👍

We use rush.js internally which is less opinionated than nx so your feedback would be great 😃

[bressanelle]

@Poimen sorry for the late. You were correct, it's a problem with pathing. I changed my tailwindCssPath to __dirname + '/src/styles/tailwind.css' and it's working fine

[Poimen]

Awesome stuff, thanks for the update, glad it is working 😃

[mikestecker]

@deprecat3d I've tried setting tailwindCssPath: join(__dirname + './src/styles/base.css') and also tried tailwindCssPath: __dirname + './src/styles/base.css' but I'm still getting the same error. Do you mind sharing a code snippet of what you have working?