Check out this code snippet:
// lib/customFunction.ts
export function customFunction() {
console.log("customFunction");
}
// pages/homepage.tsx
import { GetServerSideProps } from "next";
// works
import { exampleFunction } from "../lib/exampleFile.js";
// error
import { customFunction } from "../lib/customFunction.js";
export const getServerSideProps: GetServerSideProps = async ({
req,
}): Promise<{ props: {} }> => {
exampleFunction();
customFunction();
return { props: {} };
};
export default function Homepage(props: {}) {
return <div>Hello World</div>;
}
When running this code, I encounter the following issue:
Module not found: Can't resolve '../lib/customFunction.js' in '/Users/USER/Documents/software/nextjs-test/pages'
I am puzzled by this. Shouldn't lib/customFunction.ts compile to lib/customFunction.js, and the import should work correctly? I guess my understanding of how TypeScript handles imports is limited.
You can find all the code at: https://github.com/arcticmatt/nextjs-test