TL;DR - why do imports return undefined? Especially for native Node modules like path?
I have a very small test application, built with Vite, that has a single endpoint in the /api directory. I created this just to play around with Vite + Vercel.
I have only 2 module imports for my endpoint - path and fs-extra. Both are returning as undefined. I was getting cannot read join of undefined errors with the path module, so I wrapped everything in a try/catch just to see if the endpoint responds. It does. See my code below.
import type {VercelRequest, VercelResponse} from '#vercel/node'
import path from 'node:path' // I've also tried 'path'
import fs from 'fs-extra'
export default function handler(req: VercelRequest, res: VercelResponse) {
// Both of these log 'undefined' on my Vercel dashboard for function logs.
console.log('path module:', path)
console.log('fs module:', fs)
try {
// https://vercel.com/guides/how-can-i-use-files-in-serverless-functions
const pathFromProjectRootToFile = '/api/usersData.json'
const usersDataFilePath = path.join( // THIS IS WHERE THE ERROR HAPPENS 🙃
process.cwd(),
pathFromProjectRootToFile
)
const usersData = fs.readJSONSync(usersDataFilePath)
res.json({users: usersData})
} catch (e) {
res.json({error: errorToObject(e as Error)})
}
}
function errorToObject(err?: Error): Record<string, string> | null {
if (!err || !(err instanceof Error)) return null
const obj: Record<string, string> = {}
Object.getOwnPropertyNames(err).forEach(prop => {
const value = err[prop as keyof Error]
if (typeof value !== 'string') return
obj[prop] = value
})
return obj
}
As an aside, instead of node:path I also tried just path, but same thing - undefined. And I do have fs-extra as a dependency in my package.json.
When deploying a Vite app on Vercel and utilizing the /api directory for a back end with Serverless Functions, Node modules need to be imported via require, not import. The import syntax works for types and local modules. See this answer (and conversation) in Vercel's community discussions.
import type {VercelRequest, VercelResponse} from '#vercel/node'
import localModule from '../myLocalModule'
const path = require('path')
const fsOriginal = require('fs')
const fs = require('fs-extra')
// Rest of the file here...
Related
I am building a gql server application using apollo server.
When I try to load my .graphql files using import { loadFilesSync } from '#graphql-tools/load-files', this works very well, but when I load my resolver files, i get an error
node:internal/errors:464
ErrorCaptureStackTrace(err);
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /userpath/index.js from /userpath/server-gql/noop.js not supported.
Instead change the require of index.js in /userpath/server-gql/noop.js to a dynamic import() which is available in all CommonJS modules.
at Object.newLoader [as .js] (/userpath/server-gql/node_modules/pirates/lib/index.js:141:7)
at file:///userpath/server-gql/node_modules/#graphql-tools/load-files/esm/index.js:104:33
at Array.map (<anonymous>)
at loadFilesSync (file:///userpath/server-gql/node_modules/#graphql-tools/load-files/esm/index.js:95:10)
at file:///userpath/server-gql/schema.js:20:24
at async Promise.all (index 0) {
code: 'ERR_REQUIRE_ESM'
}
I am using "type": "module" in my package.json.
Here's my code snippet for where i get the error
import path from 'path'
import { fileURLToPath } from 'url'
import { loadFilesSync } from '#graphql-tools/load-files'
import { mergeTypeDefs, mergeResolvers } from '#graphql-tools/merge'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const typesArray = loadFilesSync(path.join(__dirname, '.'), {
recursive: true,
extensions: ['graphql'],
})
const resolversArray = loadFilesSync(path.join(__dirname, './graphql/**/*.resolvers.js'), {
recursive: true,
extensions: ['js'],
})
const newResolversArray = resolversArray.slice(1)
export const typeDefs = mergeTypeDefs(typesArray)
export const resolvers = mergeResolvers(newResolversArray)
I think the error occurs in the resolvers array.
I was running into a very similar issue and found this workaround/solution worked for me: https://github.com/ardatan/graphql-tools/issues/1750#issuecomment-655828240
I had to modify that answer a bit to get it working in my codebase...below is what my own resolverFiles snippet now looks like (I'm not 100% sure what your import/naming conventions look like, or I'd try to apply this to your code snippet).
I have a mixed, nested directory schema/ that contains resolver files of the format SomethingResolvers.ts. Each of these look like the following (I'm using codegen):
import { Resolvers } from "../../generated/graphql";
export const resolvers: Resolvers = { /* resolver implementations */ };
const resolverFiles = await loadFiles(
path.join(__dirname, "**/*Resolvers.js"),
{
requireMethod: async (path) => {
const module = await import(pathToFileURL(path).toString());
return module["resolvers"];
},
recursive: true,
}
);
I keep getting this error even thought I am in a asynchronous function...
import { dirname, join } from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
export async function importer(client) {
const dir = join(__dirname, "../../commands/")
const commandCategories = readdirSync(dir)
for (let cat of commandCategories) {
const commandFiles = readdirSync(join(dir, cat)).filter(files => files.endsWith(".js"));
for (const file of commandFiles) {
const command = await import(join(dir, cat, file));
client.commands.set(command.default.name, command.default);
}
}
}
Is there something I am missing? I definitely need the await part in import in const command. It imports a few commands then it drops the mentioned error in title on the console output.
Thanks.
The problem isn't the importer code, it's in one of the modules you attempted to import (and import crashes on parsing it)!
It's a bug in node that such a non-helpful error is thrown when this syntax error is encountered during dynamic import.
Try logging the filenames before importing them so you can see at which file it crashes. Once you know which file failed to parse, do a static import of it for testing, so you can get a proper error that tells you which line has the issue.
I have the following import mongo from "mongodb"; I would like to avoid using npm and instead use unpkg.com like this import mongo from "https://unpkg.com/mongodb";. However, when I run I get...
...#penguin:~/...$ node --harmony test.mjs node:internal/process/esm_loader:74
internalBinding('errors').triggerUncaughtException(
^
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol 'https:'
at new NodeError (node:internal/errors:328:5)
at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:825:11)
at Loader.resolve (node:internal/modules/esm/loader:86:40)
at Loader.getModuleJob (node:internal/modules/esm/loader:230:28)
at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:56:40)
at link (node:internal/modules/esm/module_job:55:36) {
code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'
}
Because it uses the term default module loader I was wondering if there was an alternative ESM loader I could use.
Node will eventually support ESM URL imports. This feature is currently available under a CLI flag --experimental-network-imports. It doesn't ship with public releases yet (as of Node 18.0.0), so you will need to build Node from source for this as of current. See https://nodejs.org/api/esm.html#https-and-http-imports
In the meanwhile, Node has experimental support for module loaders and even shows a HTTPS loader as an example. See https://nodejs.org/api/esm.html#esm_https_loader
// https-loader.mjs
import { get } from 'https';
export function resolve(specifier, context, defaultResolve) {
const { parentURL = null } = context;
// Normally Node.js would error on specifiers starting with 'https://', so
// this hook intercepts them and converts them into absolute URLs to be
// passed along to the later hooks below.
if (specifier.startsWith('https://')) {
return {
url: specifier
};
} else if (parentURL && parentURL.startsWith('https://')) {
return {
url: new URL(specifier, parentURL).href
};
}
// Let Node.js handle all other specifiers.
return defaultResolve(specifier, context, defaultResolve);
}
export function load(url, context, defaultLoad) {
// For JavaScript to be loaded over the network, we need to fetch and
// return it.
if (url.startsWith('https://')) {
return new Promise((resolve, reject) => {
get(url, (res) => {
let data = '';
res.on('data', (chunk) => data += chunk);
res.on('end', () => resolve({
// This example assumes all network-provided JavaScript is ES module
// code.
format: 'module',
source: data,
}));
}).on('error', (err) => reject(err));
});
}
// Let Node.js handle all other URLs.
return defaultLoad(url, context, defaultLoad);
}
Use like so:
node --experimental-loader ./https-loader.mjs ./main.mjs
I am working on creating a discord bot in TypeScript. I wanted to create a generic command disbatcher and here is my work so far:
app.ts:
import * as Discord from 'discord.js';
import * as config from '../config'
import * as commands from './Commands/index'
const token : string = config.Token;
const _client = new Discord.Client();
_client.on('message', (msg) => {
let args : Array<string> = msg.content.split(' ')
let command : string = args.shift() || " ";
if(!command.startsWith("!")) return;
else{
commands[`${command.toLower().substring(1)}`]
}
})
Commands/Index.ts
export {default as ping} from './ping';
export {default as prong} from './prong';
Ping.ts : same structure for all commands
import { Message } from "discord.js";
export default {
name : 'ping',
description: 'Ping!',
execute(message: Message, args: Array<string>){
message.channel.send('Pong.');
}
}
When indexing the commands import I can successfuly call the right execute function using this:
commands['pong'].execute()
however, when trying to dynamically index it like this:
commands[command].execute()
I recieve the following error:
Element implicitly has an 'any' type because expression of type
'string' can't be used to index type 'typeof
import("c:/Users/alexs/Desktop/Discord Bot/src/Commands/index")'. No
index signature with a parameter of type 'string' was found on type
'typeof import("c:/Users/alexs/Desktop/Discord
Bot/src/Commands/index")'
Is there anyway I can typecast the command import as some kind of object or collection? If not, is there a way I could create some kind of accssesor to make this work? I am newer to typescript and am curious what is possible.
I suggest a different approach for your commands, this approach fixes 2 things:
You don't forget to export files properly
You get type safe commands
Let's first create a interface for your commands, this interface describes the metadata, add as many as you want
export interface Command {
name: string
description: string
// Making `args` optional
execute(message: Message, args?: string[]) => any
}
Now that you have a shape for your command, let's make sure all your commands have the right shape
import { Command } from "./types"
// This will complain if you don't provide the right types for each property
const command: Command = {
name: "ping",
description: "Ping!",
execute(message: Message, args: string[]) => {
message.channel.send("Pong")
}
}
export = command
The next part is loading your commands, discord.js has glob as a dependency which can help you read files in a directory easily, let's use some utilities so we can have nice async / await usage
import glob from "glob" // included by discord.js
import { promisify } from "util" // Included by default
import { Command } from "./types"
// Make `glob` return a promise
const globPromise = promisify(glob)
const commands: Command = []
client.once("ready", async () => {
// Load all JavaScript / TypeScript files so it works properly after compiling
// Replace `test` with "await globPromise(`${__dirname}/commands/*.{.js,.ts}`)"
// I just did this to fix SO's syntax highlighting!
const commandFiles = test
for (const file of commandFiles) {
// I am not sure if this works, you could go for require(file) as well
const command = await import(file) as Command
commands.push(command)
}
})
const prefix = "!"
client.on("message", message => {
// Prevent the bot from replying to itself or other bots
if (message.author.bot) {
return
}
const [commandName, ...args] = message.content
.slice(prefix.length)
.split(/ +/)
const command = commands.find(c => c.name === commandName)
if (command) {
command.execute(message, args)
}
})
I hope this gives you some good starting point and shows you the power of TypeScript
You could import the type and then cast it like this
commands[command as Type].execute();
I'm using the proxyquire library, which mocks packages on import.
I'm creating my own proxyquire function, which stubs a variety of packages I use regularly and want to stub regularly (meteor packages, which have a special import syntax):
// myProxyquire.js
import proxyquire from 'proxyquire';
const importsToStub = {
'meteor/meteor': { Meteor: { defer: () => {} } },
};
const myProxyquire = filePath => proxyquire(filePath, importsToStub);
export default myProxyquire;
Now I want to write a test of a file which uses one of these packages:
// src/foo.js
import { Meteor } from 'meteor/meteor'; // This import should be stubbed
export const foo = () => {
Meteor.defer(() => console.log('hi')); // This call should be stubbed
return 'bar';
};
And finally I test it like this:
// src/foo.test.js
import myProxyquire from '../myProxyquire';
// This should be looking in the `src` folder
const { foo } = myProxyquire('./foo'); // error: ENOENT: no such file
describe('foo', () => {
it("should return 'bar'", () => {
expect(foo()).to.equal('bar');
});
});
Note that my last 2 files are nested inside a subfolder src. So when I try to run this test, I get an error saying that the module ./foo couldn't be found, as it is being looked for in the "root" directory, where the myProxyquire.js file is, not the src directory as expected.
You might be able to work around that (expected) behaviour by using a module like caller-path to determine from which file myProxyquire was called, and resolving the passed path relative to that file:
'use strict'; // this line is important and should not be removed
const callerPath = require('caller-path');
const { dirname, resolve } = require('path');
module.exports.default = path => require(resolve(dirname(callerPath()), path));
However, I have no idea of this works with import (and, presumably, transpilers).