Cannot set property 'ES6Promise' of undefined

bitflower commented 6 years ago

Hey guys,

I'm getting a

Uncaught TypeError: Cannot set property 'ES6Promise' of undefined
    at app.core.js:50
    at app.core.js:50

when editing the *.pcss file of a component in standard npm run dev watch mode.

I happens in Chrome as soon as I save the pcss file.

When I stop the dev server and npm run dev again all is good and no errors occur.

Component app-dashboard.tsx:

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

@Component({
  tag: 'app-dashboard',
  styleUrl: 'app-dashboard.pcss.pcss'
})
export class AppDashboard {
  public render(): JSX.Element {
    return (
      <app-translate entry='dashboard.index' />
    );
  }
}

app-dashboard.pcss (before):

app-dashboard {
  display: block;
}

app-dashboard.pcss (after):

app-dashboard {
  display: block;
  opacity: 0;
  transition: 175ms opacity cubic-bezier(.4, 0, .2, 1);

  &.hydrated {
    opacity: 1;
  }
}

It's happing inside a copy of @bfmatei's boilerplate

Latest @stencil/core 0.7.5, @stencil/postcss is 0.0.4.

bitflower commented 6 years ago

Still there with @stencil/core 0.7.8

jagreehal commented 6 years ago

To recreate the issue clone my repo https://github.com/jagreehal/stencil-boilerplate

Run in es5 mode, change the following in package.json - “start”: “npm run dev --es5".

Then make a change in style file (src/components/my-app/my-app.scss)

bfmatei commented 6 years ago

Hello!

I investigated this issue. It is not related to the PostCSS plugin, but with Stencil. It is covered by this: https://github.com/ionic-team/stencil/issues/676

stencil-community / stencil-postcss

Cannot set property 'ES6Promise' of undefined #6