How install React Plugins such as mdb-react-fileupload


Topic: How install React Plugins such as mdb-react-fileupload

kennovation pro priority vip early access asked 11 months ago

I have MDB React Pro Bundle with all Plugins.

When I use import MDBFileupload from 'mdb-react-fileupload'; I get Module not found: Can't resolve 'mdb-react-fileupload' in '/Users/ ... /src

I've tried many things in package.json, removing yarn.lock and node_modules, and following multiple forum posts. Nothing helps. I have a fairly simple and clean create-react-app environment.

I'm loading mdt-react this way "mdbreact": "git+https://oauth2:MY_TOKEN@git.mdbootstrap.com/mdb/react/re-pro.git",

What is the proper way to install plugins? Isn't there a simple and documented solution that doesn't involve manually copying dependencies from one package.json to another?


Piotr Glejzer staff commented 11 months ago

do you have folder plugins in your bundle?


kennovation pro priority vip early access answered 11 months ago

@Piotr Glejzer, here's a partial directory listing:

$ ls m* M*
MDB_README.txt      mdbreact-5.0.1.tgz

MDB-React-Admin-Pro:
License.pdf         package-lock.json   public/             src/
mdbreact-5.0.1.tgz  package.json        source-pack/

MDB-React-Plugin-Pack-New:
MDB-React-Calendar/     MDB-React-FileUpload/   MDB-React-Sortable/     MDB-React-WYSIWYG/      license.pdf*
MDB-React-Color-Picker/ MDB-React-Filter/       MDB-React-Table-Editor/ README.md*

Also, I just ran npm list and was surprised about the mdbreact error (the log has no additional information).

$ npm list
(node:58882) ExperimentalWarning: The fs.promises API is experimental
your-app@0.1.0 /Users/xxxxx...
├── @aws-amplify/ui-react@1.0.2
├── aws-amplify@3.3.20
├── mdbreact@5.0.1 invalid
├── react-data-table-component@7.0.0-alpha-5
├── react-dom@17.0.1
├── react-router-dom@5.2.0
├── react-scripts@4.0.1
├── react@17.0.1
├── renamer@1.1.4
├── rimraf@2.7.1
└── styled-components@5.2.1

npm ERR! code ELSPROBLEMS
npm ERR! invalid: mdbreact@5.0.1 /Users/xxxxx.../node_modules/mdbreact

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxx.../.npm/_logs/2021-02-22T13_32_13_388Z-debug.log

Here's part of my package.json:

  "dependencies": {
    "@aws-amplify/ui-react": "^1.0.2",
    "aws-amplify": "^3.3.20",
    "mdbreact": "git+https://oauth2:XXXXXXXXX...XXXXX@git.mdbootstrap.com/mdb/react/re-pro.git",
    "react": "^17.0.1",
    "react-data-table-component": "^7.0.0-alpha-5",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "4.0.1",
    "styled-components": "^5.2.1"
  },

My app is otherwise working fine.


Piotr Glejzer staff commented 11 months ago

so if you want to use a plugin you have to use it from the zip package, we don't have these plugins in re-pro repository


kennovation pro priority vip early access answered 11 months ago

So what does that exactly mean? This is taking days to answer what I thought was a straight-forward question.

What is the full and specific set of instructions for installing and referencing a plug-in (up through the import statement in my React code).


Piotr Glejzer staff commented 11 months ago

We don't have an instruction for plugins installation but if you have an mdb-react-plugin-ack-new you have to unpack all packages and if you want to use some of these you need to create a package with npm pack command and copy and paste this package into your project and add into dependencies for example "mdb-react-calendar": "./mdb-full-calendar-4.26.1.tgz".


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 5.0.1
  • Device: Mac
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No