Error importing private repo into next project

I am trying to import a private github repo to use it on a React/Next project, however it throws an error saying that there are currently no loaders configured, I don't think that is actually the problem I imported other .TS files on this project, just not directly from a repository, so I suspect I'm missing something when importing.

The repository is very simple, all it has is a README and the Comms.ts file.

Here is the repo on my package.json:

"my-library": "git+https://ghp_mYpErsOnaLAcCeSSToKenOnGithUb1234567:[email protected]/My-Repo/my-library.git"

Here is how I am importing it on my project:

import * as Comms from "my-library"

The error:

./node_modules/my-library/Comms.ts
Module parse failed: Unexpected token (21:50)
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
|
|
> export const FetchTokenIdsFromWallet=async(account: string, collectionAddr: string, chain: string)=>{
|   
|   const requestString = 'https://deep-index.moralis.io/api/v2/' + account + '/nft/' + collectionAddr + '?chain=' + chain + '&format=decimal'

Solution

Turns out the problem was indeed on the loader. Check here to see how to add the loader, basically add the loader with

yarn add ts-loader --dev

Then add the webpack to your next.config.js:

module.exports = {
  reactStrictMode: true,
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.module.rules.push({
      test: /\.(ts)x?$/, // Just `tsx?` file only
      use: [
        // options.defaultLoaders.babel, I don't think it's necessary to have this loader too
        {
          loader: "ts-loader",
          options: {
            transpileOnly: true,
            experimentalWatchApi: true,
            onlyCompileBundledFiles: true,
          },
        },
      ],
    });
    return config
  }
}

If after this you get an error saying something like _your_module__WEBPACK_IMPORTED_MODULE_2__.default.yourFunc is not a function check if you are exporting your functions in the correct way, like this. If you are exporting them the right way, try running yarn upgrade

Relevant docs:

webpack

custom webpack for next.js