My repository is using CI/CD, but I have this error. How can I fix it? - css

I have a project and have made changes to a remote branch. My repository has CI/CD implemented, but when GitHub Actions are performing the build, this error occurs:
yarn run v1.22.17
> postcss src/assets/css/tailwind.css -o src/assets/css/app.css
Creating an optimized production build...
Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.
Failed to compile.
chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/layout/modules/nav-item.module.scss
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/UI/modules/card.module.scss
- couldn't fulfill desired order of chunk group(s) ,
chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/UI/modules/backdrop.module.scss
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/UI/modules/card.module.scss
- couldn't fulfill desired order of chunk group(s) ,
chunk 1 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/UI/modules/card.module.scss
despite it was not able to fulfill desired ordering with these modules:
* css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-7-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-7-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-7-4!./src/components/layout/modules/affiliate-card.module.scss
- couldn't fulfill desired order of chunk group(s)
- while fulfilling desired order of chunk group(s) ,
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Error: Process completed with exit code 1.
How can I fix it? I appreciate any kind of help :)

You can change your scripts in package.json to:
"scripts": {
"start": "react-scripts start",
"build": "CI=false && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
If you notice clearly, I have changed the build script to include CI=false. This is because, the build process is treating your warnings as errors and the build fails. Setting CI=false would mean that your build won't fail if warnings are present.

Related

Next Start - too slow and images do not load with Next/Image

I believe I followed every single step mentioned in the documentation but can't seem to get images load with 'next start' script.
Next.config.js
images: {
domains: [
'dev.mydomain.com',
'qa.mydomain.com',
'stg.mydomain.com',
'mydomain.com',
],
},
I have images in public/assets/images directory. These are .png files
In my React component that is used on one of the pages, I have
import Image from 'next/image';
import homeIntroImg from '../../../public/assets/images/homeIntro.png';
.....
<Image
src={homeIntroImg}
alt="Home Introduction"
placeholder="blur"
/>
As mentioned in docs, I have installed 'sharp' and added environment variable. /usr/src/app is the working directory path in docker.
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "NEXT_SHARP_PATH=/usr/src/app/node_modules/sharp next start ",
Dockerfile
FROM base-image-node-16.0:latest AS runner
WORKDIR /usr/src/app
ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
ENV NEXT_TELEMETRY_DISABLED 1
USER 2020
COPY --chown=2020:2020 . /usr/src/app
EXPOSE 3000
CMD [ "npm", "run", "start" ]
On local when i try to build docker container,
I get
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
but images load fine.
When the same docker image is deployed to cluster, the initial load time is almost 10-15 sec. This wasn't happening like this when I run the app using 'node server.js'. I wanted to use 'next start' as recommended to get optimization benefits but now I question if it is worth to use 'next start' if it takes 10-15 sec for load.
images do not load and fail with 503 service unavailable error.
I see the 'Sharp' warning and right after that 'npm' crashes
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'yarn add sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
Killed
Am I missing anything? Any help is greatly appreciated.

Vague error in Vercel deployment (exit with code 1)

So normally Vercel gives me decent error messages, but this one seems to have no detail. Just
"failed with exit code 1".
For context, I just started this project w the basic NextJS template, made a few modifications, and this is my first deploy.
Failed once and I assumed it was because NextJS has strict type checking on by default, so I modified the next.config.js file as follows (per here):
module.exports = {
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true,
},
};
But still failed. Here is the full log:
10:23:27.575 Cloning github.com/lawderp/physical (Branch: main, Commit: 8f97554)
10:23:28.589 Cloning completed: 1.014s
10:23:28.614 Analyzing source code...
10:23:29.739 Installing build runtime...
10:23:31.612 Build runtime installed: 1.873s
10:23:34.043 Looking up build cache...
10:23:34.164 Build cache found. Downloading...
10:23:35.100 Build cache downloaded [21.48 MB]: 936.007ms
10:23:36.250 Installing dependencies...
10:23:36.489 yarn install v1.22.11
10:23:36.547 [1/4] Resolving packages...
10:23:36.734 success Already up-to-date.
10:23:36.743 Done in 0.26s.
10:23:36.754 Detected Next.js version: 11.1.2
10:23:36.755 Running "yarn run build"
10:23:37.021 yarn run v1.22.11
10:23:37.047 $ next build
10:23:37.820 info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
10:23:37.976 info - Skipping validation of types...
10:23:40.439 error Command failed with exit code 1.
10:23:40.439 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
10:23:40.456 Error: Command "yarn run build" exited with 1
Still not sure what the issue was but eventually figured out how to get past this - ignored ESLint during build by adding the following to next.config.js:
eslint: {
ignoreDuringBuilds: true,
},
(I don't advise doing this but this was quick low-stakes experiment)
I received the same vague message after making eslint alterations. Locally linting and deployment was successful, however deploying to vercel failed like yours.
Although "ignoreDuringBuilds": "true" in my .eslint.json did band-aid fix the issue, I was able to rollback each eslint change and found that my "linebreak-style": ["error", "windows"] was the underlying issue.
It passed linting locally, but failed on vercel deployment. I've fixed my line-breaks and all works great now without having to ignore during builds.

Next.js: How to disable telemetry permanently in all environments?

I want to disable Next.js telemetry in all environments, forever (Just because, Ok? Let's not sidetrack the question with irrelevant debate).
I don't want the telemetry to run on developer environments, test builds, CI builds or anywhere else.
I'm trying to find a "code" solution - I don't want to have to do anything manually in an environment in order to switch off telemetry.
Next.js makes it difficult to figure out if telemetry is enabled because it only prints the telemetry warning once on a given machine.
My diagnostic for knowing if telemetry is running is to add the next telemetry status command to my build script in package.json:
"build": "next telemetry status && next build",
I've tried adding the following to next.config.js:
module.exports = {
env: {
NEXT_TELEMETRY_DISABLED: '1',
},
}
And I've tried adding this to .env:
NEXT_TELEMETRY_DISABLED=1
But the telemetry command still reports Status: Enabled
In fact, the NEXT_TELEMETRY_DISABLED env variable doesn't seem to work at all, I tried manually disabling telemetry in my IDE by setting the env variable, but it still reports telemetry is enabled:
Next.js version: 9.5.2
Doco: https://nextjs.org/telemetry
Github issue: https://github.com/vercel/next.js/issues/8851
Adding next telemetry disable command as my prebuild script seems to have done the trick.
"prebuild": "next telemetry disable",
"build": "next build",

AWS Lambda Error: Failed to load gRPC binary module because it was not installed for the current system

I have problem with AWS Lambda function deployment with Serverless Framework. I use #google-cloud-firestore npm package which requires grpc package.
Function execution throws error:
{
"errorMessage": "Failed to load gRPC binary module because it was not installed for the current system\nExpected directory: node-v48-linux-x64-glibc\nFound: [node-v59-darwin-x64-unknown]\nThis problem can often be fixed by running \"npm rebuild\" on the current system\nOriginal error: Cannot find module '/var/task/node_modules/grpc/src/node/extension_binary/node-v48-linux-x64-glibc/grpc_node.node'",
"errorType": "Error",
"stackTrace": [
"Found: [node-v48-linux-x64-unknown]",
"This problem can often be fixed by running \"npm rebuild\" on the current system",
"Original error: Cannot find module '/var/task/node_modules/grpc/src/node/extension_binary/node-v48-linux-x64-glibc/grpc_node.node'",
"Object.<anonymous> (/var/task/node_modules/grpc/src/grpc_extension.js:44:17)",
"Module._compile (module.js:570:32)",
"Object.Module._extensions..js (module.js:579:10)",
"Module.load (module.js:487:32)",
"tryModuleLoad (module.js:446:12)",
"Function.Module._load (module.js:438:3)",
"Module.require (module.js:497:17)",
"require (internal/module.js:20:19)",
"Object.<anonymous> (/var/task/node_modules/grpc/src/client.js:38:12)",
"Module._compile (module.js:570:32)",
"Object.Module._extensions..js (module.js:579:10)",
"Module.load (module.js:487:32)",
"tryModuleLoad (module.js:446:12)",
"Function.Module._load (module.js:438:3)",
"Module.require (module.js:497:17)",
"require (internal/module.js:20:19)"
]
}
So, as I understood, lambda requires grps built with target node-v48-linux-x64-glibc
Typing npm i -S grpc --target=6.4.0 --target_arch=x64 --target_platform=linux has only changed node-v59-darwin-x64-unknown to node-v48-linux-x64-unknown.
How can I change unknown to glibc?
Any help would be really appreciated!
Fix
Basically, you need to specify the target of the grcp library.
Copied from that link:
{
"main": "index.js",
"scripts": {
"postinstall": "npm rebuild grpc --target=6.1.0 --target_arch=x64 --target_platform=linux --target_libc=glibc"
}
}
I got something similar to work by including a --target_libc=glibc, found in the documentation for node-pre-gyp.

nightwatch - terminate all test suits when a single test fails

Is there a way (e.g. flag) to terminate whole nightwatch tests when a single failed test occur? Or to get at least a status code that the some test failed, within the program?
Thanks!
In your "test_settings" section of your nightwatch.json, add the following entry:
"end_session_on_fail": true
It looks promising.
You can also try creating a global in global.js and set it to true:
"abortOnAssertionFailure: true"
You can run each test suit by different npm script, such as-
"test1": "nightwatch --retries=1 ./src/tests/test1.js",
"test2": "nightwatch --retries=1 ./src/tests/test2.js"
and then you can run this npm script-
"run_tests": "npm run test1 && npm run test2"
is one test case will fail in 'test1' the npm command will fail as well and no other tests case/suits will run.

Resources