Build Errors in Fresh Framework with DaisyUI Integration

Dave-Wagner commented 5 months ago

I'm experiencing multiple build errors in my project using the Fresh framework after trying to implement theme changing with DaisyUI. These errors did not occur when I initially added DaisyUI, but started appearing with the theme change implementation. Theme changing works but does not persist through page reloads.

Steps to Reproduce:

Start the Fresh framework project with DaisyUI integrated.
Implement theme changing feature using the npm theme-change package.
Run deno task start.
Observe the errors during build process.

Expected Behavior:

The project should build without errors, and theme changes should persist through page reloads.

Actual Behavior:

Multiple 'NPM package not found' errors and one 'Expected ";" but found ":"' error occur during the build process. Theme changing works but does not persist through page reloads.

Error Log:

Task start deno run -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 7 routes and 1 islands.

 🍋 Fresh ready 
    Local: http://localhost:8000/

🌼   daisyUI 4.5.0
├─ ✔︎ 32 themes added            https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:   https://opencollective.com/daisyui

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/tailwindcss@3.4.1_postcss@8.4.33/node_modules/tailwindcss/lib/util/log.js:19:67:
      19 │ const _picocolors = /*#__PURE__*/ _interop_require_default(require("picocolors"));
         ╵                                                                    ~~~~~~~~~~~~

✘ [ERROR] Expected ";" but found ":"

    ../../../.cache/deno/deno_esbuild/daisyui@4.5.0/node_modules/daisyui/package.json:2:8:
      2 │   "name": "daisyui",
        │         ^
        ╵         ;

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-js@4.0.1_postcss@8.4.33/node_modules/postcss-js/sync.js:1:22:
      1 │ let postcss = require('postcss')
        ╵                       ~~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-js@4.0.1_postcss@8.4.33/node_modules/postcss-js/objectifier.js:1:24:
      1 │ let camelcase = require('camelcase-css')
        ╵                         ~~~~~~~~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-js@4.0.1_postcss@8.4.33/node_modules/postcss-js/async.js:1:22:
      1 │ let postcss = require('postcss')
        ╵                       ~~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-js@4.0.1_postcss@8.4.33/node_modules/postcss-js/parser.js:1:22:
      1 │ let postcss = require('postcss')
        ╵                       ~~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parse.js:3:21:
      3 │ var Parser = require("fastparse");
        ╵                      ~~~~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parseValues.js:3:21:
      3 │ var Parser = require("fastparse");
        ╵                      ~~~~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/stringifyValues.js:3:21:
      3 │ var cssesc = require("cssesc");
        ╵                      ~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-selector-parser@6.0.10/node_modules/postcss-selector-parser/dist/selectors/attribute.js:7:45:
      7 │ var _cssesc = _interopRequireDefault(require("cssesc"));
        ╵                                              ~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-selector-parser@6.0.10/node_modules/postcss-selector-parser/dist/selectors/className.js:6:45:
      6 │ var _cssesc = _interopRequireDefault(require("cssesc"));
        ╵                                              ~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-selector-parser@6.0.10/node_modules/postcss-selector-parser/dist/selectors/namespace.js:6:45:
      6 │ var _cssesc = _interopRequireDefault(require("cssesc"));
        ╵                                              ~~~~~~~~

✘ [ERROR] NPM package not found. [plugin deno-loader]

    ../../../.cache/deno/deno_esbuild/postcss-selector-parser@6.0.10/node_modules/postcss-selector-parser/dist/selectors/attribute.js:27:24:
      27 │ var deprecate = require("util-deprecate");
         ╵                         ~~~~~~~~~~~~~~~~

