CabalDAO•2mo ago

Errors importing dayjs plugins

Hi, I have a file in convex/utils/dateToMs that I need to parse incoming dates in different formats. It requires the use of dayjs and some of it's plugins. The code seems to push successfully when just importing dayjs but the plugins are throwing an error:

import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

// Extend dayjs with needed plugins
dayjs.extend(customParseFormat);
dayjs.extend(utc);
dayjs.extend(timezone);

...

import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";

// Extend dayjs with needed plugins
dayjs.extend(customParseFormat);
dayjs.extend(utc);
dayjs.extend(timezone);

...

Error:

Loading the pushed modules encountered the following
    error:
Uncaught Failed to analyze actions/profility.js: Cannot find module '/tmp/source/943f1a24-5f23-4e42-bd13-bb41e56fdfe8/node_modules/dayjs/plugin/customParseFormat' imported from /tmp/source/943f1a24-5f23-4e42-bd13-bb41e56fdfe8/modules/actions/profility.js
Did you mean to import dayjs/plugin/customParseFormat.js?

Loading the pushed modules encountered the following
    error:
Uncaught Failed to analyze actions/profility.js: Cannot find module '/tmp/source/943f1a24-5f23-4e42-bd13-bb41e56fdfe8/node_modules/dayjs/plugin/customParseFormat' imported from /tmp/source/943f1a24-5f23-4e42-bd13-bb41e56fdfe8/modules/actions/profility.js
Did you mean to import dayjs/plugin/customParseFormat.js?

I've also tried in convex.json to explicitly specify these packages instead of just externalPackages: [*] like so:

{
  "node": {
    "externalPackages": [
      "*",
      "dayjs",
      "dayjs/plugin/customParseFormat",
      "dayjs/plugin/utc",
      "dayjs/plugin/timezone"
    ]
  }
}

{
  "node": {
    "externalPackages": [
      "*",
      "dayjs",
      "dayjs/plugin/customParseFormat",
      "dayjs/plugin/utc",
      "dayjs/plugin/timezone"
    ]
  }
}

But to no avail.

12 Replies

Convex Bot•2mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

CabalDAOOP•2mo ago

Hmm turns out creating the convex.json file is what messed it up, seems to work ok without it Am I making a mistake here?

erquhart•2mo ago

The asterisk already marks everything as external, so the others weren't doing anything. Not sure if that's part of your problem or not, though. But if it's working without convex.json, that means you can bundle all of the dayjs dependencies just fine, so no need to mark external.

CabalDAOOP•2mo ago

Thanks very much Totally separate question, if I've defined a http route and i want to call it from a client browser, i see I can do:

const httpClient = new ConvexHttpClient(
      process.env.NEXT_PUBLIC_CONVEX_ACTIONS_URL!
    );

const httpClient = new ConvexHttpClient(
      process.env.NEXT_PUBLIC_CONVEX_ACTIONS_URL!
    );

But then how do I use httpClient to call the action at the route I've defined? Do i run httpClient.action or httpClient.query and pass a url as the parameter?

erquhart•2mo ago

You don't need to use an http client for that, your http actions are a rest api. You can use fetch to access them at your Convex site url

CabalDAOOP•2mo ago

ah ok so what's the use case for httpClient?

ballingt•2mo ago

that's for calling normal api.messages.send API endpoints and getting typed args and responses, like Convex query functions, mutation functions, and action functions. HTTP Actions can be called with normal fetch() and don't get typing, they're just Request and Response.

CabalDAOOP•2mo ago

Also in my http endpoint, it seems that if I throw a new ConvexError then my cors rules will fail since I'm not returing a new Response(null, {headers: ...}) with a cors object. How can I handle throwing ConvexErrors in an http endpoint that will include cors?

ballingt•2mo ago

You'll need to catch the ConvexError and return whatever error Resonse object with appropriate headers. hm suggests a feature for setting default headres or something. Hono handles this, some folks use Hono inside HTTP actions

CabalDAOOP•2mo ago

got it thank you very much! ok I am able to make the fetch request but any time I try to pass a request with headers Authentication: Bearer {token} I get a cors error even though I'm making sure to set cors in any return from the endpoint Here's the cors I'm always setting for the response headers

const cors = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "*",
  "Access-Control-Allow-Headers": "*",
};

const cors = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "*",
  "Access-Control-Allow-Headers": "*",
};

is this because i have to set the same route but for preflight? yea i added preflight controls and it works. Thanks!!

ian•2w ago

Hey this is very late, but I was deep in the CORS spec last night working on a corsRouter that wraps httpRouter. The problem you were seeing I believe is that to pass credentials, you need Access-Control-Allow-Credentials: true but in order to do that, you can't return *: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#credentialed_requests_and_wildcards You can use my helper and it will automatically reply with the origin that made the request (when you have * or a matching domain), the methods that you defined, and a default set of headers you can extend if you need. It's out in alpha, and will launch in the next patch release of convex-helpers `https://github.com/get-convex/convex-helpers/pull/197

GitHub

add cors helper by ianmacartney · Pull Request #197 · get-convex/co...

a sketch of what it could look like w.r.t. composition vs. subclassing By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the ter...

MDN Web Docs

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources. CORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in ord...

sshader•2w ago

(https://httptoolkit.com/will-it-cors/ is also a pretty good resource)

Will It CORS? - a CORS debugging tool that actually works.

Literally nobody understands CORS, except this one magic web page

Errors importing dayjs plugins

Did you find this page helpful?