Appropriate Loader to handle this file type – Nextjs

Right, so for some reason running npm run build works just fine in the npm module I am making.
Keep in mind it is an MUI Theming module, which also has some Nextjs components.

But, when I try to use one of the components from the module, I get this 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

webpack.config.js

var path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    publicPath: "/",
    path: path.resolve("build"),
    filename: "index.js",
    libraryTarget: "commonjs2",
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: "babel-loader" },
      {
        test: /\.css$/,
        use: "css-loader",
      },
      {
        test: /\.(jpe?g|png)$/i,
        use: ["file-loader", "webp-loader"],
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
      },
    ],
  },
  externals: {
    react: {
      commonjs: "react",
      commonjs2: "react",
      amd: "React",
      root: "React",
    },
    "react-dom": {
      commonjs: "react-dom",
      commonjs2: "react-dom",
      amd: "ReactDOM",
      root: "ReactDOM",
    },
  },
};

This is component in question

"use client";

import { useServerInsertedHTML } from "next/navigation";
import { CacheProvider } from "@emotion/react";
import { ThemeProvider } from "@mui/material/styles";
import theme from "../theme/oplTheme";
import createCache from "@emotion/cache";
import CssBaseline from "@mui/material/CssBaseline";
import React from "react";

// This implementation is from emotion-js
// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902

const ThemeRegistry = ({ children }: { children: React.ReactNode }) => {
  const [{ cache, flush }] = React.useState(() => {
    const cache = createCache({ key: "mui" });
    cache.compat = true;
    const prevInsert = cache.insert;
    let inserted: string[] = [];
    cache.insert = (...args) => {
      const serialized = args[1];
      if (cache.inserted[serialized.name] === undefined) {
        inserted.push(serialized.name);
      }
      return prevInsert(...args);
    };
    const flush = () => {
      const prevInserted = inserted;
      inserted = [];
      return prevInserted;
    };
    return { cache, flush };
  });

  useServerInsertedHTML(() => {
    const names = flush();
    if (names.length === 0) {
      return null;
    }
    let styles = "";
    for (const name of names) {
      styles += cache.inserted[name];
    }
    return (
      <style
        key={cache.key}
        data-emotion={`${cache.key} ${names.join(" ")}`}
        dangerouslySetInnerHTML={{
          __html: styles,
        }}
      />
    );
  });

  return (
    <CacheProvider value={cache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </CacheProvider>
  );
};

export default ThemeRegistry;

For some reason, importing is weird as well.

I cannot for example do
import { ThemeRegistry } from 'package-name'

This is my index.js file, located in my src folder.

import oplTheme from "./themes/oplTheme/theme/oplTheme";
import ThemeRegistry from "./themes/oplTheme/components/ThemeRegistry.tsx";
import Logo from "./themes/oplTheme/components/Logo.tsx";

export default { oplTheme, ThemeRegistry, Logo };

I tried so many different loaders, I tried using the component inside the nextjs website, rather than in a module (which worked), so thats not the issue.
I don’t know to be honest, the module just isn’t working and I’ve been trying to sort this out for 3 days.

Sometimes Webpack’s build cache can cause problems. Try cleaning the build and node_modules directories and then rebuilding your project.