Next.js 13、MUI、transpilePackages和modularizeImports

qfe3c7zg 于 2023-03-29 发布在其他

关注(0)|答案(1)|浏览(292)

我的项目是一个使用Turborepo和MUI的monorepository。我使用Next.js 13，并希望优化性能。我发现一篇文章，他们使用新的transpilePackages和modularizeImports属性来优化应用程序中的导入（请参阅here）。我不知道如何设置next.config.js（文章中的过程不起作用）。
如果我根据文章设置next.config.js。也就是说，我将@mui库添加到transpilePackages参数，然后使用与文章中相同的参数来模块化Imports：

{
    "@mui/material/?(((\\w*)?/?)*)": {
        transform: "@mui/material/{{ matches.[1] }}/{{member}}",
    },
    "@mui/icons-material/?(((\\w*)?/?)*)": {
        transform: "@mui/icons-material/{{ matches.[1] }}/{{member}}",
    },
}

如果我从@mui/material导入css或样式，我会得到一个模块未找到错误：

https://nextjs.org/docs/messages/module-not-found
wait  - compiling /_error (client and server)...
error - ../../packages/core/icons/Icon.tsx:14:0
Module not found: Can't resolve '@mui/material/css'
import { css, styled } from "@mui/material";

我尝试了很多东西，并设法得到另一个类似的错误，但与alpha函数（和其他一些）。我假设modularizeImports参数不正确，但我不知道它应该是正确的。

next.js

来源：https://stackoverflow.com/questions/75746248/next-js-13-mui-transpilepackages-and-modularizeimports

1条答案

按热度按时间

ifsvaxew1#

你可以尝试将下面的代码添加到你的.next.config.js文件中：
transpilePackages: ["@mui/material/css"]
示例.next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  transpilePackages: ["@mui/material/css", etc..]
};

module.exports = nextConfig;

赞(0）回复(0）举报 2023-03-29

我来回答

Next.js 13、MUI、transpilePackages和modularizeImports

1条答案

相关问题

热门标签

最新问答