Cannot find module 'postcss-preset-env' error using create-react-app inside an npm workspace - create-react-app

I'm trying to add a create-react-app app inside a Turborepo monorepo.
Problem is that if I run npm install from the root of the monorepo and then try to start the CRA app by running npm run dev, I get the following error during compile time:
Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'postcss-preset-env'
I noticed that if I run npm install from within the CRA app folder (/apps/my-app), and then run npm run dev from the root of the monorepo, it runs just fine.
I also noted that depending from where I run npm install, the contents of /apps/my-app/node_modules will be different, but I think is the expected behaviour.
If I understand correctly the npm workspaces docs, you should always run npm install from the root of the monorepo.
Any idea on what I'm missing here?
I'm using npm 8.3.1.
Here is a public repo with an example: https://github.com/oncet/turborepo-cra

Related

How to tell Expo to install npm dependencies with --legacy-peerdeps option?

I'm trying to build my Expo mobile app locally.
When Expo starts the [INSTALL_DEPENDENCIES] step, it performs npm install. But in my case, I'm aware of a legacy package I'm using which is causing some problems. So, this step is broken and the build is failing.
I want to configure Expo to perform npm install --legacy-peer-deps instead of npm install.
In my case, I have rn-pdf-reader-js#4.1.1 with Expo SDK 46.
Is this option configurable?
After looking a little bit, I figured it out using:
Create .npmrc file in the project root directory with:
legacy-peer-deps=true
However, another option is to run npm config set legacy-peer-deps true in eas-build-pre-install hook.
In package.json, add the following to scripts:
"eas-build-pre-install": "npm config set legacy-peer-deps true"

Understanding difference between npx and npm

I'm struggling to develop a deeper understanding of npx. So in particular the difference between running a commmand with npm and npx. I understand that npx can execute a package from a URL, just one local npm package etc.. But for example here:
npx lerna run start --scope frontend --stream
What is the difference between
npx lerna run start
and
npm lerna run start
?
NPM - Manages packages but doesn't make life easy executing any.
NPX - A tool for executing Node packages.
NPX comes bundled with NPM version 5.2+.
NPM by itself does not simply run any package. It doesn't run any package as a matter of fact. If you want to run a package using NPM, you must specify that package in your package.json file.
When executables are installed via NPM packages, NPM links to them:
1.local installs have "links" created at ./node_modules/.bin/ directory.
2.global installs have "links" created from the global bin/ directory (e.g. /usr/local/bin) on Linux or at %AppData%/npm on Windows.

Unable to run vue application

I created a project using below command,
npm init vue#latest
The project was created like,
vue project setup
After that run below command,
npm install
then run the below command,
npm run dev
But I got the below error,
Error
Package.json File,
package.json
I tried all the way like cleared cache but couldn't helped me. Also reinstalled the node but didn't worked. Also given full permission to the folder.
npm version - 8.7.0
node version - v16.14.2
Can anyone help me?

After npm run build > dependency was not found VueJs

After
npm run build
When serving with
npm run serve -s dist
This dependency was not found:
/Users/zarpio/code/vuejs/p3-admin/dist in multi (webpack)-dev-server/client?http://192.168.31.234:8081/sockjs-node (webpack)/hot/dev-server.js ./dist, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://192.168.31.234:8081/sockjs-node ./dist
To install it, you can run: npm install --save /Users/zarpio/code/vuejs/p3-admin/dist
I believe there is a dependency your project has which you have not installed. Run npm install to install the necessary dependencies. sometimes npm gets messed up and i need to delete the entire node modules folder and then run npm install to get a fresh node modules setup.
just to clear some things up.the default vue cli configuration is that npm run serve will run your app live locally. the npm run build compiles your app into the dist folder which you then can serve from your server ( or something like the live server extension in VS code)

RN Expo issue - Something when wrong installing JavaScript dependencies. Check your npm logs. Continuing to initialize the app

I am using react native and Expo. I am unable to build new app because after I use expo init appName it shows the following error.
Heres the full message:
📦 Using npm to install packages. You can pass --yarn to use Yarn instead.
√ Downloaded and extracted project files.
× Something when wrong installing JavaScript dependencies. Check your npm logs. Continuing to initialize the app.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd Scanner
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
I tried multiple times to create a blank project, also tried npm install to install failed/not downloaded libraries and continue after failure but it showed another error:
npm ERR! code Z_BUF_ERROR
npm ERR! errno -5
npm ERR! zlib: unexpected end of file
also tried npm cache verify that showed cache is ok Content verified: 3562 (252580364 bytes).
So, How can I solve this issue?
Problems related to npm installation are very common If you do any mistake in early installation, but is avoided. Learn more about npm tree.
Steps worked for me are :
npm cache clean --force
npm cache verify
npm -g uninstall expo-cli --save
npm install expo-cli --global
expo init app-name
cd app-name
npm start
Always run as administrator if working on Windows and in root directory.
The solutions above didn't work for me but if you use 'npm install' in the directory of the app you get a clue that you shuold try 'npm install --force'
err message
You should have all these files folders and files at the start of the project otherwise not all the dependencies have been installed which is why we were getting the problem.folder structure
After you have added --force to npm install you have all the dependencies installed. Now you can run the app with npm start.
Unfortunately, all the solutions described above didn't work on my machine...
Here is my latest solution for this problem...
This worked 100% on my machine...
Use npm i -g expo-cli
This will automatically add the required packages and also remove the unnecessary ones.
Yes, surely, you don't need to uninstall and re-install it again.
Just follow my steps.
And, you can create your expo project using expo init.
I hope my solution will help you out from this annoying problem....
I just did npm install and it worked for me, but I had do that every time I create a new expo project.
I also encountered this problem, and finally found that it was the problem of react native cli,I installed the latest version of react native cli,Expo is back to normal
This Error is regarding to the git account. expos need a git account to setup react native project
If you are using windows you need to install git in your local PC
after that open your Terminal and type this command
git config --global user.name "your_username"
git config --global user.email "your_email_address#example.com"
after that clone any github project to your local computer. it will ask to login to Github
after all these steps try expo init <projectname>
The simple way to settle that error is by using "expo-cli init app-name" instead of "expo init app-name".
I tried and worked perfectly for me. Hope it will help you guys.
i have faced a similar problem and running yarn set version 1.22.1 fix it
Run the Command Prompt as an administrator. And run the following command:
npx create-expo-app AwesomeProject