Skip to content

Absolute import paths in Vercel production.  #972

@mrrobot16

Description

@mrrobot16

Hello people of Vercel community!

Hope you all doing great :)

I am creating this issue to ask if it is actually possible to do absolute imports in production mode.

I was able to do it in: vercel dev.

My project structure:

├── .vercel/
├── api/
│ ├── health/
│ │ ├── [step].ts
│ │ ├── health.ts
│ │ └── test.ts
├── dist/
├── lib/
│ ├── utils/
│ │ └── index.ts
│ ├── utils-v2/
│ │ └── index.ts
├── node_modules/
├── public/
│ └── .gitignore
├── .gitignore
├── middleware.ts
├── package.json
├── README.md
├── tsconfig.json
├── vercel.json
├── yarn.lock

Key directories and files:

  • api/health/: Contains API route files, including [step].ts, health.ts, and test.ts.
  • lib/: Holds utility files under utils and utils-v2 directories.
  • middleware.ts: Middleware file for request handling.

My tsconfig.json:

{
	"compilerOptions": {
		"target": "esnext",
		"module": "esnext",
		"moduleResolution": "node",
		"outDir": "./dist",
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"strict": true,
		"skipLibCheck": true,
		"lib": [
			"ESNext",
			"ESNext.AsyncIterable",
			"dom",
			"es2020"
		],
		"resolveJsonModule": true,
		"isolatedModules": true,
		"noEmit": true,
		"jsx": "preserve",
		"incremental": true,
		"baseUrl": "./lib", // This enables absolute imports from 'src'
		"paths": {
			"@/lib/*": [
				"*"
			] // Allows '@' to map to anything in 'src'
		}
	},
	"include": [
		"lib/**/*", // Include everything inside 'src'
		"api/**/*" // Include the API files in root
	],
	"exclude": [
		"node_modules",
		"**/*.test.ts"
	]
}

My code

import axios from 'axios';

import { createGreeting } from '@/lib/utils';
import { createGreetingV2 } from '@/lib/utils-v2';

export const config = {
  runtime: 'edge',
};

export default async function handler(req: Request) {
	const url = new URL(req.url)
	const baseUrl = `${url.protocol}//${url.host}`;
	const test = (await axios.get(`${baseUrl}/api/test`))

	const data = {
		message: 'Hello world!',
		greeting: createGreeting('Hector'),
		greetingV2: createGreetingV2('John'),
		test: test.data,
	};

	const headers = {
	'Content-Type': 'application/json',
	};

	return new Response(JSON.stringify(data), { headers });}

my vercel.json

{
	"functions": {
	  "api/**/*.ts": {
		"memory": 3009,
		"maxDuration": 30
	  }
	}
  }
  

My error:

Error: The Edge Function "api/health/[step]" is referencing unsupported modules:
	- __vc__ns__/0/api/health/[step].js: @/lib/utils, @/lib/utils-v2

My repo: https://github.com/mrrobot16/edge-api-route

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions