我爱平铺

NextJS处理服务器server端的npm模块

NextJS作为一个SSR框架,一大特色在于getInitialProps方法。大部分情况下,在这里发起API请求获取组件的初始数据。然而,如果这里面包含了server端特有的模块,比如fs等,编译的时候会出错,因为webpack尝试将其作为前端模块打包。

[ error ] ./node_modules/request/lib/har.js
Module not found: Can't resolve 'fs' in '/Users/wangsijie/Development/nextjsapp/node_modules/request/lib'

一种曲线救国的方式是,把server端的代码都写在api里面,然后用“自己请求自己”的方式获取数据,这样就不会被webpack打包。但其实可以直接让webpack忽略这些模块,毕竟,前端并不会真的执行这些代码。

安装null-loader模块

npm i -D null-loader

修改next.config.js文件,如果之间没有的话需要添加一个:https://nextjs.org/docs/api-reference/next.config.js/introduction

module.exports = () => {
    return {
        webpack: (config, { isServer }) => {
            if (!isServer) {
                // Ensure the module is not included in the client bundle
                config.module.rules.push({
                    test: /tcb-admin-node/,
                    use: "null-loader",
                })
            }
            return config
        },
    };
}

其中,tcb-admin-node需要替换成自己的模块,比较方便的是,把所有server端用到的模块(一般是调用了NodeJS自带模块的),放进一个专门的文件夹里,然后直接设置忽略这个文件夹即可,例如,全部放进server文件夹:

module.exports = () => {
    return {
        webpack: (config, { isServer }) => {
            if (!isServer) {
                config.module.rules.push({
                    test: /server/,
                    use: "null-loader",
                })
            }
            return config
        },
    };
}

文章原始链接:https://sijie.wang/posts/nextjs-server-module/

本站文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请保留原始链接