How install React Plugins such as mdb-react-fileupload


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

kennovation pro premium priority vip early access asked 6 days 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 4 days ago

do you have folder plugins in your bundle?


kennovation pro premium priority vip early access answered 4 days 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 3 days 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 premium priority vip early access answered 3 days 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 2 days 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: React
  • MDB Version: 5.0.1
  • Device: Mac
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No