Can not import react module into the app

[damdafayton]

Node/npm version(s): v14.7.3

Package(s) version(s):

    @porscheofficial/cookie-consent-banner-react": "^2.1.1

Description of the issue/feature: Module import error

Some example to reproduce the issue: import { CookieConsentBanner } from "@porscheofficial/cookie-consent-banner-react";

Use cases:

Module parse failed: Unexpected token (13:61)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const acceptedCategoriesListener = event => {
|     if (isCustomEvent(event)) {
>       setAcceptedCategories(event.detail.acceptedCategories ?? []);
|     }
|   };```

[pboeder]

Seems that your setup has issues with the nullish coelescing operator (??).

What is your setup? Are you using create-react-app? Which node version are you running?

[damdafayton]

Yes I am using create-react-app Node version is v14.17.3

File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   const acceptedCategoriesListener = event => {
|     if (isCustomEvent(event)) {
>       setAcceptedCategories(event.detail.acceptedCategories ?? []);
|     }
|   };
    at Object../node_modules/@porscheofficial/cookie-consent-banner-react/lib/module/index.js (RefreshUtils.js:168:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (bootstrap.min.css:7:1)
    at Module../src/App.js (App.js:293:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Module.<anonymous> (wave.jpg:1:1)
    at Module../src/index.js (index.js:17:1)
    at __webpack_require__ (bootstrap:856:1)
    at fn (bootstrap:150:1)
    at Object.1 (utils.js:191:1)
    at __webpack_require__ (bootstrap:856:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js?__WB_REVISION__=013aac3d6d7af22fde2258807dc5984e:1:59```

This is the error completely.

[pboeder]

Which version of create-react-app?

[damdafayton]

    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-native-svg": "^12.1.1",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",

Actually I started to implement directly into index.html but even that seems very complicated 😅

[pboeder]

Interesting. Unfortunately, I'm unable to replicate the issue. The component works fine with react-scripts v4: https://codesandbox.io/s/vibrant-kilby-glbxj?file=/src/App.js

Would be great if you provide a codesandbox so I can figure out the issue. Probably you have some changes in your tsconfig.js or your webpack setup that leads to the error.

[damdafayton]

Ok I will check

[damdafayton]

Btw finally I am able to make it work on html with tag manager but cursor doesnt change into pointer over buttons.

[pboeder]

Hi @damdafayton ! Should be fixed with v2.1.3. Can you confirm?

[damdafayton]

Yes its fixed 👍 Thx.

[damdafayton]

Ive tried on codesandbox and it works there too. For some reason, still it doesnt work on mine. I will check another time.

The way i made it work is that i just copied the whole cookie-consent-banner library into react's app/public and inserted the .esm.js file into index.html.

So it serves the purpose currently. Great library 💯

[pboeder]

Thanks :)

[damdafayton]

Hi, Finally I solved the problem by updating react-scripts from version ^4 to 5.0.0