NextJs 项目依赖 - 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件答案

【问题标题】：NextJs project dependency - You may need an appropriate loader to handle this file type, currently no loaders are configured to process this fileNextJs 项目依赖 - 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件
【发布时间】：2022-10-18 13:13:05
【问题描述】：

我希望将一些 nextjs 组件导出到一个“commons”项目中，许多 nextjs 应用程序都将使用该项目。

所以，我将它添加到我的 package.json

"commons-project": "../commons-project",

我更改了组件导入以使用公共组件。例如：

import MyComponent from 'commons-project/components/my-component';

但是，我的项目不再编译了。这是完整的错误：

Module parse failed: Unexpected token (21:4)
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
| 
|   return (
>     <Box mb={1} flex={1} display="flex" alignItems="center" 
|         justifyContent="center" className={classes.buttonRoot}
|         style={{backgroundColor: bgColor ? bgColor : '#C3AEF8',

盒子来自@material-ui/core

我试图添加一个 webpack.config.js，并尝试这样的事情：

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: [/node_modules/],
                loader: 'babel-loader',
            },
        ],
    },
}

但我不明白如何正确配置 webpack。

【问题讨论】：

标签： webpack next.js material-ui

【解决方案1】：

我发现我不能共享这样的组件。

我需要做一个组件库（how can I share components in two projects in NextJs?）

【讨论】：

【解决方案2】：

如果您在这里，很可能是因为您在使用带有 Next.js 的 monorepo 中的包时遇到了问题。不幸的是，在项目的tsconfig.json 中引用您的包是不够的；您还需要使用next-transpile-modules，以便Next.js 了解您的node_modules 文件夹中需要转译的包。

在您的终端中：

npm i next-transpile-modules

编辑您的 next.config.js 文件，使其如下所示：

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

const withTranspilation = require("next-transpile-modules")([
  "@your-org/your-awesome-package"
])

module.exports = withTranspilation(nextConfig)

确保将 @your-org/your-awesome-package 替换为您尝试在 Next.js 应用程序中使用的 monorepo 中的包。

【讨论】：