An error occurred during route handling or page rendering.
An error occurred during route handling or page rendering.
Error: Build failed with 13 errors:
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parse.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parseValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/stringifyValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/daisyui@4.5.0/node_modules/daisyui/package.json:2:8: ERROR: Expected ";" but found ":"
../../../.cache/deno/deno_esbuild/postcss-js@4.0.1_postcss@8.4.33/node_modules/postcss-js/async.js:1:22: ERROR: [plugin: deno-loader] NPM package not found.
...
    at failureErrorWithLog (https://deno.land/x/esbuild@v0.19.4/mod.js:1626:15)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1035:25
    at runOnEndCallbacks (https://deno.land/x/esbuild@v0.19.4/mod.js:1461:45)
    at buildResponseToResult (https://deno.land/x/esbuild@v0.19.4/mod.js:1033:7)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1062:16
    at responseCallbacks.<computed> (https://deno.land/x/esbuild@v0.19.4/mod.js:679:9)
    at handleIncomingPacket (https://deno.land/x/esbuild@v0.19.4/mod.js:739:9)
    at readFromStdout (https://deno.land/x/esbuild@v0.19.4/mod.js:655:7)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1924:11
    at eventLoopTick (ext:core/01_core.js:182:7) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}
Error: Build failed with 13 errors:
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parse.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parseValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/stringifyValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/daisyui@4.5.0/node_modules/daisyui/package.json:2:8: ERROR: Expected ";" but found ":"
../../../.cache/deno/deno_esbuild/postcss-js@4.0.1_postcss@8.4.33/node_modules/postcss-js/async.js:1:22: ERROR: [plugin: deno-loader] NPM package not found.
...
    at failureErrorWithLog (https://deno.land/x/esbuild@v0.19.4/mod.js:1626:15)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1035:25
    at runOnEndCallbacks (https://deno.land/x/esbuild@v0.19.4/mod.js:1461:45)
    at buildResponseToResult (https://deno.land/x/esbuild@v0.19.4/mod.js:1033:7)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1062:16
    at responseCallbacks.<computed> (https://deno.land/x/esbuild@v0.19.4/mod.js:679:9)
    at handleIncomingPacket (https://deno.land/x/esbuild@v0.19.4/mod.js:739:9)
    at readFromStdout (https://deno.land/x/esbuild@v0.19.4/mod.js:655:7)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1924:11
    at eventLoopTick (ext:core/01_core.js:182:7) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}
Error: Build failed with 13 errors:
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parse.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/parseValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/css-selector-tokenizer@0.8.0/node_modules/css-selector-tokenizer/lib/stringifyValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/daisyui@4.5.0/node_modules/daisyui/package.json:2:8: ERROR: Expected ";" but found ":"
../../../.cache/deno/deno_esbuild/postcss-js@4.0.1_postcss@8.4.33/node_modules/postcss-js/async.js:1:22: ERROR: [plugin: deno-loader] NPM package not found.
...
    at failureErrorWithLog (https://deno.land/x/esbuild@v0.19.4/mod.js:1626:15)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1035:25
    at runOnEndCallbacks (https://deno.land/x/esbuild@v0.19.4/mod.js:1461:45)
    at buildResponseToResult (https://deno.land/x/esbuild@v0.19.4/mod.js:1033:7)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1062:16
    at responseCallbacks.<computed> (https://deno.land/x/esbuild@v0.19.4/mod.js:679:9)
    at handleIncomingPacket (https://deno.land/x/esbuild@v0.19.4/mod.js:739:9)
    at readFromStdout (https://deno.land/x/esbuild@v0.19.4/mod.js:655:7)
    at https://deno.land/x/esbuild@v0.19.4/mod.js:1924:11
    at eventLoopTick (ext:core/01_core.js:182:7) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Environment:

Fresh Framework version: 1.6.1
DaisyUI version: 4.5.0
Deno version: 1.39.2
theme-change version: 2.0.2
Operating System: Debian 12 running in VM on Chromebook

Additional Information:

The issue began after implementing theme changing in DaisyUI. Simply adding the libraries and specifying a default theme just worked with no issue. Once I added the ability to switch themes these errors arose.

Dave-Wagner commented 5 months ago

I've updated the dependencies with the same issue:

"imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.1/",
    "preact": "https://esm.sh/preact@10.19.3",
    "preact/": "https://esm.sh/preact@10.19.3/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "tailwindcss": "npm:tailwindcss@3.4.1",
    "tailwindcss/": "npm:/tailwindcss@3.4.1/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.1/plugin.js",
    "tailwindcss/typography": "npm:@tailwindcss/typography",
    "tailwindcss/container-queries": "npm:@tailwindcss/container-queries",
    "daisyui": "npm:daisyui@4.5.0",
    "theme-change": "npm:theme-change@2.5.0",
    "$std/": "https://deno.land/std@0.212.0/"
  },

Dave-Wagner commented 3 months ago

I've taken another stab at this and found with recent updates DaisyUI appears to work but I am still getting one type error in tailwind.config.ts.

tailwind.config.ts

import { type Config } from "tailwindcss";
import daisyui from "daisyui";

export default {
  content: [
    "{routes,islands,components}/**/*.{ts,tsx}",
  ],
  plugins: [daisyui],
} satisfies Config;

Error

[{ "resource": "/home/***/Dev/deno/fresh/tube-insights/tailwind.config.ts", "owner": "deno", "code": "2322", "severity": 8, "message": "Type 'typeof import(\"file:///home/cptnwinky/Dev/deno/fresh/tube-insights/node_modules/.deno/daisyui@4.10.1/node_modules/daisyui/src/index\")' is not assignable to type 'PluginCreator | { handler: PluginCreator; config?: Partial<Config> | undefined; } | { (options: any): { handler: PluginCreator; config?: Partial<...> | undefined; }; __isOptionsFunction: true; } | undefined'.", "source": "deno-ts", "startLineNumber": 8, "startColumn": 13, "endLineNumber": 8, "endColumn": 20 }]

Version numbers

"imports": {
    "$fresh/": "https://deno.land/x/fresh@1.6.8/",
    "preact": "https://esm.sh/preact@10.19.6",
    "preact/": "https://esm.sh/preact@10.19.6/",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
    "tailwindcss": "npm:tailwindcss@3.4.3",
    "tailwindcss/": "npm:/tailwindcss@3.4.3/",
    "tailwindcss/plugin": "npm:/tailwindcss@3.4.3/plugin.js",
    "$std/": "https://deno.land/std@0.216.0/",
    "daisyui": "npm:daisyui@4.10.1"
  },

cosmoswafer commented 3 weeks ago

I can build a simple app without any errors using the latest version from npm which is 4.12.2. My deno version is 1.43.6.

Dave-Wagner commented 3 weeks ago

This is awesome, I have the weekend off but if no one else gets to it before I do I'll confirm the results.

denoland / fresh