bug: Error: Unknown node type in node creation when serving ionic/react app

[corysmc]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

After updating to ionic 7.0.5+ serving an ionic react app fails while compiling with this error

./node_modules/@ionic/react/css/float-elements.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./node_modules/@ionic/react/css/float-elements.css)
Error: Unknown node type in node creation
    at Array.map (<anonymous>)

Expected Behavior

Compiles and serves properly

Steps to Reproduce

1. Start with https://github.com/ionic-team/ionic-react-conference-app
2. Update ionic npm i @ionic/react-router@7.0.9 @ionic/react@7.0.9
3. run npm run start
4. See error compiling
5. Downgrade to npm i @ionic/react-router@7.0.5 @ionic/react@7.0.5 compile and serve works
6. I tried on 7.0.6 7.0.7, 7.0.8, 7.0.9, 7.0.10, 7.0.11, 7.0.12

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (/Users/cory/.nvm/versions/node/v14.17.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/react 7.0.6

Capacitor:

Capacitor CLI : 1.3.0 @capacitor/android : not installed @capacitor/core : 1.3.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : not installed globally

System:

NodeJS : v14.18.2 (/Users/cory/.asdf/installs/nodejs/14.18.2/bin/node) npm : 6.14.15 OS : macOS

Additional Information

It looks like it's an issue with postcss - but no other dependencies changed in my upgrade. Been digging around for some time trying to find a solution - looks like others on the forum ran into this issue as well

https://forum.ionicframework.com/t/just-updated-to-v7-and-have-this-problem/234038

[thetaPC]

Thank you for the issue! Do you experience the error when using node v18?

[corysmc]

@thetaPC thanks for the recommendation. I've been trying to update to node 18.16.0 - but running into this issue: 0308010C:digital envelope routines::unsupported Which led me to this stack overflow https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

Which the suggestions so far have not helped :( I'm guessing you are not seeing this issue following the repro steps? Can you reproduce on node 16?

[thetaPC]

I wasn't able to reproduce it with node v16+. Please provide a reproduction URL that already contains the bug that you are experiencing. I recommend forking ionic-react-conference-app and upgrading the desired libraries (@ionic/react-router@7.0.9 @ionic/react) and then sending us the forked GitHub link.

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[snr-lab]

This issue is replicable after updating ionic version to 7. I am using react 17.0.1

[snr-lab]

I have created this repo for reproducing the issue.

https://github.com/snr-lab/IonicReactTest

Please let me know if any more information is required.

[AlexEscalante]

I have this issue too when updating from 6.3 to 7.0.12. We had been successfully updated from 5.5 until now.

[liamdebeasi]

I am able to reproduce this behavior. It looks like there were some underlying CSS changes that triggered a bug in a CSS-processing dependency.

For example, here is some of the diff for float-elements.css between 7.0.5 and 7.0.6:

- [dir=rtl] .ion-float-xl-end, :host-context([dir=rtl]) .ion-float-xl-end {
+ :host-context([dir=rtl]) .ion-float-xl-end {
  float: left !important;
}
[dir=rtl] .ion-float-xl-end {
  float: left !important;
}
+ @supports selector(:dir(rtl)) {
+  .ion-float-xl-end:dir(rtl) {
+  float: left !important;
+ }

Interestingly, we had a similar issue in https://github.com/ionic-team/ionic-framework/pull/27540 where updating to a newer version of Ionicons resulted in a compilation error when using code such as the following:

@supports not selector(:host-context([dir='rtl'])) {
  :host(.icon-rtl) .icon-inner {
    transform: scaleX(-1);
  }
}

We are still looking into this one, but it also appears to be related to how CSS is processed when it comes to complex selectors.

---

At this point it appears this is a bug in a 3rd party dependency that apps used for parsing CSS, but I'll keep digging to see if I can better isolate the issue.

[liamdebeasi]

This issue is fixed with Autoprefixer 10.2.5+: https://github.com/postcss/autoprefixer/issues/1391#issuecomment-791462453

The sample repo is using react-scripts@4.x which uses postcss-present-env. That dependency uses an older version of autoprefixer that still has this bug. Upgrading to react-scripts@5 fixes the issue because it also updates its postcss-present-env dependency. This dependency uses a patched version of autoprefixer.

I am going to close this, but the resolution is to update to react-scripts@5. Let me know if there are any questions.

edit: If you are not using react-scripts but are running into this issue, make sure you are using a patched version of autoprefixer: npm ls autoprefixer.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.