This issue has been reported in create-react-app and optimize-css-assets-webpack-plugin. 

https://github.com/facebook/create-react-app/issues/7980

https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues/118

It appears the bug has been fixed, but the latest released version does not have the fix. I&#39;ve fixed the problem by changing my opacity values from nn% to 0.nn values (e.g. 70% becomes 0.7).

I think opacity accepts values in the range 0.0 to 1.0.
Any value outside the interval, though valid, is clamped to the nearest limit in the range.
In your example the nearest limit is clamped to 1%;

https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

On production build the css optimiser ([cssnano][1]) is rounding up the number(87 in your case). This is happening in angular version 9 and up also.

To avoid this, you can use the values between 0 and 1.
In your case, you can use 0.8 as below inside your css rule

    opacity: 0.8;

[MDN guild on opacity][2]


  [1]: https://github.com/cssnano/cssnano/
  [2]: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

I have a docker-compose file and a Dockerfile. MySQL is installed properly. I have set **MYSQL_ROOT_PASSWORD**. But when trying to access mysql db, getting the error - Access denied. I have read the other threads of this site, but couldn&#39;t get that much help. :( 

Here is my docker-compose file:

    version: &#39;3&#39;
    
    volumes:
            db_data: {}
    
    services:
        db:
            build:
                context: .
                dockerfile: ./db/Dockerfile
                args:
                    - database=iTel
                    - password=123
            image: db_image
            volumes:
                - db_data:/var/lib/mysql
            ports:
                - &quot;3306:3306&quot;

and Dockerfile:

    FROM mysql:5.7.15
    
    ARG database
    ARG password
    
    RUN echo ${database}
    RUN echo ${password}
    
    MAINTAINER me
    ENV MYSQL_DATABASE=${database} \
        MYSQL_ROOT_PASSWORD=${password}
    ADD ./db/database100.sql /docker-entrypoint-initdb.d
    EXPOSE 3306

