Build Errors in Fresh Framework with DaisyUI Integration

Dave-Wagner commented 10 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 10 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 7 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 5 months 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 5 months 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