Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Absolute import paths in Vercel production. #972

Open
mrrobot16 opened this issue Sep 17, 2024 · 0 comments
Open

Absolute import paths in Vercel production. #972

mrrobot16 opened this issue Sep 17, 2024 · 0 comments

Comments

@mrrobot16
Copy link

mrrobot16 commented Sep 17, 2024

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

@mrrobot16 mrrobot16 changed the title Absolute import paths on Vercel production. Absolute import paths in Vercel production. Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant