在 Npm run build 中出现“TypeError a.map 不是函数”，但在 npm start 中却没有出现

Question

我有一个基本的 MERN 堆栈应用程序。在应用程序上，当我执行 npm start 时，它运行良好并且按预期运行。但是，在执行 npm run build 并运行serve -s build 后，应用程序失败并显示以下消息 -

TypeError: a.map is not a function
at He (Contacts.js:27:16)
at wl (react-dom.production.min.js:166:137)
at Pi (react-dom.production.min.js:215:270)
at wu (react-dom.production.min.js:291:202)
at ys (react-dom.production.min.js:279:389)
at vs (react-dom.production.min.js:279:320)
at ms (react-dom.production.min.js:279:180)
at as (react-dom.production.min.js:270:88)
at rs (react-dom.production.min.js:267:429)
at x (scheduler.production.min.js:13:203)

这是我的 Express 主 server.js 文件 -

const express = require('express')
const cors = require('cors')
const app = express()
const connectDB = require('./config/db')

app.use(cors())

//Connect database
connectDB()

//Init Middleware
app.use(express.json({ extended: false }))

app.get('/', (req, res) => 
    res.json({ msg: 'Welcome to the Digital RoloDex API'}))


//Define Routes
app.use('/api/users', require('./routes/users'))
app.use('/api/auth', require('./routes/auth'))
app.use('/api/contacts', require('./routes/contacts'))

const PORT = process.env.PORT || 4444
app.listen(PORT, () => console.log(`app running on ${PORT}`))

这是错误所在的文件 -

import React, { useEffect } from 'react'
import ContactItem from './ContactItem'
import Spinner from '../layout/Spinner'
import { getContacts, useContacts } from '../context/contact/ContactState'

const Contacts = () => {
    const [ contactState, contactDispatch ] = useContacts()
    const { contacts, filtered, loading } = contactState
    
    
    useEffect(() => {
        getContacts(contactDispatch)
        
    }, [contactDispatch])

    if (contacts === 0 && !loading) {
        return <h4>Please add a contact</h4>
    }

    return (
        <div>
        { contacts !== null && !loading ? 
           filtered.length !== 0 ? 
             filtered.map((contact) => (
                        <ContactItem key={contact._id} contact={contact} />
                  ))
                : contacts.map((contact) => (
                        <ContactItem key={contact._id} contact={contact} />
                        
                  )) 
            :
          <Spinner />
        }       
        </div>
    )
}

export default Contacts

我发现两个 stackoverflow 问题有同样的问题。我应用了他们的技巧，但也没有帮助。任何帮助将不胜感激。

https://stackoverflow.com/questions/65069848/typeerror-a-map-is-not-a-function
https://stackoverflow.com/questions/64362803/map-is-not-a-function-when-getting-react-files-from-build-folder

Answer 1

我想回答我自己的问题，以防有人遇到同样的错误。最重要的是，在静态构建中，任何变量、组件、函数等都将用缩写字母重命名。这就是为什么它说“a”。map 不是一个函数。

此外，我的后端和客户端位于两个单独的文件夹中。所以我的前端没有正确调用我的后端。我卸载了 cors，因为这会使我的用户信息在网络上容易受到攻击。相反，我将后端文件夹和文件放在根目录中，并将客户端保留在其自己的文件夹中。从那里，我 cd.进入我的客户端文件夹并执行 npm run build。错误消失并能够回调到express api。

Answer 2

我想在这里权衡一下，因为我有一个类似的问题困扰了我很多个小时。就像原始海报一样，我在 npm 构建中遇到了“...不是函数”问题，但在 npm start 开发环境中却没有。然而，就我而言，这是由 Squel.js 对象引起的。为了解决这个问题，我升级了我的nodeJS版本并运行了npm审核。这解决了我的问题，我使用的命令如下。

nvm install node
nvm use node
npm audit fix --force

一旦我这样做了，我就能够毫无错误地重建我的 React 应用程序

Answer 3

你找到n.map不是函数的解决方案了吗