Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Next.js';预呈现页面时出错/&引用;:错误:缩小的反应错误#321';在生产构建期间_Javascript_Reactjs_Next.js - Fatal编程技术网

Javascript Next.js';预呈现页面时出错/&引用;:错误:缩小的反应错误#321';在生产构建期间

Javascript Next.js';预呈现页面时出错/&引用;:错误:缩小的反应错误#321';在生产构建期间,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我正在尝试在firebase函数上运行Next.js,之前已经成功部署过。然而,在添加了一个webpack插件(svgr)并进行了进一步的定制之后,我在构建时遇到了一个错误。它发生在成功编译之后,此时Next.js会自动优化页面 my functions文件夹和my dev文件夹的依赖项完全相同,只是functions文件夹有两个附加项(用于firebase) 经检查,似乎认为我有多个实例。在开发模式下从my/app文件夹中运行应用程序可以正常工作,但是在开发模式下从/functions文件夹中

我正在尝试在firebase函数上运行Next.js,之前已经成功部署过。然而,在添加了一个webpack插件(svgr)并进行了进一步的定制之后,我在构建时遇到了一个错误。它发生在成功编译之后,此时Next.js会自动优化页面

my functions文件夹和my dev文件夹的依赖项完全相同,只是functions文件夹有两个附加项(用于firebase)

经检查,似乎认为我有多个实例。在开发模式下从my/app文件夹中运行应用程序可以正常工作,但是在开发模式下从/functions文件夹中运行应用程序仍然不起作用

预呈现页面发生错误“/:错误:缩小反应错误#321;参观https://reactjs.org/docs/error-decoder.html?invariant=321 获取完整消息,或使用非小型开发环境获取完整错误和其他有用警告。

预呈现页面/404.html时出错:错误:缩小的反应错误#321;参观https://reactjs.org/docs/error-decoder.html?invariant=321 获取完整消息,或使用非小型开发环境获取完整错误和其他有用警告。

next.config.js

module.exports = {
    distDir: "../functions/next",
    webpack(config) {
        config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack'],
        });
        return config;
    },
    externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        }
    },

};


让我们让distDir保持原样,比如说到
.next
而不是
。/functions/.next
。在某种程度上,您可以使用
cp.next../functions/.next
在构建之后立即复制构建工件。当您调用
next({dev:true,…otherOptions})或设置
NODE_ENV=production
以运行
firebase-service

时,您还需要将
dev
值更改为true,以确保它不会与下一个构建更新或失去同步。
app/package.json

  "dependencies": {
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "@svgr/webpack": "^4.3.3",
    "clsx": "^1.0.4",
    "next": "^9.1.4",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },

functions/package.json

  "engines": {
    "node": "8"
  },
  "dependencies": {
    "firebase-admin": "^8.0.0",
    "firebase-functions": "^3.1.0",
    "@material-ui/core": "^4.7.0",
    "@material-ui/icons": "^4.5.1",
    "clsx": "^1.0.4",
    "next": "^9.1.4",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "@svgr/webpack": "^4.3.3"
  },
  "devDependencies": {
    "firebase-functions-test": "^0.1.6"
  },