Here are logs for build:

    docker-compose up -d

    Building db
    Step 1/9 : FROM mysql:5.7.15
    5.7.15: Pulling from library/mysql
    6a5a5368e0c2: Pull complete
    0689904e86f0: Pull complete
    486087a8071d: Pull complete
    3eff318f6785: Pull complete
    3df41d8a4cfb: Pull complete
    1b4a00485931: Pull complete
    0bab0b2c2630: Pull complete
    264fc9ce512d: Pull complete
    e0181dcdbbe8: Pull complete
    53b082fa47c7: Pull complete
    e5cf4fe00c4c: Pull complete
    Digest: sha256:966490bda4576655dc940923c4883db68cca0b3607920be5efff7514e0379aa7
    Status: Downloaded newer image for mysql:5.7.15
     ---&gt; 18f13d72f7f0
    Step 2/9 : ARG database
     ---&gt; Running in 62819f9fc38b
    Removing intermediate container 62819f9fc38b
     ---&gt; 863fd3212046
    Step 3/9 : ARG password
     ---&gt; Running in ea9d36c1a954
    Removing intermediate container ea9d36c1a954
     ---&gt; 056100b1d5eb
    Step 4/9 : RUN echo ${database}
     ---&gt; Running in 941bd2f4fc58
    iTel
    Removing intermediate container 941bd2f4fc58
     ---&gt; 7b2b48e7bd8c
    Step 5/9 : RUN echo ${password}
     ---&gt; Running in 9cb80396bb62
    123
    Removing intermediate container 9cb80396bb62
     ---&gt; 155d184c78ba
    Step 6/9 : MAINTAINER me
     ---&gt; Running in 8e3b3b53ce7b
    Removing intermediate container 8e3b3b53ce7b
     ---&gt; 9a7617a24800
    Step 7/9 : ENV MYSQL_DATABASE=${database}     MYSQL_ROOT_PASSWORD=${password}
     ---&gt; Running in e483e65caf55
    Removing intermediate container e483e65caf55
     ---&gt; acf8ac829607
    Step 8/9 : ADD ./db/database100.sql /docker-entrypoint-initdb.d
     ---&gt; 42d992439f98
    Step 9/9 : EXPOSE 3306
     ---&gt; Running in 4e138502c6f9
    Removing intermediate container 4e138502c6f9
     ---&gt; a0818deda593
    Successfully built a0818deda593
    Successfully tagged db_image:latest
    WARNING: Image for service db was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up --build`.
    Creating reve_db_1 ... done

to see the containers:

    docker ps -a

    CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                    NAMES
    49419cb9980a        db_image            &quot;docker-entrypoint.s…&quot;   10 seconds ago      Up 8 seconds        0.0.0.0:3306-&gt;3306/tcp   reve_db_1

That is log for this container:

    docker logs 49419cb9980a

    2020-01-21T07:53:13.050129Z 0 [Warning] TIMESTAMP with implicit DEFAULT value is deprecated. Please use --explicit_defaults_for_timestamp server option (see documentation for more details).
    2020-01-21T07:53:13.051767Z 0 [Note] mysqld (mysqld 5.7.15) starting as process 1 ...
    2020-01-21T07:53:13.054945Z 0 [Note] InnoDB: PUNCH HOLE support available
    2020-01-21T07:53:13.055053Z 0 [Note] InnoDB: Mutexes and rw_locks use GCC atomic builtins
    2020-01-21T07:53:13.055103Z 0 [Note] InnoDB: Uses event mutexes
    2020-01-21T07:53:13.055179Z 0 [Note] InnoDB: GCC builtin __atomic_thread_fence() is used for memory barrier
    2020-01-21T07:53:13.055226Z 0 [Note] InnoDB: Compressed tables use zlib 1.2.3
    2020-01-21T07:53:13.055268Z 0 [Note] InnoDB: Using Linux native AIO
    2020-01-21T07:53:13.055608Z 0 [Note] InnoDB: Number of pools: 1
    2020-01-21T07:53:13.055791Z 0 [Note] InnoDB: Using CPU crc32 instructions
    2020-01-21T07:53:13.061164Z 0 [Note] InnoDB: Initializing buffer pool, total size = 128M, instances = 1, chunk size = 128M
    2020-01-21T07:53:13.072998Z 0 [Note] InnoDB: Completed initialization of buffer pool
    2020-01-21T07:53:13.075325Z 0 [Note] InnoDB: If the mysqld execution user is authorized, page cleaner thread priority can be changed. See the man page of setpriority().
    2020-01-21T07:53:13.101337Z 0 [Note] InnoDB: Highest supported file format is Barracuda.
    2020-01-21T07:53:13.142134Z 0 [Note] InnoDB: Creating shared tablespace for temporary tables
    2020-01-21T07:53:13.142356Z 0 [Note] InnoDB: Setting file &#39;./ibtmp1&#39; size to 12 MB. Physically writing the file full; Please wait ...
    2020-01-21T07:53:13.184613Z 0 [Note] InnoDB: File &#39;./ibtmp1&#39; size is now 12 MB.
    2020-01-21T07:53:13.185628Z 0 [Note] InnoDB: 96 redo rollback segment(s) found. 96 redo rollback segment(s) are active.
    2020-01-21T07:53:13.185733Z 0 [Note] InnoDB: 32 non-redo rollback segment(s) are active.
    2020-01-21T07:53:13.186108Z 0 [Note] InnoDB: Waiting for purge to start
    2020-01-21T07:53:13.236391Z 0 [Note] InnoDB: 5.7.15 started; log sequence number 12146163
    2020-01-21T07:53:13.236828Z 0 [Note] Plugin &#39;FEDERATED&#39; is disabled.
    2020-01-21T07:53:13.237186Z 0 [Note] InnoDB: Loading buffer pool(s) from /var/lib/mysql/ib_buffer_pool
    2020-01-21T07:53:13.252074Z 0 [Warning] Failed to set up SSL because of the following SSL library error: SSL context is not usable without certificate and private key
    2020-01-21T07:53:13.252900Z 0 [Note] Server hostname (bind-address): &#39;*&#39;; port: 3306
    2020-01-21T07:53:13.253023Z 0 [Note] IPv6 is available.
    2020-01-21T07:53:13.253076Z 0 [Note]   - &#39;::&#39; resolves to &#39;::&#39;;
    2020-01-21T07:53:13.253184Z 0 [Note] Server socket created on IP: &#39;::&#39;.
    2020-01-21T07:53:13.269950Z 0 [Warning] &#39;db&#39; entry &#39;sys mysql.sys@localhost&#39; ignored in --skip-name-resolve mode.
    2020-01-21T07:53:13.270581Z 0 [Warning] &#39;proxies_priv&#39; entry &#39;@ root@localhost&#39; ignored in --skip-name-resolve mode.
    2020-01-21T07:53:13.277379Z 0 [Note] InnoDB: Buffer pool(s) load completed at 200121  7:53:13
    2020-01-21T07:53:13.295467Z 0 [Warning] &#39;tables_priv&#39; entry &#39;sys_config mysql.sys@localhost&#39; ignored in --skip-name-resolve mode.
    2020-01-21T07:53:13.367019Z 0 [Note] Event Scheduler: Loaded 0 events
    2020-01-21T07:53:13.368851Z 0 [Note] mysqld: ready for connections.
    Version: &#39;5.7.15&#39;  socket: &#39;/var/run/mysqld/mysqld.sock&#39;  port: 3306  MySQL Community Server (GPL)

Now entered in the container:

    docker exec -it 49419cb9980a bash
    
    root@49419cb9980a:/#

I have checked if MYSQL_ROOT_PASSWORD is set correctly(in the container):

    root@49419cb9980a:/# echo $MYSQL_ROOT_PASSWORD
    123

Then tried to log into mysql:

    root@49419cb9980a:/# mysql -u root -p
    Enter password:
    ERROR 1045 (28000): Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: YES)

My question is, how to solve this problem? Why can&#39;t I access mysql? I tried with no password option too. 
That gave me this error:

    mysql -u root
    ERROR 1045 (28000): Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: NO)

This is my project structure:

    tree
    .
    ├── db
    │&#160;&#160; ├── Dockerfile
    │&#160;&#160; └── database100.sql
    └── docker-compose.yml
    
    1 directory, 3 files



MYSQL_ROOT_PASSWORD is set but getting &quot;Access denied for user &#39;root&#39;@&#39;localhost&#39; (using password: YES)&quot; in docker container

Here&#39;s the code:

    const test = Array.from(document.getElementsByClassName(&#39;mat-form-field-infix&#39;));
    test.forEach((element) =&gt; {
        element.outerHTML = &#39;&lt;div class=&quot;good-day-today&quot; style=&quot;width: 0px;&quot;&gt;&lt;/div&gt;&#39;; // Please note that this line works fine!
        element.style.padding = &#39;10px&#39;;
        element.style.borderTop = &#39;0&#39;;
    });

Error I get when compiled:

&gt; ERROR in src/app/***/***.component.ts(101,21): error TS2339: Property
&gt; &#39;style&#39; does not exist on type &#39;Element&#39;.
&gt; src/app/***/***.component.ts(102,21): error TS2339: Property &#39;style&#39;
&gt; does not exist on type &#39;Element&#39;.

How can I fix it?

I tried to remove the `Array.from...` part, tried to use `for of` and `for in`, tried `as any`, but above is the way I have to do it.

TS2339: Property &#39;style&#39; does not exist on type &#39;Element&#39;

Im building a Reactjs project and using scss instead of css.
In the App.scss file, I set opacity: 87%; (note: unit is percent).

Everything worked normally (the opacity value still equal 87%) when I run command: yarn start

But when I run command: yarn build and check value opacity in the file build/static/css/main.86352307.chunk.css then the opacity value was changed to 1%.

File App.scss:

    .App {
      text-align: center;
      opacity: 87%;
    }

After build project: File build/static/css/main.86352307.chunk.css

    .App{text-align:center;opacity:1%}
    /*# sourceMappingURL=main.86352307.chunk.css.map */

Step to reproduce issue

    #1. npx create-react-app my-app
    #2. cd my-app
    #3. yarn add node-sass
    #4. rename file App.css to App.scss and then add opacity: 87% in class .App

    #Testcase 1: run yarn start =&gt; the opacity value (87%) is apply for class .App
    #Testcase 2: run yarn build =&gt; the opacity value (1%) is apply for class .App

Please tell me know the reason.

The opacity value was changed to 1% after building the Reacjs project

Im building a Reactjs project and using scss instead of css.
In the App.scss file, I set opacity: 87%; (note: unit is percent).
Everything worked normally (the opacity value still equal 87%) when I run command: yarn start
But when I run command: yarn build and check value opacity in the file build/static/css/main.86352307.chunk.css then the opacity value was changed to 1%.
File App.scss:
<pre><code class="hljs language-css">.App {
 text-align: center;
 opacity: 87%;
}
</code></pre>
After build project: File build/static/css/main.86352307.chunk.css
<pre><code class="hljs language-css">.App{text-align:center;opacity:1%}
/*# sourceMappingURL=main.86352307.chunk.css.map */
</code></pre>
Step to reproduce issue
<pre><code class="hljs language-bash">#1. npx create-react-app my-app
#2. cd my-app
#3. yarn add node-sass
#4. rename file App.css to App.scss and then add opacity: 87% in class .App

#Testcase 1: run yarn start => the opacity value (87%) is apply for class .App
#Testcase 2: run yarn build => the opacity value (1%) is apply for class .App
</code></pre>
Please tell me know the reason.

The standard way to use a React useState Hook is the following:

```
const [count, setCount] = useState(0);
```

However this `const count` variable is clearly going to be reassigned to a different primitive value.

Why then is the variable not defined as `let count`?

Why React Hook useState uses const and not let

I&#39;m having a hard time understanding the &#39;exhaustive-deps&#39; lint rule.

I already read [this post][1] and [this post][2] but I could not find an answer.

Here is a simple React component with the lint issue: 

    const MyCustomComponent = ({onChange}) =&gt; {
        const [value, setValue] = useState(&#39;&#39;);
    
        useEffect(() =&gt; {
            onChange(value);
        }, [value]);
    
        return (
            &lt;input 
               value={value} 
               type=&#39;text&#39; 
               onChange={(event) =&gt; setValue(event.target.value)}&gt;
            &lt;/input&gt;
        )
    } 
    
It requires me to add `onChange` to the `useEffect` dependencies array. But in my understanding `onChange` will never change, so it should not be there.

Usually I manage it like this: 

    const MyCustomComponent = ({onChange}) =&gt; {
        const [value, setValue] = useState(&#39;&#39;);
    
        const handleChange = (event) =&gt; {
            setValue(event.target.value);
            onChange(event.target.value)
        }
    
        return (
            &lt;input 
               value={value} 
               type=&#39;text&#39;
               onChange={handleChange}&gt;
            &lt;/input&gt; ​
        )
    } 

Why the lint? Any clear explanation about the lint rule for the first example?

*Or should I not be using `useEffect` here? (I&#39;m a noob with hooks)*

  [1]: https://stackoverflow.com/questions/58549846/react-useeffect-hook-with-warning-react-hooks-exhaustive-deps
  [2]: https://stackoverflow.com/questions/57983717/designing-react-hooks-prevent-react-hooks-exhaustive-deps-warning


Understanding the React Hooks &#39;exhaustive-deps&#39; lint rule

I have learnt to use animation in CSS using `@keyframe`. I however want to write my custom animation code to my React project (using MUI). My challenge is how I can write the Javascript code to custom my animations using the `makeStyle()` in MUI.

I want to be able to custom the transitions processes in percentages
this time around in MUI. I need to be able to write codes like this in `makeStyle()` but I don&#39;t seem to know how to.

&lt;!-- language: lang-css --&gt;

    @keyframes myEffect {
     0%{
      opacity:0;
      transform: translateY(-200%); 
     }

    100% {
      opacity:1;
      transform: translateY(0);
     }
    }



How to apply custom animation effect @keyframes in MUI?

I&#39;ve just started using Cypress with my React Typescript project. I&#39;ve gotten some simple tests to run:

```js
describe(&#39;settings page&#39;, () =&gt; {
  beforeEach(() =&gt; {
    cy.visit(&#39;http://localhost:3000&#39;)
  });
  it(&#39;starts in a waiting state, with no settings.&#39;, () =&gt; {
    cy.contains(&#39;Waiting for settings...&#39;)
  });
  it(&#39;shows settings once settings are received&#39;, () =&gt; {
    const state = cy.window().its(&#39;store&#39;).invoke(&#39;getState&#39;)
    console.log(state) // different question: how do I get this to be the state and not a $Chainer?
  });
});
```

It runs in Cypress just fine. But I get Typescript errors in Webstorm, saying that `cy` is not defined (a TS and ESlint error) and an error on `describe` saying `all files must be modules when the --isolatedModules flag is provided`.

I can make it a JS file instead of a TS file, then I still get `cy` is not defined.

I&#39;ve tried `import cy from &#39;cypress&#39;` but then I get `ParseError: &#39;import&#39; and &#39;export&#39; may appear only with &#39;sourceType: module&#39;` which is a whole other can of worms (I&#39;m taking baby steps in writing my tests and haven&#39;t had to import anything yet...)

