CI/CD for NextJs applications fails in Github Actions - node.js

Question

this is my first question here :D
I'm setting up the CI/CD process for a NextJS application and everything is working fine locally but when I try to run the workflow in Github Actions the command npm run build fails. It says that it can't find the babel-plugin-styled-components package, but the package is there.
package.json
{
"name": "some-name",
"version": "0.1.1",
"private": true,
"scripts": {
"dev": "next dev -p 15002",
"build": "next build",
"start": "NODE_ENV=production node server.js"
},
"dependencies": {
"babel-plugin-transform-runtime": "6.23.0",
"dyte-client": "^0.34.0",
"express": "^4.17.1",
"jspdf": "^2.5.1",
"leaflet": "^1.7.1",
"next": "^11.1.2",
"nprogress": "^0.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-fade-in": "^2.0.1",
"react-leaflet": "^3.2.2",
"react-leaflet-enhanced-marker": "^1.0.21",
"react-reveal": "^1.2.2",
"react-simple-maps": "^2.3.0",
"react-slick": "^0.28.1",
"react-truncate": "^2.4.0",
"reactn": "^2.2.7",
"sass": "^1.44.0",
"sharp": "^0.29.3",
"sitemap": "^7.0.0",
"slick-carousel": "^1.8.1",
"timezones-list": "^3.0.1"
},
"dependenciesLocal": {
"babel-plugin-transform-runtime": "6.23.0",
"dyte-client": "^0.34.0",
"express": "^4.17.1",
"leaflet": "^1.7.1",
"next": "^11.1.2",
"nprogress": "^0.2.0",
"react-fade-in": "^2.0.1",
"react-leaflet": "^3.2.2",
"react-leaflet-enhanced-marker": "^1.0.21",
"react-reveal": "^1.2.2",
"react-slick": "^0.28.1",
"react-truncate": "^2.4.0",
"reactn": "^2.2.7",
"sass": "^1.44.0",
"sitemap": "^7.0.0",
"slick-carousel": "^1.8.1"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.23.0",
"#typescript-eslint/parser": "^4.23.0",
"babel-eslint": "^10.1.0",
"babel-plugin-styled-components": "^1.12.0",
"delegates": "^1.0.0",
"eslint": "^7.26.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.7.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4.2.0",
"typescript": "^4.2.4",
"webpack": "^5.57.1"
},
"engines": {
"node": "14.x"
}
}
deploy.yml
name: Staging deployment
on:
push:
branches:
- "staging"
permissions:
id-token: write
contents: read
env:
SOME_ENV_VARS: SOME_VALUE
jobs:
build:
name: CI Pipeline
runs-on: ubuntu-latest
environment: staging
strategy:
matrix:
node-version: ["14.x"]
steps:
- name: Checkout the files
uses: actions/checkout#v2
- name: Setup node ${{ matrix.node-version }}
uses: actions/setup-node#v2
with:
node-version: ${{ matrix.node-version }}
# Install project dependencies, test and build
- name: Install dependencies
run: npm install
env:
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
- name: Run build
run: npm run build
env:
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
CI: false
deploy:
name: CD Pipeline
runs-on: ubuntu-latest
environment: staging
needs: [build]
strategy:
matrix:
node-version: ["14.x"]
appname: ["main_app"]
deploy-group: ["main_app_staging"]
s3-bucket: ["main-app-codedeploy-staging"]
s3-filename: ["main-app-codedeploy-staging-${{ github.sha }}"]
steps:
- name: Setup repository
uses: actions/checkout#v2
- name: Setup node ${{ matrix.node-version }}
uses: actions/setup-node#v2
with:
node-version: ${{ matrix.node-version }}
- name: Install dependencies
run: npm install
env:
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
- name: Run build
run: npm run build
env:
NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
CI: false
# Configure AWS credentials
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials#v1
with:
role-to-assume: ${{ secrets.AWS_DEPLOY_ROLE }}
role-session-name: OIDCSession
aws-region: ${{ secrets.AWS_REGION }}
# Deploy push to AWS S3
- name: AWS Deploy push
run: |
aws deploy push \
--application-name ${{ matrix.appname }} \
--description "This is a revision for the ${{ matrix.appname }}-${{ github.sha }}" \
--ignore-hidden-files \
--s3-location s3://${{ matrix.s3-bucket }}/${{ matrix.s3-filename }}.zip \
--source .
# Create deployment to CodeDeploy
- name: AWS Create Deployment
run: |
aws deploy create-deployment \
--application-name ${{ matrix.appname }} \
--deployment-config-name CodeDeployDefault.OneAtATime \
--deployment-group-name ${{ matrix.deploy-group }} \
--file-exists-behavior OVERWRITE \
--s3-location bucket=${{ matrix.s3-bucket }},key=${{ matrix.s3-filename }}.zip,bundleType=zip \
The error
./node_modules/next/dist/client/next.js
Error: Cannot find module 'babel-plugin-styled-components'
Require stack:
- /home/runner/work/adplist/adplist/node_modules/next/dist/compiled/babel/bundle.js
- /home/runner/work/adplist/adplist/node_modules/next/dist/compiled/babel/code-frame.js
- /home/runner/work/adplist/adplist/node_modules/next/dist/build/webpack-config.js
- /home/runner/work/adplist/adplist/node_modules/next/dist/build/index.js
- /home/runner/work/adplist/adplist/node_modules/next/dist/cli/next-build.js
- /home/runner/work/adplist/adplist/node_modules/next/dist/bin/next
- If you want to resolve "styled-components", use "module:styled-components"
at loadPlugin.next (<anonymous>)
at createDescriptor.next (<anonymous>)
at Array.map (<anonymous>)
at Generator.next (<anonymous>)
> Build error occurred
Error: > Build failed because of webpack errors
EDIT 1: Here is the babel file.
{
"presets": ["next/babel"],
"plugins": [
[
"styled-components",
{ "ssr": true, "displayName": true, "preprocess": false }
]
],
"compact": false
}
Hope you can help me! :)