Docker image not working(?)

[Dima-Kal]

Hi, getting this issue after running the docker image:

`
./app/[user]/page.tsx

Build failed because of webpack errors
magicpack@0.1.0 build
�
next build
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry
Creating an optimized production build ...
Warning: For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/app/page.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/components/Header.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/components/Footer.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/components/PingCheck.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/components/Description.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/components/Computer.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/components/WakeButton.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
��
[webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|javascript/auto|/magicpack/node_modules/next/dist/build/webpack/loaders/next-flight-css-loader.js??ruleSet[1].rules[14].oneOf[9].use[0]!/magicpack/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[1]!/magicpack/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[9].use[2]!/magicpack/node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[14].oneOf[9].use[3]!/magicpack/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[14].oneOf[9].use[4]!/magicpack/components/User.module.scss|ssr': No serializer registered for SassError
while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError
Failed to compile.
./app/page.module.scss
SassError: Undefined variable.
╷
7 │ color: $app_color_full;
│ ^^^^^^^^^^^^^^^
╵
app/page.module.scss 7:12 root stylesheet
Import trace for requested module:
./app/page.module.scss
./app/page.tsx
./components/Computer.module.scss
SassError: Undefined variable.
╷
2 │ background-color: $computer_background;
│ ^^^^^^^^^^^^^^^^^^^^
╵
components/Computer.module.scss 2:21 root stylesheet
Import trace for requested module:
./components/Computer.module.scss
./components/Computer.tsx
./app/[user]/page.tsx
./components/Description.module.scss
SassError: Undefined variable.
╷
7 │ color: $app_color_full;
│ ^^^^^^^^^^^^^^^
╵
components/Description.module.scss 7:12 root stylesheet
Import trace for requested module:
./components/Description.module.scss
./components/Description.tsx
./app/[user]/page.tsx
./components/Footer.module.scss
SassError: Undefined variable.
╷
10 │ background-color: $footer_color;
│ ^^^^^^^^^^^^^
╵
components/Footer.module.scss 10:23 root stylesheet
Import trace for requested module:
./components/Footer.module.scss
./components/Footer.tsx
./app/page.tsx
./components/Header.module.scss
SassError: Undefined variable.
╷
7 │ @media (max-width: $layout_breakpoint_2) {
│ ^^^^^^^^^^^^^^^^^^^^
╵
components/Header.module.scss 7:22 root stylesheet
Import trace for requested module:
./components/Header.module.scss
./components/Header.tsx
./app/[user]/page.tsx
Build failed because of webpack errors

`

[alex-swki]

Hey, can you please send me your .env and docker-compose file? This has to do with the App Theme Variable NEXT_PUBLIC_COLOR_THEME in your .env file. Also make sure that the .env file bind into the container is working correctly.

[Dima-Kal]

does it have to be .env file? i've used Environments in docker compose:

  magicpack:
    image: alexswki/magicpack
    dns:
      - ${PIHOLE_DNS}
    networks:
      - ${DOCKER_NETWORK}
    restart: always
    container_name: magicpack
    environment:
      - NEXT_PUBLIC_URL="https://magicpack.${SERVER_DOMAIN}" #Set this to the URL which users will access MagicPack with
      - NEXT_PUBLIC_COLOR_THEME="DARK" #Can either be "LIGHT" or "DARK".
     # - NEXT_PUBLIC_COMPANY_LOGO_PATH="/img/logo.png" Path to your company logo. Actual path will be /magicpack-app/public/img/logo.png
     # - NEXT_PUBLIC_COMPANY_LOGO_WIDTH=240 Adjust this value if your company logo is too big or too small. Width in CSS Pixel
      - NEXT_PUBLIC_PAGE_TITLE="Wake On Lan" #Enter any string you like in here for the title position.
      - NEXT_PUBLIC_PAGE_DESC1="Wake up your company computer using the button below." #Enter any string you like in here for the 1st paragraph.
      - NEXT_PUBLIC_PAGE_DESC2="When your computer is running, you can connect via Remote Desktop." #Enter any string you like in here for the 2nd paragraph.
    volumes:
      - ./configs/magicpack/computers.json:/magicpack/computers.json
     # - ./.env:/magicpack/.env.local
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.magicpack.rule=Host(`magicpack.${SERVER_DOMAIN}`, `wol.${SERVER_DOMAIN}`)"
      - "traefik.http.routers.magicpack.entrypoints=websecure"
      - "traefik.http.services.magicpack.loadbalancer.server.port=3000"

[alex-swki]

Yes, I have not yet had time to implement a cleaner solution. The .env file is just being mounted as a file in the source code which is compiled at Docker Build time even with the prebuilt image.
See the docker-compose file I provided in the master branch for a reference of the bind mount which is required at the moment :)