'Problem: ParserError: Syntax Error at line: 1, column 32

I am new to programming and I am with this problem. When I put in the Terminal "npm run build" to create the compression of my project in React.js I have this error. I have already created another previous project in which it did not have this problem and I do not know what the difference is.

PROBLEM:

Creating an optimized production build...
Failed to compile.

./src/Styles/intro.css
ParserError: Syntax Error at line: 1, column 32

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/Iwona/.npm/_logs/2020-12-18T21_38_01_153Z-debug.log

My Json:

    {
  "name": "webblasyxnew",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "homepage": "https://blasyx.com/",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "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"
    ]
  }
}

///////////////////

Could it be because I am using Css variables? maybe there is something I am not validating. My intro.css ->

@font-face{
        font-family: 'anodina';
        src: url('../Fonts/Anodina-Regular.otf');
}

.intro__header, 
.intro__hover__title,
.intro__click__title, 
.intro__end__text {
    font-family: 'Anonymous Pro';
    font-weight: 400;
    pointer-events: none; 
}
.intro__o{
    pointer-events: none; 
}

.intro__hover__text, .intro__hover__text{
    font-family: 'anodina';
}

.intro{
    position: relative;
    padding-top: 8rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    background-color: var(--clr-cyan);
}


.intro__header{

    width: min(800px, 90%);
    padding: 3rem;
    margin-bottom: 8rem;
    font-size: .75rem;
    text-align: center;
    border: 1px var(--clr-black) solid;
    box-shadow: var(--clr-black) calc(var(--x)/-20) calc(var(--y)/20);
    background-color: var(--clr-yellow);
}

.intro__info{
    width: min(800px, 90%);
    display: grid;
    grid-template-columns: 35% 1fr 35%;
    grid-template-areas: "intro__hover . intro__click";
}


.intro__hover, .intro__click, .intro__o{
    height: 25vh;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 7rem;

}
.intro__click__text, .intro__hover__text{
    position: absolute;
    text-align: center;
    width: 80%;
    font-family: 'anodina';
    color: var(--clr-white);
    opacity: 0;

}

.intro__hover, .intro__click{
    background-color: var(--clr-white);
    box-shadow: var(--clr-black) calc(var(--x)/-20) calc(var(--y)/-20);
    border: 1px var(--clr-black) solid; 
    cursor: pointer;
}

.intro__end__text{
    margin-bottom: 5rem;
}

.hidebox__intro{
    background-color: var(--clr-black);
    box-shadow: var(--clr-white) calc(var(--x)/-20) calc(var(--y)/-20);
    transition: all 300ms;
}
.showtext__intro{
    opacity: 1;
}
.hidetext__intro{
    opacity: 0;
}
#intro__hello{
    opacity: 0;
    pointer-events: none; 
}

Also I have the word DEBUGGER between lines 14 and 15 of my JSON. Is it normal or do I have a problem? Right before the SCRIPTS.

THANKS! Blas.

Solution 1:^[1]

I had the same problem? like this:

box-shadow: var(--clr-black) calc(var(--x)/-20) calc(var(--y)/20);

change to

box-shadow: var(--clr-black) calc(var(--x)/ -20) calc(var(--y)/20);

can solve.

postcss-safe-parser caused the problem

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Edwin.Tang

'Problem: ParserError: Syntax Error at line: 1, column 32

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]