MDB5 Version 1.4.0 - npm run build error - Material Design for Bootstrap

Topic: MDB5 Version 1.4.0 - npm run build error

Alecta priority asked 2 years 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.

Add comment

Wojciech Staniszewski staff answered 2 years ago

0 0 Best answer

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.

Add comment

Alecta priority answered 2 years ago

1 0 Best answer

Please insert min. 20 characters.

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 premium commented 2 years ago

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

Jesse pro commented 2 years 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!

Add comment

MarTechBH premium answered 2 years ago

0 1 Best answer

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"
  },

Add comment

Alecta priority answered 2 years ago

0 0 Best answer

Hi,

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

This did not work.

<pre class="prettyprint"><code> {
 "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"
 ]
 }
 }
</code></pre>

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

Tried like this but it did not work:

npm install git+<a href="https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential.git#1.3.0" target="_blank" rel="nofollow">https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential.git#1.3.0</a>

npm install git+<a href="https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#1.3.0" target="_blank" rel="nofollow">https://oauth2:XXXXXXX@git.mdbootstrap.com/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential#1.3.0</a>

Please insert min. 20 characters.

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

Add comment

Wojciech Staniszewski staff answered 2 years ago

0 1 Best answer

Try to add this to package.json for now:

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
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

Alecta

61Support score
5Questions 3Answers 0Snippets