fresh icon indicating copy to clipboard operation
fresh copied to clipboard

Error when using @fresh/plugin-tailwind in a Deno Fresh project

Open leongobbs opened this issue 1 year ago • 1 comments

Problem: Deployment Failure on Deno Deploy with Module not found Error

Description

When deploying my project using Deno Deploy, the deployment process fails with the following error:

Run deno task build
Task build deno run -A dev.ts build
error: Module not found "file:///home/runner/work/frontend/frontend/dev.ts".
Error: Process completed with exit code 1.

dev.ts File Content

Here is the content of my dev.ts file:

#!/usr/bin/env -S deno run -A --watch=static/,routes/

import { Builder } from "../src/dev/mod.ts";
import { app } from "./main.ts";
import { tailwind } from "@fresh/plugin-tailwind"; // Local path

const builder = new Builder({ target: "safari12" });
tailwind(builder, app, {}); // Connect Tailwind

if (Deno.args.includes("build")) {
  await builder.build(app);
} else {
  await builder.listen(app);
}

Observations

  • The issue occurs only during deployment on Deno Deploy.
  • Locally, the project runs fine, even with the following type errors reported in dev.ts:
Error 1: Using @fresh/plugin-tailwind from JSR

When @fresh/plugin-tailwind is imported using:

"@fresh/plugin-tailwind": "jsr:@fresh/plugin-tailwind@^0.0.1-alpha.7"

I get the following error at tailwind(builder, app, {}):

Argument of type 'import("file:///.../src/dev/builder").Builder' is not assignable to parameter of type 'import("https://jsr.io/@fresh/core/2.0.0-alpha.27/src/dev/builder").Builder'.
Property '#transformer' in type 'Builder' refers to a different member that cannot be accessed from within type 'Builder'.deno-ts(2345)
Error 2: Using Local @fresh/plugin-tailwind

When @fresh/plugin-tailwind is imported locally:

"@fresh/plugin-tailwind": "../plugin-tailwindcss/src/mod.ts"

I get the following error at tailwind(builder, app, {}):

Argument of type 'import("file:///.../src/app").App<unknown>' is not assignable to parameter of type 'import("https://jsr.io/@fresh/core/2.0.0-alpha.27/src/app").App<unknown>'.
Property '#router' in type 'App' refers to a different member that cannot be accessed from within type 'App'.deno-ts(2345)

Expected Behavior

  • The project should deploy successfully to Deno Deploy without the Module not found error.
  • The type errors, if related, should either not occur or provide clear resolution steps.

Additional Notes

  • The dev.ts file and project structure work perfectly on my local machine, even with the type errors described.
  • The errors seem to be related to type incompatibilities between the local and deployed versions of @fresh/plugin-tailwind or other dependencies.

Environment

  • Deno Version: [deno 2.1.4]
  • Fresh Version: 2.0.0-alpha.27
  • Plugin-Tailwind Version: 0.0.1-alpha.7 (via JSR) or local ../plugin-tailwindcss/src/mod.ts
  • Operating System: [win 11]

Possible Root Cause

The errors may be caused by mismatched versions or type definitions between the locally imported modules and the versions resolved by Deno Deploy. The differences in how Deno handles module resolution locally versus in a deployment environment could also be contributing to the problem.

Request

Please provide guidance or suggestions to resolve:

  1. The Module not found error during deployment.
  2. The type incompatibility errors, if related.

leongobbs avatar Jan 07 '25 02:01 leongobbs

The reason for the deployment error was different, type mismatch errors do not affect the deployment, everything works on production and locally. But the Error 1 and Error 2 themselves remain.

leongobbs avatar Jan 07 '25 11:01 leongobbs

This is resolved in newer Fresh versions and newer versions of the tailwind plugin. It doesn't need to receive app anymore.

marvinhagemeister avatar Aug 05 '25 21:08 marvinhagemeister