Vue yarn build is using cached version - javascript

I am using VueJS and Yarn.
Problem is:
I was running yarn build AND npm run build but both create a dist folder with an old version of my code!
First time I face this problem.
What I have tried and checked:
I have tried to clear browser caching.
Tried to open from totally different device.
Run yarn cache clean and npm cache clean
But nothing worked! I always get an old version of code which I don't even know how!
Also I get this message while building saying:
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
EDIT:
I have fixed the asset size limit but still got the same problem!
yarn build compile a different old version than that yarn serve!

Related

I get an error when using the command "npm run start" for my react project

I am new to coding and would appreciate some help with this I get the following error when I try to run my react app: npm run start
Failed to compile.
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack:
/Users/abc/node_modules/postcss-loader/dist/utils.js
/Users/abc/node_modules/postcss-loader/dist/index.js
/Users/abc/node_modules/postcss-loader/dist/cjs.js
/Users/abc/node_modules/loader-runner/lib/loadLoader.js
/Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
/Users/abc/node_modules/webpack/lib/NormalModule.js
/Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
/Users/abc/node_modules/react-scripts/config/webpack.config.js
/Users/abc/node_modules/react-scripts/scripts/start.js
(#/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)
ERROR in ./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.css)
./node_modules/bootstrap/dist/css/bootstrap.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.css)
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-normalize" plugin failed: Cannot find module 'postcss-normalize'
Require stack:
/Users/abc/node_modules/postcss-loader/dist/utils.js
/Users/abc/node_modules/postcss-loader/dist/index.js
/Users/abc/node_modules/postcss-loader/dist/cjs.js
/Users/abc/node_modules/loader-runner/lib/loadLoader.js
/Users/abc/node_modules/loader-runner/lib/LoaderRunner.js
/Users/abc/node_modules/webpack/lib/NormalModule.js
/Users/abc/node_modules/webpack-manifest-plugin/dist/index.js
/Users/abc/node_modules/react-scripts/config/webpack.config.js
/Users/abc/node_modules/react-scripts/scripts/start.js
(#/Users/abc/node_modules/bootstrap/dist/css/bootstrap.css)
Thank you so much
I've tried updating to the latest version of node and npm, however, that did not help. I've also verified my code several times as I'm mostly practicing along with a course. Thank you.
As it appears this error will temporarily get fixed by installing the latest version of Node.js.
So to fix this follow these steps:
Download and install the latest Node.js version (recommended for most users, which is 16.15.0 at this moment).
Delete your node_modules directory from your project. Then you can optionally clear npm cache with npm cache clean and verify it with npm cache verify.
Delete package-lock.json/yarn.lock file.
Reinstall all of the dependencies and create a new dependency tree using one of the following commands: npm i/npm install/yarn/yarn install.
Note1: If in any case, you use node-sass in React projects yet, it is recommended to use sass instead.
Note2: In some cases skipping step 1 will also work as expected, but I recommend upgrading the Node.js version if you do not have other dependencies to prevent that.
Note3: As #IvaniltonBezerra mentions in the comments, some app builds may throw errors, since upgrading Node.js to its latest version will upgrade the npm as well it may not compatible with your current dependency tree in production, so to prevent such a problem you have to use --legacy-peer-deps to restore the old behaviour of the old dependencies.
Update
This is now seem to be permanently solved in PostCSS Preset Env and following the above steps with skipping step 1 will also solve the problem.

React native project stucks on :unimodules-react-native-adapter:generateExpoModulesPackageList

It is an expo-eject project and the commands I have used after cloning the project are:
Yarn,
Yarn start,
Yarn android,
And it does not show any error but gets stuck on a same point everytime when I try to run the project.
The project runs fine on the laptops of other teammates, but I am facing this issue.
Here are the versions of the installed tools:
Nodejs 14.17.6,
Expo 4.11.0,
React-native-cli 2.0.1,
I am adding an image that shows where the project gets blocked.
This is the issue in running project.
Had the same issue, and tried #usama-alaf reply, which consisted of:
Installing the right SDK for the Android device
Linking the SDK path under project/android/local.properties
But none of the above worked for me. Digging a little deeper, I found this Github issue from Willem Horsten, where the developer states that there was a yarn.lock file on one of his Hard Drives. I'm actually running my development environment on a secondary HD, and I also had a lock file in the root of the drive, but after deleting it, nothing changed.
Here's what actually worked for me. I was running Node v12, and trying to build the project, and trying to check whether the Node version was the culprit, I did this:
Deleted my node_modules, yarn.lock, and all other lock files I could find (for some reason there was also a package-lock.json file on the project)
Since I'm using NVM, I switched to Node v15.14.0 (the latest I have installed).
Installed the dependencies again with yarn install
Ran yarn android, and the build worked this time.

ElectronJS npm start / bash: electron-forge: command not found

My System:
Mac OSX 10.14.6
Electron: 10.1.5
electron-forge: ^6.0.0-beta.54
I've been working on an Electron side project. I started it using electron-forge, I had a small application functioning just fine, I then set it aside for a couple weeks. Coming back to it, I tried running npm start and it did nothing but return to a new terminal line. So I tried electron-forge start and it returned bash: electron-forge: command not found.
I tried deleting my node_modules folder and reinstalling, I tried creating a new electron-forge boilerplate, and neither made a difference. I tried installing electron-forge globally, but it errored out on the second step, and I found several stackoverflow articles saying I shouldn't have electron-forge installed globally. I haven't changed anything (that I know of) on a system level, but it seems to be a system issue, rather than a package issue, but I'm not knowledgable enough to do anything other than Google the errors and see what stacksoverflow articles are out there, but no articles have helped.
I'd love any and all help, Electron has ceased working on my system completely, and I have no idea how to troubleshoot it. Thanks in advance!
I ended up deleting and re-installing Node and that seems to have fixed it. Still not sure what caused the initial issue, but it's working again. For those interested, here's the resources I used:
https://stackabuse.com/how-to-uninstall-node-js-from-mac-osx/
https://pawelgrzybek.com/install-nodejs-installer-vs-homebrew-vs-nvm/
Update:
I kept having issues running npm start. What finally worked was to create a new boilerplate project using the CLI and copy the contents of the package-lock.json to the old project. That finally launched the app.
I know this is an old question but, I had the same issue and instead of uninstalling Node, I used rm -rf node_modules then I used npm cache clean --force. I reinstalled my dependencies and electron-forge worked again.
Use the command below
npm install electron

Linked npm library not updating locally

I have the following library https://github.com/codyc4321/react-data-components-updated
I installed it in my react project locally like npm i ~/react-data-components-updated
Now running my node server I don't get any changes no matter what I do. I am seeing old print statements which I deleted, and my new ones are not coming:
console.log('data in dataSort() in dataReducer.js:');
console.log(state.data);
doesn't show up.
I have constantly reinstalled like $ npm i ~/react-data-components-updated/ and it isn't helping. I was seeing weird errors affecting this location:
http://localhost:3001/__webpack_hmr
but right now I get a 200 for that address and it still isn't updating. How can I use this library locally and have my project update when it sees changes?
Problem is that your package got installed and is now in your-project-folder/node_modules, so in order for the modifications to replicate you have four options:
Directly modify the scripts in your-project-folder/node_modules/react-data-components-updated [not recommended]
Delete your-project-folder/node_modules/react-data-components-updated and run npm i ~/react-data-components-updated
Runnpm uninstall react-data-components-updated && npm i ~/react-data-components-updated so it reinstalls with the current files.
Go to ~/react-data-components-updated/package.json and upgrade the version manually (or by CLI) and then running npm update in your project.
Depending on your needs and how you're handling changes in your local package, one may be better than the other.

Yarn 5x slower on windows

When I add a new package to an existing installation where yarn install has already been run, it takes 5 minutes to add a new dependency, which is as slow as if I just did yarn install without node_modules there yet.
Is this normal?
I'm using Yarn 0.17.9 on Windows 10 x64. I did make Windows Defender ignore my project directory and yarn global cache directories.
EDIT: here are some benchmark results I did. Based on them, it seems that yarn add is actually 30-40% faster, and the real issue is rather just that yarn is 500% slower on Windows
EDIT 2: I have confirmed that indexing hasn't been enabled for the project and yarn cache directories. But now I have upgraded yarn from 0.16.1 to 0.17.9 and there was a 35-50% increase in speed in Windows! But it's still 350-400% slower than in Linux. I have updated the benchmarks.
There seems to be Github issue for the Windows performance issues: https://github.com/yarnpkg/yarn/issues/990
The benchmark:
--
Windows - yarn install (cached):
Done in 172.29s.
Ubuntu - yarn install (cache):
yarn install 48,75s user 11,32s system 117% cpu 51,161 total
--
Windows - yarn add lodash:
Done in 143.11s.
Ubuntu - yarn add lodash:
yarn add lodash 33,42s user 5,72s system 108% cpu 36,203 total
--
FYI the Ubuntu benchmarks were run on the same folder on the NTFS drive.
Project that was used for the benchmarks: https://github.com/amcsi/szeremi
Disabling windows search indexing on your work folder and yarn cache folder as well as disabling windows defender completely or on a folder should give you significant performance boost. I've got 30-50% decrease on similar system with SSD drive, originally timings were as yours.
Disabling it on Yarn cache folder would also give you some speedup. Its location is shown by yarn cache dir command, %USERPROFILE%\Local Settings\Yarn\cache by default.
To disable search indexing on a folder, find it in Explorer, right click, then Properties - General - Advanced, uncheck the "Allow files in this folder to have contents indexed in addition to file properties" checkbox, then Apply the changes.
This performance issue already exists on yarn github (Oct'2016) and is still open to the moment: https://github.com/yarnpkg/yarn/issues/990
My experience...
Doing a yarn start is excruciatingly slow.
My setup.
I am running WSL2 Ubuntu 20 on windows 10 home.
I have my WSL src directory a sym link to windows c:\Users\chai (as opposed to whatever filesystem WSL has me in ie. the native WSL filesystem).
ie.
Filesystem Size Used Avail Use% Mounted on
C:\ 476G 395G 82G 83% /mnt/c
I am running the yarn which is installed via WSL2 Ubuntu (ie. so it is the linux version, not the windows version of yarn).
V v slow.
I experimented and copied the same src files into a non-symlinked directory.
ie. under ~/tmp which is a WSL filesystem and not under the windows filesystem.
Filesystem Size Used Avail Use% Mounted on
/dev/sdb 251G 11G 228G 5% /
And the speed now is as per expected... ie. normal (or relative to previous behaviour, blindingly fast).
So I am now using the latter setup for my react projects.
For me worked downgrading from WSL2 to WSL1.
On WSL2 yarn install of my boilerplate took 890sec
on WSL1 - 245sec.
On standalone Ubuntu - 130sec.
https://github.com/microsoft/WSL/issues/4197
I used to have the same issue. It used to take 30+ Minutes to just install one package. I had my projects on an external drive and network drive and I tried adding scan virus exception path, opening firewall etc. None enhanced the speed. However, as soon as I git clone to, let say C:/New Folder/my repo. It took 1.5 seconds. I hope this resolves the issue for some developers.

Categories