`/// &lt;reference types=&quot;cypress&quot; /&gt;` **does not work.**

### Update (sort of)
I&#39;ve followed instructions [here][1] and have made a little progress. To my already very full React webpack.config.dev.js I added the recommended code:
```js
          { // TODO inserted for cypress https://stackoverflow.com/a/56693706/6826164
            rules: [
              {
                test: /\.tsx?$/,
                use: &#39;ts-loader&#39;,
                exclude: /node_modules/
              }
            ]
          },
```

to the end of the list of rules (just before the file loader).

When I do this as well as setting up the `plugins/index` file as indicated in the article, the cypress &quot;home screen&quot; runs but when I click to open my tests, it takes very many seconds and then shows lots of errors, starting with 
```
integration\settings.spec.ts
This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

A missing file or dependency
A syntax error in the file or one of its dependencies
Fix the error in your code and re-run your tests.

./cypress/integration/settings.spec.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: TypeScript emitted no output for C:\Users\...\...\front_end\cypress\integration\settings.spec.ts.
 @ multi ./cypress/integration/settings.spec.ts main[0]
```

Followed by, actually, a lot of Typescript output such as this:
```
C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx
[tsl] ERROR in C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx(37,41)
      TS2339: Property &#39;toBeTruthy&#39; does not exist on type &#39;Assertion&#39;.

C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx
[tsl] ERROR in C:\Users\jtuzman\dev\...\...\src\__tests__\Errors.test.tsx(41,45)
      TS2339: Property &#39;toBeDefined&#39; does not exist on type &#39;Assertion&#39;.
```

