MDB5 Version 1.4.0 - npm run build error


Topic: MDB5 Version 1.4.0 - npm run build error

Alecta pro premium priority asked 8 months ago

Expected behavior

Should create a production build.

Actual behavior

VERSION 1.4.0

./node_modules/mdb-react-ui-kit/dist/css/mdb.min.css ParserError: Syntax Error at line: 1, column 26

npm ERR! code ELIFECYCLE npm ERR! errno 1

Resources (screenshots, code snippets etc.)

Hi,

Created vanilla CRA project.

Dependencies:

 "dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.23",
"@types/node": "^12.20.15",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
"bootstrap": "^5.0.1",
"mdb-react-ui-kit": "git+https://oauth2:XXXXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"typescript": "^4.3.4",
"web-vitals": "^1.1.2"
}

App Component:

import React from "react";
import "mdb-react-ui-kit/dist/css/mdb.min.css";
import "./App.css";

function App() {
  return (
    <div className="App">
      <p>Hello World!</p>
    </div>
  );
}
export default App;

Has any changes occurred that is breaking between version 1.3.0 and 1.4.0?

How do we lock to specific version "1.3.0"?

Tried like this but it did not work:

npm install git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential.git#1.3.0

npm install git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#1.3.0

Many thanks.


Alecta pro premium priority answered 8 months ago

Hello,

Could you please provide answer for this?

This is blocking for us. We need to be able to lock to a specific version so this don't occur again, and for us to be able to test new versions.

How do we intall version 1.3.0 until you solve this issue?

Tried like this but it did not work:

npm install git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential.git#1.3.0

npm install git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#1.3.0

Many thanks.


Zhou pro premium commented 8 months ago

npm install git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#695ed9ec3df9df214e714567fa11678a0e6861f9


Jesse pro commented 8 months ago

I was also having the same issue with the same MDB dependency as the OP while deploying a MERN app to Heroku. Changing the "mdb-react-ui-kit" dependency in the client's package.json to the version provided by Zhou solved my issue. Thank you!


Wojciech Staniszewski staff answered 8 months ago

Try to add this to package.json for now:

  "resolutions": {
    "postcss-custom-properties": "^9.1.1"
  },

Alecta pro premium priority answered 8 months ago

Hi,

Sorry but we don't understand where in package.json to put the above for it to work?

This did not work.

 {
      "name": "mdbpro",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "@types/jest": "^26.0.23",
        "@types/node": "^12.20.15",
        "@types/react": "^17.0.11",
        "@types/react-dom": "^17.0.8",
        "bootstrap": "^5.0.1",
        "mdb-react-ui-kit": "git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential/",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "4.0.3",
        "typescript": "^4.3.4",
        "web-vitals": "^1.1.2"
      },
      "resolutions": {
        "postcss-custom-properties": "^9.1.1"
      },
      "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"
        ]
      }
    }

How do we intall version 1.3.0 until you solve this issue?

Tried like this but it did not work:

npm install git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential.git#1.3.0

npm install git+https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#1.3.0


MarTechBH pro premium answered 8 months ago

Try this.

"resolutions": {
    "postcss-custom-properties": "^12.0.0"
  },
  "scripts": {
    "preinstall": "npx npm-force-resolutions",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Wojciech Staniszewski staff answered 8 months ago

You could also try to clean npm cache after adding this:

    "resolutions": {
        "postcss-custom-properties": "^9.1.1"
    },

Next, reinstall the project. If it still does not work, you could install 1.3.0 as above.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.3.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes