在 react 和 node typescript 之间共享一个文件夹答案

【问题标题】：Sharing a folder between react & node typescript在 react 和 node typescript 之间共享一个文件夹
【发布时间】：2022-02-17 07:14:49
【问题描述】：

我正在开发一个 React 和 Nodejs 智能镜像，既使用 TypeScript，又使用共享目录来存储镜像的模块。项目结构如下；

└── root
   ├── api (node)
      ├── node_modules
   ├── client
      ├── node_modules
   ├── modules
      ├── moduleName
         ├── index.tsx
         ├── helper.ts
         ├── types.ts

helper 文件包含一个 express 路由，它是动态加载的，索引是 react 组件，类型是共享的。 api 工作正常，但是当帮助文件包含 express 路由器或完全引用 api 代码时，react 应用程序会抛出错误。

然后，当 React 应用程序中根本没有引用帮助程序代码，只有索引文件时，React 应用程序会抛出需要来自 api 的 node_modules 内的模块的错误。我已经在没有打字稿的情况下创建了这个，但是一旦我添加了打字稿，错误就开始发生了。

我尝试了许多不同的方法来排除帮助文件，甚至将 react 应用程序设置为仅加载 .tsx，但我仍然收到相同的错误。

index.tsx

import { useTheme } from '@mui/styles'
import React, { useEffect, useState } from 'react'

import Socket from 'socket'
import { Theme } from 'theme'

import useStyles from './styles'
import { AlertType } from './types'

const Alert = () => {
  const [alerts, setAlerts] = useState<Array<AlertType>>([])
  const theme: Theme = useTheme()
  const classes = useStyles(theme)

  useEffect(() => {
    const io = Socket('alert')
    let timeout: number
    io.on('SEND_ALERT', (alert: AlertType) => {
      setAlerts([...alerts, alert])
      timeout = window.setTimeout(() => {
        setAlerts(alerts.filter((a: AlertType) => a !== alert))
      }, alert.duration * 1000)
    })

    return () => {
      window.clearTimeout(timeout)
      io.disconnect()
    }
  }, [])

  return alerts.length ? (
    <div className={classes.container}>
      {alerts.map(({ message }: AlertType, index: number) => (
        <div className={classes.alert} key={`${message[0]}-${index}`}>
          <div className={classes.content}>{message}</div>
        </div>
      ))}
    </div>
  ) : null
}

export default Alert

helper.ts

import { Request, Response, Router } from 'express'
import { Namespace, Socket } from 'socket.io'
import { AlertType } from './types'

const router = Router()

const AlertRouter = (io: Namespace) => {
  router.get('/', (req: Request, res: Response) =>
    res.status(200).json({ message: 'Hello world!' })
  )

  io.on('connection', (client: Socket) => {
    client.on('SEND_ALERT', (alert: AlertType) => io.emit('SEND_ALERT', alert))
  })

  return router
}

export default AlertRouter

types.ts

export interface AlertType {
  message: string
  duration: number
}

非常感谢任何帮助。

【问题讨论】：

请提供index.tsx、helper.ts和types.ts的代码sn-ps，否则无法帮助您。但是根据屏幕截图，我猜问题是，您的 React 组件导入了 helper.ts 和 helper.ts 本身导入了一个使用非浏览器 javascript 的节点核心模块。这将是一个问题，因为 React 在后台使用 Babel.js 并转换为浏览器 javascript。推荐使用 Webpack 和 Polyfill...
@0x1C1B 我已经添加了文件。 helper.ts 未导入到由 express 应用程序动态加载的反应文件（索引）中

标签： javascript node.js reactjs typescript express

【解决方案1】：

如果其他人遇到这个问题，我发现了一个我不喜欢但现在可以使用的 hack。

我在 webpack.config.js 中添加了以下内容

{
  plugins: {
    new webpack.ContextReplacementPlugin(
      /\/package-name\//,
      (data) => {
        delete data.dependencies[0].critical;
        return data;
      },
    ),
  },
  resolve: {
    fallback: {
      // list of failing modules required only in the api
      "crypto": false,
      "fs": false,
      "http": false,
      "path": false,
      "net": false,
      "querystring": false,
      "stream": false,
      "url": false,
      "util": false,
      "zlib": false
    }
  }
}

【讨论】：