Notice that these are now errors for code outside the test files (although perhaps that makes sense). Many of them are for files in which I&#39;m using Jest rather than Cypress, and many errors, as you can see, seem to be related to it inferring an `Assertion` type on `expect` that is not Jest, such that it thinks the `toEqual` matcher is wrong. 

All the while, in Webstorm ESLint is still complaining about all my `cy` and TypeScript is underlining all those Jest assertions mentioned in the output.

This is all with a ts test file. If I rename the file to js, it says the file has no tests.

Any help? I love Cypress but I&#39;m having a hell of a time getting it to work fully!

  [1]: https://glebbahmutov.com/blog/use-typescript-with-cypress/

ESLint: &#39;cy&#39; is not defined (Cypress)

When I type the `create-react-app my-app` command in my terminal, it appears to work - downloading all libraries successfully etc. At the end of that process however I get a message that a `template was not provided`.

Input

    user@users-MacBook-Pro-2 Desktop% create-react-app my-app

Output

    Creating a new React app in /Users/user/Desktop/my-app.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts...
    ..... nothing out of the ordinary here .....
    ✨  Done in 27.28s.
    
    A template was not provided. This is likely because you&#39;re using an outdated version of create-react-app.
    Please note that global installs of create-react-app are no longer supported.

In package.json of `my-app`:

    &quot;dependencies&quot;: {
      &quot;react&quot;: &quot;^16.12.0&quot;,
      &quot;react-dom&quot;: &quot;^16.12.0&quot;,
      &quot;react-scripts&quot;: &quot;3.3.0&quot; &lt;-- up-to-date
    }

