npm模块“您可能需要一个适当的加载程序来处理此文件类型,目前没有配置任何加载程序处理此文件。”

我正在使用NextJS构建组件库。这个项目运行良好。然而,在我将项目发布到npm并将其作为模块导入后,我会收到以下错误:

我发现了一个 partial workaround ,但效果不太好。下面的第一个片段允许包在其他repo中工作(可以导入,文件可访问等),但当我试图构建或运行dev来查看我的组件时,会出现上面的错误。下面的第二个代码片段具有相反的效果(包已损坏,但本地构建成功)

npm包可以工作,但本地构建失败(请参阅上面的屏幕截图)

// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true
};
module.exports = nextConfig;

或

npm包不起作用,但是本地构建成功了。

// next.config.js

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')([
  '@ellipsis-org/component-library'
]); // pass the modules you would like to see transpiled
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true
};
module.exports = withTM({ nextConfig });

HelloWorld组件

import { styled, Typography } from '@mui/material';
import React from 'react';

const HelloWorld = () => {
  return (
    <Wrapper>
      <Typography variant="caption">HelloWorld</Typography>
    </Wrapper>
  );
};

export default HelloWorld;

const Wrapper = styled('div')`
  border: 1px solid red;
`;

我很想得到一些帮助。。。对我来说,这是一个相当陌生的地方。