Skip to content

Absolute import paths in Vercel production.  #972

Open
@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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions