Jan
22
11 hours ago
Activity icon
issue

m-nathani issue comment facebook/create-react-app

m-nathani
m-nathani

Incorrect order of CSS in build version

Is this a bug report?

Yes

Environment

npx create-react-app --info prints empty result for some reason.

Steps to Reproduce

Using CRA 3.0.1.

  1. create-react-app style_test
  2. npm i [email protected] --save
  3. In index.js import two CSS files - first, a reset CSS, second, the bootstrap CSS.
  4. Run dev server and production builds and compare results.

Expected Behavior

Both dev server and production builds should display text using bootstrap CSS.

Actual Behavior

Dev server works as expected, but production build contains two CSS chunks, one with bootstrap code and another with reset CSS, loaded in wrong order (bootstrap first). As a result, in production version text is not styled.

Bootstrap (and only bootstrap) appears in 2.*.chunk.css, while reset CSS and all my sass styles end up in main.*.chunk.css. What is the benefit of using two chunks, anyway? Just faster load times due to parallel loading of both scripts?

Reproducible Demo

https://github.com/d07RiV/style_test

m-nathani
m-nathani

Wow.. I faced this issue in create-react-app 4 ..

The Dev server css order changed to in production build,

For me css of a node_module is taking preceding over my css.

Is there any possible solution that cra provides ?

Found the solution.. it appears using the correct precedence of css with overrides of node_modules would change the order..

There are several rules ( applied in this order ) :

  1. inline css ( html style attribute ) overrides css rules in style tag and css file
  2. a more specific selector takes precedence over a less specific one
  3. rules that appear later in the code override earlier rules if both have the same specificity.
  4. A css rule with !important always takes precedence.

for more details check

Activity icon
issue

aqibmurtaza9 issue comment facebook/create-react-app

aqibmurtaza9
aqibmurtaza9

npx command does not work with visual studio code

npx : The term 'npx' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 npx_error

aqibmurtaza9
aqibmurtaza9
started
started time in 2 hours ago
Activity icon
issue

samurai71 issue facebook/create-react-app

samurai71
samurai71

Error

npx create-react-app end-to-round-react-app Need to install the following packages: create-react-app Ok to proceed? (y)

You are running create-react-app 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:

  • npm uninstall -g create-react-app
  • yarn global remove create-react-app

The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/getting-started/

I don't have create-react-app installed globally on my MacBook pro however it say that it is please help

started
started time in 4 hours ago
started
started time in 4 hours ago
Activity icon
issue

Wemmons831 issue comment facebook/create-react-app

Wemmons831
Wemmons831

v5 used to include polyfills for node.js core modules by default

Describe the bug

Compiled with problems

Did you try recovering your dependencies?

yarn --version
1.22.15

Which terms did you search for in User Guide?

react-scripts 5 webpack Module not found: Error: Can't resolve 'fs'

Environment

npx create-react-app --info

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/xxx/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 12.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
  Binaries:
    Node: 16.13.0 - /usr/local/Cellar/[email protected]/16.13.0/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/Cellar/[email protected]/16.13.0/bin/npm
  Browsers:
    Chrome: 96.0.4664.93
    Edge: Not Found
    Firefox: 94.0.1
    Safari: 15.1
  npmPackages:
    react:  17.0.2 
    react-dom:  17.0.2 
    react-scripts:  5.0.0 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

In a project with react-scripts v5.0.0

  1. yarn add -D dotenv
  2. yarn start

Expected behavior

Actual behavior

ERROR in ../../node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in '../node_modules/dotenv/lib'
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 26:13-28
Module not found: Error: Can't resolve 'path' in '../node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

ERROR in ../../node_modules/dotenv/lib/main.js 28:11-24
Module not found: Error: Can't resolve 'os' in '../node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
 @ ./src/config.ts 5:0-28 8:0-13
 @ ./src/index.tsx 17:0-66 27:19-27 29:23-43 30:23-43 34:35-60

3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
Wemmons831
Wemmons831

@illume there were no errors in the dev console. There were a couple of "Failed to parse source map from {file that exists}" that weren't there before though

Activity icon
issue

m-nathani issue comment facebook/create-react-app

m-nathani
m-nathani

Incorrect order of CSS in build version

Is this a bug report?

Yes

Environment

npx create-react-app --info prints empty result for some reason.

Steps to Reproduce

Using CRA 3.0.1.

  1. create-react-app style_test
  2. npm i [email protected] --save
  3. In index.js import two CSS files - first, a reset CSS, second, the bootstrap CSS.
  4. Run dev server and production builds and compare results.

Expected Behavior

Both dev server and production builds should display text using bootstrap CSS.

Actual Behavior

Dev server works as expected, but production build contains two CSS chunks, one with bootstrap code and another with reset CSS, loaded in wrong order (bootstrap first). As a result, in production version text is not styled.

Bootstrap (and only bootstrap) appears in 2.*.chunk.css, while reset CSS and all my sass styles end up in main.*.chunk.css. What is the benefit of using two chunks, anyway? Just faster load times due to parallel loading of both scripts?

Reproducible Demo

https://github.com/d07RiV/style_test

m-nathani
m-nathani

Wow.. I faced this issue in create-react-app 4 ..

The Dev server css order changed to in production build,

For me css of a node_module is taking preceding over my css.

Is there any possible solution that cra provides ?

started
started time in 8 hours ago
Previous