Webpack import issue (need an appropriate loader to handle this file type)

Question

Hello there.

I have this issue importing a file out of the main directory where nextjs is (meaning I import as "../../shared"). I get the following error.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

The strange thing is, when I move the file inside the nextjs dir, there's no issue with it and it works as normal. This is using the pages dir.

For context, we're using connectrpc, and types from the backend code (with is go) are generated in a shared directory. We already have a react project setup that reads them correctly, but we're trying to switch it over to nextjs, and it seems to have issues importing it when it's not in the same directory (or subdir) as the root directory of the project.

Any help is appreciated, and if any other details are required, let me know.

Red wood ant · Answer

// has no issues
import { PublicProfileService } from "../gen/connectrpc/eliza/v1/profile_connect";

// source of error
import { PublicProfileService as SharedPublicProfileService } from "../../shared/ts/connect/galatea/v1/profile_connect";

export const getServerSideProps = async () => {
    const transport = createConnectTransport({
        baseUrl: "http://localhost:8080",
    });

// this works
    const profileClient = createPromiseClient(PublicProfileService, transport);

// this is prevented from working
    const sharedProfileClient = createPromiseClient(
        SharedPublicProfileService,
        transport,
    );

// ...........
}The code

Webpack import issue (need an appropriate loader to handle this file type)

1 Reply