I should start by saying that I am new to front end development so i might miss somethings. I am working with a NextJs project with Typescript and SCSS. Everything in my docker build was fine until suddenly the docker build fails. The error message i get is :
74.43 ./styles/admin.module.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[5].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[5].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[5].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[5].use[4]!./styles/admin.module.scss 74.43 Cannot read properties of undefined (reading 'indexOf') 74.43 74.43 Import trace for requested module: 74.43 ./styles/admin.module.scss 74.43 ./src/pages/admin/services.page.tsx 74.43 74.43 ./styles/admin.module.scss.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[5].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[5].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[3].oneOf[5].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[3].oneOf[5].use[4]!./styles/admin.module.scss 74.43 Error: resolve-url-loader: CSS error 74.43 PostCSS received undefined instead of CSS string 74.43 at new Input (/app/node_modules/postcss/lib/input.js:24:13) 74.43 at encodeError (/app/node_modules/next/dist/compiled/resolve-url-loader/index.js:1:26890) 74.43 at onFailure (/app/node_modules/next/dist/compiled/resolve-url-loader/index.js:1:26545) 74.43 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 71.72 > Build failed because of webpack errors 71.83 error Command failed with exit code 1. 71.83 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
{
"version": "v0.1.0",
"name": "app-name",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@material-ui/core": "^4.12.4",
"@material-ui/icons": "^4.11.3",
"@mui/icons-material": "^5.14.1",
"@mui/lab": "^5.0.0-alpha.93",
"@mui/material": "^5.14.2",
"@mui/x-date-pickers": "^5.0.0-beta.4",
"@reduxjs/toolkit": "^1.7.1",
"@types/bcryptjs": "^2.4.2",
"@types/flat": "^5.0.2",
"@types/react-beautiful-dnd": "^13.1.4",
"@types/react-redux": "^7.1.21",
"@types/uuid": "^8.3.4",
"@uiw/react-markdown-editor": "^5.11.1",
"@uiw/react-markdown-preview": "^4.1.13",
"ag-grid-community": "^26.2.1",
"ag-grid-enterprise": "^26.2.1",
"ag-grid-react": "^26.2.0",
"applicationinsights": "^2.2.0",
"axios": "^0.24.0",
"bcryptjs": "^2.4.3",
"cookie": "^0.4.2",
"cookies-next": "^2.0.4",
"date-fns": "^2.29.1",
"dotenv-safe": "^8.2.0",
"flat": "^5.0.2",
"jsonwebtoken": "^8.5.1",
"next": "12.0.7",
"next-remove-imports": "^1.0.6",
"react": "17.0.2",
"react-beautiful-dnd": "^13.1.1",
"react-cookie": "^4.1.1",
"react-dom": "17.0.2",
"react-idle-timer": "^5.4.1",
"react-redux": "^7.2.6",
"react-toastify": "^9.0.8",
"sass": "1.45.2",
"webpack": "^5.89.0"
},
"devDependencies": {
"@types/cookie": "^0.4.1",
"@types/jsonwebtoken": "^8.5.8",
"@types/node": "17.0.5",
"@types/react": "17.0.38",
"eslint": "8.5.0",
"eslint-config-next": "12.0.7",
"redux-devtools": "^3.7.0",
"typescript": "4.5.4"
}
}
I think it has something to do with the version of packages for some reason. This theory is based on the fact that previous builds that used to work are also failing when i run docker-build now. The main issue seems to be in the sass version? Because that is where the error is originating from. there is also a yarn.lock file.
The docker file looks something like :
FROM node:alpine as dependencies
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
FROM node:alpine as builder
WORKDIR /app
COPY . .
COPY --from=dependencies /app/node_modules ./node_modules
RUN yarn build
FROM node:alpine as runner
WORKDIR /app
# If you are using a custom next.config.js file, uncomment this line.
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
EXPOSE 80
CMD ["yarn", "start"]
Removed the ENV vars.
I tried changing the package denotion "sass": "^1.45.2 to "sass": "1.45.2", but that does not seem to solve the isssue.
I tried migrating to older versions of the project, the build still fails.