我创建了一个使用服务器端渲染和Material UI的NextJS应用程序。在开发环境中运行良好。
当我运行“next build”时,应用程序会编译和构建而无错误。当我使用NODE_ENV = production运行它时,网页可以正常呈现,但许多功能不再起作用。例如:
1. Material UI的“Hidden”组件永远不会显示其内嵌的任何子组件,即使应该(在我的开发应用程序中,根据屏幕大小隐藏和显示某些div)。
2. 网页上的所有按钮都不起作用。这些按钮都具有"onClick"事件,它们的回调函数在单击时以某种方式修改React状态对象。然而,单击这些按钮时什么也不会发生。状态保持不变,因此我认为这些函数在单击这些click事件时从未被调用过。这同样适用于Material UI的Button组件以及普通的HTML按钮(作为JSX)。
在我的笔记本电脑上以dev模式运行时一切都完全正常。但是,当我构建NextJS应用程序并将其部署到生产模式的服务器上时,我遇到了上述问题。到目前为止,我的研究只发现了可能在构建过程中存在类名冲突的可能性(这在Material UI的FAQ页面上说过)。是否有人遇到了我所遇到的相同问题?
编辑:我刚刚启动了一个裸骨NextJS应用程序,其中仅包含一个索引页面和最小依赖项,具有一个状态参数和一个按钮以通过onClick事件修改该参数。我遇到了同样的问题。在开发中,按钮起作用,在生产中则不起作用。因此,这将是一个NextJS问题而不是Material UI问题。但这仍然无法解释为什么Material UI的“Hidden”组件始终保持隐藏状态,而不考虑屏幕大小。也许它既是Next JS又是Material UI问题。
当我运行“next build”时,应用程序会编译和构建而无错误。当我使用NODE_ENV = production运行它时,网页可以正常呈现,但许多功能不再起作用。例如:
1. Material UI的“Hidden”组件永远不会显示其内嵌的任何子组件,即使应该(在我的开发应用程序中,根据屏幕大小隐藏和显示某些div)。
2. 网页上的所有按钮都不起作用。这些按钮都具有"onClick"事件,它们的回调函数在单击时以某种方式修改React状态对象。然而,单击这些按钮时什么也不会发生。状态保持不变,因此我认为这些函数在单击这些click事件时从未被调用过。这同样适用于Material UI的Button组件以及普通的HTML按钮(作为JSX)。
在我的笔记本电脑上以dev模式运行时一切都完全正常。但是,当我构建NextJS应用程序并将其部署到生产模式的服务器上时,我遇到了上述问题。到目前为止,我的研究只发现了可能在构建过程中存在类名冲突的可能性(这在Material UI的FAQ页面上说过)。是否有人遇到了我所遇到的相同问题?
编辑:我刚刚启动了一个裸骨NextJS应用程序,其中仅包含一个索引页面和最小依赖项,具有一个状态参数和一个按钮以通过onClick事件修改该参数。我遇到了同样的问题。在开发中,按钮起作用,在生产中则不起作用。因此,这将是一个NextJS问题而不是Material UI问题。但这仍然无法解释为什么Material UI的“Hidden”组件始终保持隐藏状态,而不考虑屏幕大小。也许它既是Next JS又是Material UI问题。