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

s3fp2yjn 于 2022-10-21 发布在其他

关注(0)|答案(2)|浏览(208)

我希望将一些nextjs组件导出到一个“Commons”项目中，这将被许多nextjs应用程序使用。
因此，我将这个添加到了我的Package.json中

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

我将组件导入更改为使用Commons组件。例如：

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。

next.js

来源：https://stackoverflow.com/questions/73110812/nextjs-project-dependency-you-may-need-an-appropriate-loader-to-handle-this-fi

2条答案

按热度按时间

0aydgbwb1#

我发现我不能像这样共享组件。
我需要做一个组件库(how can I share components in two projects in NextJs?)

赞(0）回复(0）举报 2022-10-21

6bc51xsx2#

如果您在这里，很可能是因为您在将monorepo中的包与Next.js一起使用时遇到了问题。遗憾的是，仅在项目的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中的包。

赞(0）回复(0）举报 2022-10-21

我来回答

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

2条答案

相关问题

热门标签

最新问答