Production postcss file mapping error ./

Musa · December 17, 2021, 5:59am

Hey there! I uploaded all of my git commits to my git repo here and I’m using Netlify’s continuous Deployment functionality. While looking at the production build logs I saw this error appear that I never experienced during development.

I went to change it but I noticed that node modules are never uploaded to my git repo meaning they are never uploaded to netlify . So I was confused how I was supposed to solve this thanks.

coelmay · December 17, 2021, 6:22am

Hi @Musa

This is because node_modules is in the .gitignore at the root of the repository.

This is normal. Netlify doesn’t need you to upload them. The Netlify Build Bots download the required modules based on the dependencies and devDependencies in the package.json in the root of the repository.

The error in the screenshot relates to this package which isn’t a direct dependency in your project but a dependency of react-scripts which is currently v4.0.3 in your project, but v5.0.0 is now available.

Check out Updating packages downloaded from the registry | npm Docs on how to update the packages used in your project to the latest versions which may remove this warning.

Musa · December 17, 2021, 6:24am

Haha I understand that I put its path in the gitignore, but thank you for the answer to the postcss error! Ill try it right now

Musa · December 17, 2021, 6:42am

Back again, my react-scripts is not updating whatsoever, and it says

coelmay · December 17, 2021, 7:03am

The semver (in the case of react-scripts) of 4.0.3 is as high as it can go. To upgrade this package from a v4 to a v5 you will need to explicitly specify the version e.g. npm install react-scripts@5.0.0.

Here is the nodeJS explanation of semver (a little dry perhaps reading perhaps.)

Musa · December 17, 2021, 2:21pm

Hey, colemay I uninstalled react-scripts using the link you gave me, tried to update it using npm i react-scripts@5.0.0 however this error now prevails.

nathanmartin · December 17, 2021, 2:28pm

@Musa If you look closely at the error you will see that you have a typo.
You have written react-scipts@5.0.0 instead of react-scripts@5.0.0.

Musa · December 17, 2021, 2:37pm

Right, thanks @nathanmartin I reinstalled react-scripts to its latest version however I get much more detrimental errors that werent present when using react-scripts 4.0.3.

Here are some, because I wanted to keep my project “working” I decided to install react-scripts 4.0.3 again here are the error from the latest react-version

hrishikesh · December 17, 2021, 2:58pm

Did you try doing as the error suggested? Looks like you simply need to add the file extension to the import statements.

Musa · December 17, 2021, 3:12pm

No, because I don’t think that should be a problem its even throwing it in module inside of a package

hrishikesh · December 17, 2021, 3:58pm

This issue might interest you in that case:

github.com/facebook/react

Bug: Cannot import 'react/jsx-runtime' from esm node/webpack 5

opened 03:31PM - 12 Nov 20 UTC

closed 05:37PM - 11 Apr 22 UTC

nstepien

Status: Unconfirmed

React version: 17.0.1 ## Steps To Reproduce 1. Create a new directory, `cd` to it. 2. Run `npm i react@17 webpack@5 webpack-cli@4` 3. Create `index.mjs` with the following content: ```js import * as jsx from 'react/jsx-runtime'; console.log(jsx); ``` 4. Run `node index.mjs` 5. Run `npx webpack-cli path/to/index.mjs` - I had to use an absolute path on my machine or webpack-cli wouldn't find `index.mjs`, don't know why.  Link to code example: --  ## The current behavior ``` > node index.mjs node:internal/process/esm_loader:74 internalBinding('errors').triggerUncaughtException( ^ Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\repos\jsx\node_modules\react\jsx-runtime' imported from D:\repos\jsx\index.mjs Did you mean to import react/jsx-runtime.js? at new NodeError (node:internal/errors:277:15) at finalizeResolution (node:internal/modules/esm/resolve:307:11) at moduleResolve (node:internal/modules/esm/resolve:742:10) at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:853:11) at Loader.resolve (node:internal/modules/esm/loader:85:40) at Loader.getModuleJob (node:internal/modules/esm/loader:229:28) at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:51:40) at link (node:internal/modules/esm/module_job:50:36) { code: 'ERR_MODULE_NOT_FOUND' } ``` ``` > npx webpack-cli D:\repos\jsx\index.mjs [webpack-cli] Compilation finished assets by status 264 bytes [cached] 1 asset ./index.mjs 64 bytes [built] [code generated] ERROR in ./index.mjs 1:0-41 Module not found: Error: Can't resolve 'react/jsx-runtime' in 'D:\repos\jsx' Did you mean 'jsx-runtime.js'? BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified (probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request. webpack 5.4.0 compiled with 1 error in 150 ms npm ERR! code 1 ``` ## The expected behavior No issues importing `react/jsx-runtime` with no file extensions. I can think of two solutions: - Fix babel, typescript, and all the other tools that automatically add the import to add the file extension. - That ship has sailed though, I don't think this is right thing to do. - Add the `exports` field in react's `package.json`. - This could also open the door to supporting prod/dev builds without depending on `process.env.NODE_ENV` for bundlers. - More discussion here: https://github.com/facebook/react/issues/11503#issuecomment-717589904 - https://nodejs.org/dist/latest/docs/api/packages.html - https://webpack.js.org/guides/package-exports/

Musa · December 18, 2021, 4:21am

I did try to make it ./homepage.js but more errors came

Musa · December 18, 2021, 4:23am

This website is due by today are there any other options i can take.

hrishikesh · December 18, 2021, 5:21pm

I don’t think so. From the issue I linked above, this doesn’t seem to be a Netlify-specific problem. You can choose to stay on a version that’s working.

Musa · December 18, 2021, 8:22pm

Why would create-react-app install a later version of react-scripts for me. I built the app on v4 with zero errors and now I come to v5 its broken. Is there any way for me to avoid this with future projects. Where am I able to determine the version of dependencies a command will install for me.

coelmay · December 18, 2021, 8:52pm

This would likely come down to the version of create-react-app used to configure the project. Using create-react-app (version 5.0.0) to set up a new project adds react-scripts@5.0.0.

If you have the project set up, there is no need to use create-react-app.

The version of a package is listed in the package.json file in the repository.

I downloaded the code in your repository (which still has react-scripts@4.0.3 and was able to run it locally.

Musa · December 18, 2021, 9:36pm

The version of a package is listed in the package.json file in the repository.

Yes I understand that it’s just that is there any website of react that tells me the versions of the dependencies before I download it.

coelmay · December 18, 2021, 10:00pm

The version of react-scripts installed by create-react-app matches the version of create-react-app. So if you use create-react-app@5.0.0 it will install react-scripts@5.0.0 as noted from the GitHub create-react-app releases.