对，所以出于某种原因，在我正在制作的npm模块中运行npm run build工作得很好。请记住，它是一个MUI Theming模块，其中也有一些Nextjs组件。
但是，当我尝试使用模块中的一个组件时，我得到了这个错误：

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",
    },
  },
};

这是有问题的组件

"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;

出于某种原因，进口也很奇怪。
例如，我不能执行import { ThemeRegistry } from 'package-name'
这是我的index.js文件，位于src文件夹中。

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 };

我尝试了很多不同的加载器，我尝试在nextjs网站内部使用组件，而不是在模块中（可以工作），所以这不是问题所在。我不知道是诚实的，模块只是不工作，我一直试图解决这个问题3天.