Nextjs引入MUI主题模块报错：需配置合适Webpack Loader

我开发了一个包含Next.js组件的MUI主题模块，执行npm run build可正常完成构建，但在其他项目中引入该模块内的组件时，触发Webpack错误：

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

此外模块的导入方式存在异常，无法使用import { ThemeRegistry } from 'package-name'的形式导入组件。我尝试过配置多种Loader，且该组件在Next.js项目内直接使用时可正常运行，但模块的问题已困扰我3天。

相关代码与配置 #

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

目标组件ThemeRegistry #

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

模块入口src/index.js #

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

1. 修复导入方式异常问题 #

当前入口文件使用export default导出对象，导致无法通过解构语法导入。需改为命名导出：

修改src/index.js：

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

// 替换默认导出为命名导出
export { oplTheme, ThemeRegistry, Logo };

同时在package.json中指定正确的入口路径：

{
  "main": "./build/index.js",
  "module": "./build/index.js"
}

2. 解决Webpack Loader错误问题 #

问题根源 #

模块构建后可能残留未转译的TS/JSX代码，或MUI/Emotion样式未被正确处理，导致外部项目Webpack无法解析。

修复步骤 #

（1）完善Webpack转译规则

将JS/JSX/TS/TSX统一用Babel处理，确保代码转译彻底：

module: {
  rules: [
    {
      test: /\.(js|jsx|ts|tsx)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript"
            ],
            plugins: ["@emotion/babel-plugin"] // 处理Emotion的CSS-in-JS
          }
        }
      ]
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"], // 仅css-loader无法注入样式，需添加style-loader
    },
    {
      test: /\.(jpe?g|png)$/i,
      use: ["file-loader", "webp-loader"],
    },
  ],
}

（2）调整Library输出格式

如果外部项目同时支持CommonJS和ES模块，可修改output配置：

output: {
  publicPath: "/",
  path: path.resolve("build"),
  filename: "index.js",
  library: "your-package-name",
  libraryTarget: "umd",
  umdNamedDefine: true,
}

（3）确保Next.js API兼容

组件中使用的useServerInsertedHTML是Next.js专属API，需保证外部项目的Next.js版本与模块兼容，且外部项目Webpack能识别Next.js模块。

3. 验证构建结果 #

执行npm run build后，检查build/index.js：

• 确认所有TS/TSX已转译为普通JS
• 确认样式代码已处理完成
• 确认导出语句为命名导出格式

之后在外部项目重新安装模块，测试导入：

import { ThemeRegistry } from 'package-name';

内容的提问来源于stack exchange，提问作者Ahmad Nasser