fresh
fresh copied to clipboard
Published
20 hours ago •
denoland
denoland
Build Errors in Fresh Framework with DaisyUI Integration
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/[email protected][email protected]/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/[email protected]/node_modules/daisyui/package.json:2:8:
2 │ "name": "daisyui",
│ ^
╵ ;
✘ [ERROR] NPM package not found. [plugin deno-loader]
../../../.cache/deno/deno_esbuild/[email protected][email protected]/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/[email protected][email protected]/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/[email protected][email protected]/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/[email protected][email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/node_modules/css-selector-tokenizer/lib/parse.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/css-selector-tokenizer/lib/parseValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/css-selector-tokenizer/lib/stringifyValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/daisyui/package.json:2:8: ERROR: Expected ";" but found ":"
../../../.cache/deno/deno_esbuild/[email protected][email protected]/node_modules/postcss-js/async.js:1:22: ERROR: [plugin: deno-loader] NPM package not found.
...
at failureErrorWithLog (https://deno.land/x/[email protected]/mod.js:1626:15)
at https://deno.land/x/[email protected]/mod.js:1035:25
at runOnEndCallbacks (https://deno.land/x/[email protected]/mod.js:1461:45)
at buildResponseToResult (https://deno.land/x/[email protected]/mod.js:1033:7)
at https://deno.land/x/[email protected]/mod.js:1062:16
at responseCallbacks.<computed> (https://deno.land/x/[email protected]/mod.js:679:9)
at handleIncomingPacket (https://deno.land/x/[email protected]/mod.js:739:9)
at readFromStdout (https://deno.land/x/[email protected]/mod.js:655:7)
at https://deno.land/x/[email protected]/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/[email protected]/node_modules/css-selector-tokenizer/lib/parse.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/css-selector-tokenizer/lib/parseValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/css-selector-tokenizer/lib/stringifyValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/daisyui/package.json:2:8: ERROR: Expected ";" but found ":"
../../../.cache/deno/deno_esbuild/[email protected][email protected]/node_modules/postcss-js/async.js:1:22: ERROR: [plugin: deno-loader] NPM package not found.
...
at failureErrorWithLog (https://deno.land/x/[email protected]/mod.js:1626:15)
at https://deno.land/x/[email protected]/mod.js:1035:25
at runOnEndCallbacks (https://deno.land/x/[email protected]/mod.js:1461:45)
at buildResponseToResult (https://deno.land/x/[email protected]/mod.js:1033:7)
at https://deno.land/x/[email protected]/mod.js:1062:16
at responseCallbacks.<computed> (https://deno.land/x/[email protected]/mod.js:679:9)
at handleIncomingPacket (https://deno.land/x/[email protected]/mod.js:739:9)
at readFromStdout (https://deno.land/x/[email protected]/mod.js:655:7)
at https://deno.land/x/[email protected]/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/[email protected]/node_modules/css-selector-tokenizer/lib/parse.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/css-selector-tokenizer/lib/parseValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/css-selector-tokenizer/lib/stringifyValues.js:3:21: ERROR: [plugin: deno-loader] NPM package not found.
../../../.cache/deno/deno_esbuild/[email protected]/node_modules/daisyui/package.json:2:8: ERROR: Expected ";" but found ":"
../../../.cache/deno/deno_esbuild/[email protected][email protected]/node_modules/postcss-js/async.js:1:22: ERROR: [plugin: deno-loader] NPM package not found.
...
at failureErrorWithLog (https://deno.land/x/[email protected]/mod.js:1626:15)
at https://deno.land/x/[email protected]/mod.js:1035:25
at runOnEndCallbacks (https://deno.land/x/[email protected]/mod.js:1461:45)
at buildResponseToResult (https://deno.land/x/[email protected]/mod.js:1033:7)
at https://deno.land/x/[email protected]/mod.js:1062:16
at responseCallbacks.<computed> (https://deno.land/x/[email protected]/mod.js:679:9)
at handleIncomingPacket (https://deno.land/x/[email protected]/mod.js:739:9)
at readFromStdout (https://deno.land/x/[email protected]/mod.js:655:7)
at https://deno.land/x/[email protected]/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.
I've updated the dependencies with the same issue:
"imports": {
"$fresh/": "https://deno.land/x/[email protected]/",
"preact": "https://esm.sh/[email protected]",
"preact/": "https://esm.sh/[email protected]/",
"@preact/signals": "https://esm.sh/*@preact/[email protected]",
"@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
"tailwindcss": "npm:[email protected]",
"tailwindcss/": "npm:/[email protected]/",
"tailwindcss/plugin": "npm:/[email protected]/plugin.js",
"tailwindcss/typography": "npm:@tailwindcss/typography",
"tailwindcss/container-queries": "npm:@tailwindcss/container-queries",
"daisyui": "npm:[email protected]",
"theme-change": "npm:[email protected]",
"$std/": "https://deno.land/[email protected]/"
},
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/[email protected]/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/[email protected]/",
"preact": "https://esm.sh/[email protected]",
"preact/": "https://esm.sh/[email protected]/",
"@preact/signals": "https://esm.sh/*@preact/[email protected]",
"@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
"tailwindcss": "npm:[email protected]",
"tailwindcss/": "npm:/[email protected]/",
"tailwindcss/plugin": "npm:/[email protected]/plugin.js",
"$std/": "https://deno.land/[email protected]/",
"daisyui": "npm:[email protected]"
},
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.
This is awesome, I have the weekend off but if no one else gets to it before I do I'll confirm the results.