npm ci fails in GitLab pipeline context

[peterschriever]

Using the develop branch with one of the last commits (I included the npm install and package changes from #103 ). Our GitLab pipeline fails to build the checkout due to the previous npm ci command failing (which is like npm install but doesnt write anything to package.json and mostly runs better for automated environments see: https://docs.npmjs.com/cli/v7/commands/npm-ci)

We shortly discussed this issue in #103 and between me and @progammer-rkt in slack, but couldnt quite come to a valid solution.

The error is as follows;

npm WARN lifecycle hyva-checkout@0.1.0~preinstall: cannot run in wd hyva-checkout@0.1.0 node scripts/configurePaymentMethods && npm run tailwind-install (wd=/builds/customerRedacted/magento2/app/code/Hyva/Checkout/reactapp)

Which causes the build to fail because of missing tailwind install (postcss package);

$ npm --prefix $CHECKOUT_PATH run build
> hyva-checkout@0.1.0 prebuild /builds/customerRedacted/magento2/app/code/Hyva/Checkout/reactapp
> cd ../view/frontend/web/css/tailwind/ && npm run build-prod
> tailwind@1.0.0 build-prod /builds/customerRedacted/magento2/app/code/Hyva/Checkout/view/frontend/web/css/tailwind
> NODE_ENV=production npm run build && npm run minify && cp ../styles.css ../../../../../reactapp/public/styles.css && npm run output-success
> tailwind@1.0.0 build /builds/customerRedacted/magento2/app/code/Hyva/Checkout/view/frontend/web/css/tailwind
> node_modules/postcss-cli/bin/postcss tailwind-source.css -o tailwind-output.css
sh: 1: node_modules/postcss-cli/bin/postcss: not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! tailwind@1.0.0 build: `node_modules/postcss-cli/bin/postcss tailwind-source.css -o tailwind-output.css`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the tailwind@1.0.0 build script.

Tested but didnt work;

• changing the preinstall command to name of postinstall

Should still test;

• changing to npm install even though it might not be ideal for automated environments
• adding the flag --unsafe-perm seems to work according to certain google results about npm not running in a certain wd (working directory), see; npm docs, stackoverflow, github issue in npm/npm-lifecycle about dockerized postinstall

Since im assigned to a project currently experiencing this issue I will try and debug a solution in the coming week.

[peterschriever]

Adding the --unsafe-perm flag seems to have resolved our problems with the npm ci and corresponding preinstall/postinstall command installing tailwind packages.

However now the build seems to fail because of a warning message regarding the new paymentMethods files;

> hyva-checkout@0.1.0 build /builds/customerRedacted/magento2/app/code/Hyva/Checkout/reactapp
> react-app-rewired build
Creating an optimized production build...
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.
./src/paymentMethods/utility/index.js
Critical dependency: the request of a dependency is an expression
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! hyva-checkout@0.1.0 build: `react-app-rewired build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the hyva-checkout@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-08-16T07_56_33_667Z-debug.log

[peterschriever]

I have narrowed down the warning blocking compilation to the following lines, in Hyva/Checkout/reactapp/src/paymentMethods/utility/index.js;

const paymentMethodFile = `../${paymentMethod}/${file}`;
const data = await import(
  /* webpackMode: "eager" */ paymentMethodFile
);

Looking into the issue it appears to be a longlasting problem (webpack/webpack#196) with regards to dynamic imports, but I dont fully understand how it all works under the hood or why specificly here the warning message pops up for us.
However while testing around in the code I realised that small changes such as inlining the paymentMethodFile constant string into the import statement again resulted in different commandline output;

// const paymentMethodFile = `../${paymentMethod}/${file}`;
const data = await import(
  /* webpackMode: "eager" */ `../${paymentMethod}/${file}`
);

results in:

Cannot read property 'range' of null
Occurred while linting longPath../paymentMethods/utility/index.js:1

Googling on this error message quickly brought me to an old babel-eslint issue: babel/babel-eslint#681 . Which actually provided a working solution, albeit perhaps imperfect (see this comment);

const data = await import(
  // eslint-disable-next-line prefer-template
  /* webpackMode: "eager" */ '../' + paymentMethod + '/' + file
);

Update: I can confirm our pipeline is working after these changes and using --unsafe-perm flag to the install command

[rajeev-k-tomy]

This is tricky. We were using babel-eslint package before. But one of its old versions. I updated it to its latest based on an issue you reported about the packages using in the app is too old. Suddenly, Cannot read property 'range' of null error popup. In order to get rid of that issue, I put the file name in the variable and used it in the dynamic import.

But babel-eslint is a deprecated package and thus we are now using @babel/eslint-parser now. See here: https://github.com/hyva-themes/magento2-hyva-checkout/blob/develop/src/reactapp/.eslintrc.js#L2

But this is still showing a warning in the console when we build the app. Not sure, how to tackle this situation to be honest. If the javascript concatenation works as you described, then i will change it to that!

But still feel it is not a clean solution :(

[rajeev-k-tomy]

There is no warning/error messages showing during the build process at the moment and hence closing this issue. If the issue still persist, feel free to re-open it.