MDB5 Version 1.4.0 - npm run build error


Topic: MDB5 Version 1.4.0 - npm run build error

Alecta pro premium priority asked 3 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.


Alecta pro premium priority answered 3 years 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 3 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 3 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!


Try to add this to package.json for now:

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

Alecta pro premium priority answered 3 years 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 3 years 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"
  },

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