Hotreloading dev throws [postcss] ...: Unknown word error

[ChristianAgren]

Hi!

I'm trying to create a PWA using astro, but during development, when hot reloading the project I always get the following error:

warnings
  One of the glob patterns doesn't match any files. Please remove or fix the following: {
  "globDirectory": "/Users/christianag/projects/mur/dev-dist",
  "globPattern": "**/*.{css,js,html,svg,png,ico,txt}",
  "globIgnores": [
    "**/node_modules/**/*",
    "sw.js",
    "workbox-*.js"
  ]
}

01:27:39 AM [astro] update /dev-dist/sw.js
01:27:39 AM [astro] update /dev-dist/workbox-ab7aa862.js
01:27:49 AM [astro] reload /src/pages/index.astro
1:27:49 AM [vite] Internal server error: [postcss] /Users/christianag/projects/mur/src/pages/index.astro?astro&type=style&index=0&lang.css:1:1: Unknown word
  Plugin: vite:css
  File: /Users/christianag/projects/mur/src/pages/index.astro?astro&type=style&index=0&lang.css:1:1
  1  |  ---
     |   ^
  2  |  import Layout from "../layouts/Layout.astro";
  3  |  import Card from "../components/Card.astro";
      at Input.error (/Users/christianag/projects/mur/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/input.js:106:16)
      at Parser.unknownWord (/Users/christianag/projects/mur/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/parser.js:594:22)
      at Parser.other (/Users/christianag/projects/mur/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/parser.js:436:12)
      at Parser.parse (/Users/christianag/projects/mur/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/parser.js:471:16)
      at parse (/Users/christianag/projects/mur/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/parse.js:11:12)
      at new LazyResult (/Users/christianag/projects/mur/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/lazy-result.js:133:16)
      at Processor.process (/Users/christianag/projects/mur/node_modules/.pnpm/postcss@8.4.31/node_modules/postcss/lib/processor.js:53:14)
      at compileCSS (file:///Users/christianag/projects/mur/node_modules/.pnpm/vite@4.4.11/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:38898:63)
      at async TransformContext.transform (file:///Users/christianag/projects/mur/node_modules/.pnpm/vite@4.4.11/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:38295:56)
      at async Object.transform (file:///Users/christianag/projects/mur/node_modules/.pnpm/vite@4.4.11/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:44345:30)
      at async loadAndTransform (file:///Users/christianag/projects/mur/node_modules/.pnpm/vite@4.4.11/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:55015:29)
      at async viteTransformMiddleware (file:///Users/christianag/projects/mur/node_modules/.pnpm/vite@4.4.11/node_modules/vite/dist/node/chunks/dep-2b82a1ce.js:64417:32)

The hotreloading always work up until the top warning is posted in the terminal, and then it gives me the error.

These are my deps:

    "@astrojs/tailwind": "^5.0.2",
    "@astrojs/vercel": "^5.0.2",
    "@vercel/analytics": "^1.1.1",
    "astro": "^3.3.0",
    "tailwindcss": "^3.0.24",
    "@vite-pwa/astro": "^0.1.3",
    "prettier": "^3.0.3",
    "prettier-plugin-astro": "^0.12.0",
    "vite-plugin-pwa": "^0.16.5"

I've tried downgrading Astro to version 2 and matched the peer deps accordingly, but I have the same issue there.

AstroPWA config:

export default defineConfig({
  integrations: [
    tailwind(),
    AstroPWA({
      base: "/",
      scope: "/",
      includeAssets: ["favicon.svg"],
      registerType: "autoUpdate",
      manifest: {
        name: "...",
        short_name: "...",
        theme_color: "#ffffff",
        display: "fullscreen",
        orientation: "landscape",
        icons: [
          {
            src: "pwa-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
          {
            src: "pwa-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any maskable",
          },
        ],
      },
      workbox: {
        navigateFallback: null,
        globPatterns: ["**/*.{css,js,html,svg,png,ico,txt}"],
      },
      devOptions: {
        enabled: true,
      },
    }),
  ],
  output: "server",
  adapter: vercel({
    webAnalytics: {
      enabled: true,
    },
    speedInsights: {
      enabled: true,
    },
    imageService: true,
  }),
});

I've tried replicating both examples here in the example directory with the same outcome. Any insights for me? It seems I can't get around this issue.

[JEK58]

I'm having the same problem. Did not find a solution yet:/

[userquin]

provide minimal repro

[cameronapak]

I'm also having the same issue.

@ChristianAgren, I see that the error happens as postcss is processing: /Users/christianag/projects/mur/src/pages/index.astro?astro&type=style&index=0&lang.css:1:1

What's interesting is it's processing an Astro file, but the URL param ends in .css.

I feel like it's a globPatterns issue, but that's just feeling and no data behind that.

[userquin]

Page refresh with pwa dev options enabled will not work, the sw will redirect to navigate fallback page.

The workbox warning can be rmeoved enabling suppressWarning in devOptions, ot os mor related with the error.