找不到模块：无法解析“/home/manujtiwari/Desktop/portfolio-react/node_modules/react-articles-js/cjs”中的“tsarticles”

Question

我无法在我的项目中使用反应粒子。按照文档，我安装了 React-Particles，当它不起作用时，我安装了 React-tsParticles，但它仍然给我同样的错误：找不到模块：无法解析“tsParticles”请帮助我。下面是我的依赖文件。

{
  "name": "portfolio-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.0.2",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-particles-js": "^3.5.3",
    "react-scripts": "4.0.3",
    "react-tsparticles": "^1.30.4",
    "react-typed": "^1.2.0",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "tslint": "^5.0.0"
  }
}

Answer 1

当您在项目中安装 npm i react-articles-js 时。在最初的文档中，开发人员提到react-articles-js依赖于“tsarticles”，所以你只需安装“npm i tsarticles”。

npm i ts粒子

没有别的事，重新启动你的服务器。我认为这次工作正常。这是我的粒子组件。

import React from 'react'
import Particles from 'react-particles-js'

function Particless  (){
    return (
      <Particles
      params={{
        particles: {
          number: {
            value: 200,
            density: {
              enable: true,
              value_area: 1000,
            }
          },
        },
      }}
    />
    )
}

export default Particless

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

卸载“react-articles-js”，因为它已被弃用。而是安装“react-particles”。

npm install react-particles

在您的组件中：

import Particles from "react-particles";

Answer 3

尝试安装ts 粒子 npm 包 ，因为这应该可以解决问题