CODEWITHSUNDEEP
javascriptreactjstypescriptnext.js
Kiritushka
Kiritushka

Reputation: 1140

How to fix "You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

I use next.js. When exporting a type in a file index.ts in a third party package an error occurs.

Module parse failed: Unexpected token (23:7)
    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 type { Validate } from './src/nullable'

Upvotes: 14

Views: 34944

Answers (2)

Smart Coder
Smart Coder

Reputation: 1748

in package.json, assuming the following dependency is added

"@yourproject/your-project": "file:../your-project",

then in next.config, add transpilePackages: ['@yourproject/your-project'],.  This allows the loader to work directly on .ts files.

transpilePackages: ['@yourproject/your-project'],
webpack: (config) => {
       config.resolve.extensionAlias = {
      ".js": [".ts", ".tsx", ".js", ".jsx"],
      ".mjs": [".mts", ".mjs"],
      ".cjs": [".cts", ".cjs"],
    };
    return config;
  },

Upvotes: 17

Darryl RN
Darryl RN

Reputation: 8238

This issue occurs when you have fewer configurations than what you want to use.

In your case, you are trying to use Typescript on your NextJS project. Unfortunately, your Webpack configuration doesn't have a Typescript file loader.

There are two ways to solve this issue:

  • Use NextJS Typescript project start example from here
  • Add TS file loader on your Webpack configuration (reference in here)

Upvotes: 4

Related Questions