I checked out the CRA [changelog][1] and it looks like support was added for custom templates - however it doesn&#39;t look like the command `create-react-app my-app` would have changed. 

Any idea what is going on here?


  [1]: https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md

Template not provided using create-react-app

I&#39;ve created a blank React project, using the command: ```npx create-react-app``` on npm v7.0.7 and Node.js v15.0.1

Installed:
- React v17.0.1,
- node-sass v5.0.0,

Then I tried to import a blank .scss file to the App component:

### File *App.js*

```
import &#39;./App.scss&#39;

function App() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      App
    &lt;/div&gt;
  );
}

export default App;
```

***It throws an error:***

```
Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
```

### File *package.json*

```
{
  &quot;name&quot;: &quot;react-17-node-sass-5&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.5&quot;,
    &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
    &quot;node-sass&quot;: &quot;^5.0.0&quot;,
    &quot;react&quot;: &quot;^17.0.1&quot;,
    &quot;react-dom&quot;: &quot;^17.0.1&quot;,
    &quot;react-scripts&quot;: &quot;4.0.0&quot;,
    &quot;web-vitals&quot;: &quot;^0.2.4&quot;
  },
 ...

  }
}
```






Error: &#39;node-sass&#39; version 5.0.0 is incompatible with ^4.0.0


My problem seems similar to [this](https://github.com/microsoft/node-pty/issues/441#issue-746076016) issue, except it happens when I run `yarn install` in a rails app. 

When I run `yarn install`, it runs successfully for some time, then 

```
../src/libsass/src/ast.hpp:1614:25: warning: loop variable &#39;numerator&#39; of type &#39;const std::__1::basic_string&lt;char&gt;&#39; creates a copy from type &#39;const std::__1::basic_string&lt;char&gt;&#39; [-Wrange-loop-analysis]
        for (const auto numerator : numerators)
                        ^
../src/libsass/src/ast.hpp:1614:14: note: use reference type &#39;const std::__1::basic_string&lt;char&gt; &amp;&#39; to prevent copying
        for (const auto numerator : numerators)
             ^~~~~~~~~~~~~~~~~~~~~~
                        &amp;
../src/libsass/src/ast.hpp:1616:25: warning: loop variable &#39;denominator&#39; of type &#39;const std::__1::basic_string&lt;char&gt;&#39; creates a copy from type &#39;const std::__1::basic_string&lt;char&gt;&#39; [-Wrange-loop-analysis]
        for (const auto denominator : denominators)
                        ^
../src/libsass/src/ast.hpp:1616:14: note: use reference type &#39;const std::__1::basic_string&lt;char&gt; &amp;&#39; to prevent copying
        for (const auto denominator : denominators)
             ^~~~~~~~~~~~~~~~~~~~~~~~
                        &amp;
2 warnings generated.
  rm -f Release/sass.a &amp;&amp; ./gyp-mac-tool filter-libtool libtool  -static -o Release/sass.a Release/obj.target/libsass/src/libsass/src/ast.o Release/obj.target/libsass/src/libsass/src/ast_fwd_decl.o Release/obj.target/libsass/src/libsass/src/backtrace.o Release/obj.target/libsass/src/libsass/src/base64vlq.o Release/obj.target/libsass/src/libsass/src/bind.o Release/obj.target/libsass/src/libsass/src/cencode.o Release/obj.target/libsass/src/libsass/src/check_nesting.o Release/obj.target/libsass/src/libsass/src/color_maps.o Release/obj.target/libsass/src/libsass/src/constants.o Release/obj.target/libsass/src/libsass/src/context.o Release/obj.target/libsass/src/libsass/src/cssize.o Release/obj.target/libsass/src/libsass/src/emitter.o Release/obj.target/libsass/src/libsass/src/environment.o Release/obj.target/libsass/src/libsass/src/error_handling.o Release/obj.target/libsass/src/libsass/src/eval.o Release/obj.target/libsass/src/libsass/src/expand.o Release/obj.target/libsass/src/libsass/src/extend.o Release/obj.target/libsass/src/libsass/src/file.o Release/obj.target/libsass/src/libsass/src/functions.o Release/obj.target/libsass/src/libsass/src/inspect.o Release/obj.target/libsass/src/libsass/src/json.o Release/obj.target/libsass/src/libsass/src/lexer.o Release/obj.target/libsass/src/libsass/src/listize.o Release/obj.target/libsass/src/libsass/src/memory/SharedPtr.o Release/obj.target/libsass/src/libsass/src/node.o Release/obj.target/libsass/src/libsass/src/operators.o Release/obj.target/libsass/src/libsass/src/output.o Release/obj.target/libsass/src/libsass/src/parser.o Release/obj.target/libsass/src/libsass/src/plugins.o Release/obj.target/libsass/src/libsass/src/position.o Release/obj.target/libsass/src/libsass/src/prelexer.o Release/obj.target/libsass/src/libsass/src/remove_placeholders.o Release/obj.target/libsass/src/libsass/src/sass.o Release/obj.target/libsass/src/libsass/src/sass2scss.o Release/obj.target/libsass/src/libsass/src/sass_context.o Release/obj.target/libsass/src/libsass/src/sass_functions.o Release/obj.target/libsass/src/libsass/src/sass_util.o Release/obj.target/libsass/src/libsass/src/sass_values.o Release/obj.target/libsass/src/libsass/src/source_map.o Release/obj.target/libsass/src/libsass/src/subset_map.o Release/obj.target/libsass/src/libsass/src/to_c.o Release/obj.target/libsass/src/libsass/src/to_value.o Release/obj.target/libsass/src/libsass/src/units.o Release/obj.target/libsass/src/libsass/src/utf8_string.o Release/obj.target/libsass/src/libsass/src/util.o Release/obj.target/libsass/src/libsass/src/values.o
  c++ &#39;-DNODE_GYP_MODULE_NAME=binding&#39; &#39;-DUSING_UV_SHARED=1&#39; &#39;-DUSING_V8_SHARED=1&#39; &#39;-DV8_DEPRECATION_WARNINGS=1&#39; &#39;-DV8_DEPRECATION_WARNINGS&#39; &#39;-DV8_IMMINENT_DEPRECATION_WARNINGS&#39; &#39;-D_GLIBCXX_USE_CXX11_ABI=1&#39; &#39;-D_DARWIN_USE_64_BIT_INODE=1&#39; &#39;-D_LARGEFILE_SOURCE&#39; &#39;-D_FILE_OFFSET_BITS=64&#39; &#39;-DBUILDING_NODE_EXTENSION&#39; -I/Users/st/.node-gyp/16.0.0/include/node -I/Users/st/.node-gyp/16.0.0/src -I/Users/st/.node-gyp/16.0.0/deps/openssl/config -I/Users/st/.node-gyp/16.0.0/deps/openssl/openssl/include -I/Users/st/.node-gyp/16.0.0/deps/uv/include -I/Users/st/.node-gyp/16.0.0/deps/zlib -I/Users/st/.node-gyp/16.0.0/deps/v8/include -I../../nan -I../src/libsass/include  -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-rtti -fno-exceptions -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/binding/src/binding.o.d.raw   -c -o Release/obj.target/binding/src/binding.o ../src/binding.cpp
In file included from ../src/binding.cpp:1:
In file included from ../../nan/nan.h:56:
In file included from /Users/st/.node-gyp/16.0.0/include/node/node.h:63:
In file included from /Users/st/.node-gyp/16.0.0/include/node/v8.h:30:
/Users/st/.node-gyp/16.0.0/include/node/v8-internal.h:452:38: error: no template named &#39;remove_cv_t&#39; in namespace &#39;std&#39;; did you mean &#39;remove_cv&#39;?
            !std::is_same&lt;Data, std::remove_cv_t&lt;T&gt;&gt;::value&gt;::Perform(data);
                                ~~~~~^~~~~~~~~~~
                                     remove_cv
/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/../include/c++/v1/type_traits:697:50: note: &#39;remove_cv&#39; declared here
template &lt;class _Tp&gt; struct _LIBCPP_TEMPLATE_VIS remove_cv
                                                 ^
1 error generated.
make: *** [Release/obj.target/binding/src/binding.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/st/rails/myapp/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (node:events:365:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
gyp ERR! System Darwin 20.3.0
gyp ERR! command &quot;/usr/local/Cellar/node/16.0.0/bin/node&quot; &quot;/Users/st/rails/myapp/node_modules/node-gyp/bin/node-gyp.js&quot; &quot;rebuild&quot; &quot;--verbose&quot; &quot;--libsass_ext=&quot; &quot;--libsass_cflags=&quot; &quot;--libsass_ldflags=&quot; &quot;--libsass_library=&quot;
gyp ERR! cwd /Users/st/rails/myapp/node_modules/node-sass
gyp ERR! node -v v16.0.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
```

Any ideas how to solve this? (I&#39;m not even sure if it&#39;s a problem with xcode/node/rails/c++)


Other notes

- `/usr/bin/xcodebuild -version` returns

```
Xcode 12.4
Build version 12D4e
```

- `cpp --version` returns

```
Apple clang version 12.0.0 (clang-1200.0.32.29)
Target: x86_64-apple-darwin20.3.0
Thread model: posix
InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin
```


Please note: I don&#39;t code in cpp, so I have very little contextual knowledge of how to solve. 


Content Type	Original Author	Original Content on Stackoverflow
Question	Ho Van	View Question on Stackoverflow
Solution 1 - Reactjs	Scott Daniel	View Answer on Stackoverflow
Solution 2 - Reactjs	Sai Chandra	View Answer on Stackoverflow
Solution 3 - Reactjs	Anand Raja	View Answer on Stackoverflow

The opacity value was changed to 1% after building the Reacjs project

Reactjs Problem Overview

Reactjs Solutions

Solution 1 - Reactjs

Solution 2 - Reactjs

Solution 3 - Reactjs

TS2339: Property 'style' does not exist on type 'Element'

MYSQL_ROOT_PASSWORD is set but getting "Access denied for user 'root'@'localhost' (using password: YES)" in docker container

Attributions