We have a project using #material-ui. It's built upon:
create-react-app: 3.4
node: 10.18.1
yarn: 1.21.1
#material-ui: 4.9.x
This problem is weird: i can yarn start and yarn build locally, the versions are exactly the same as server. However, after I push to server, it failed:
[4/4] Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ #material-ui/icons#4.9.1
info All dependencies
└─ #material-ui/icons#4.9.1
Done in 8.27s.
+ yarn run build:dev
yarn run v1.21.1
$ cp .env.sample .env && react-scripts build
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
Creating an optimized production build...
Failed to compile.
./node_modules/#material-ui/icons/esm/index.js
Cannot find module: './AccessAlarm'. Make sure this package is installed.
You can install this package by running: yarn add ./AccessAlarm.
The building steps on server is:
node -v
rm yarn.lock
rm -rf build node_modules
yarn install
yarn add #material-ui/core // I have tried to run with and w/o these two lines
yarn add #material-ui/icons
yarn run build:dev
Anyone has any ideas about this? Thanks.
yarn cache clean does the trick.
In my case the error was occuring locally and this is what fixed it:
yarn add #material-ui/core
Then
yarn link
Then
yarn upgrade #material-ui/core
Then
yarn upgrade #material-ui/icons
Then
npm start
Related
I'm having the issue that's faced in this question: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema
One of the solutions is to downgrade react-scripts to 4.0.3 and I'm not sure how to do that. Could someone help me?
Could always delete your node_modules directory and change the version in your package.json under dependencies:
"dependencies": {
"react-scripts" :"5.0.1",
}
then run an install. It's better to do a terminal approach when looking to change versions of a package, like:
NPM
uninstall:
npm uninstall react-scripts
install:
npm install --save react-scripts#4.0.3
Yarn
since Yarn is the preferred for Create React App per memory:
uninstall:
yarn remove react-scripts
install:
yarn add react-scripts#4.0.3
You have at least 2 options.
First, in your project folder you run the following command:
npm i react-scripts#4.0.3
Source: https://www.npmjs.com/package/react-scripts/v/4.0.3?activeTab=versions
Second, you open your package.json file in your project and change the version number of react-scripts to 4.0.3
"dependencies": {
"react-scripts" :"4.0.3",
...
}
and run npm i.
This will upgrade or downgrade everything to the version that are stated in your package.json file.
I already uninstalled yarn but when I run node package execute (npx) create-react-app, yarn lock is still there but i can run it with node package manager (npm) start. How can I get I back to package-lock json or npm version when i create-react-app using npx create-react-app.
I wanna use npm for react and react-native projects.
Just delete the yarn.lock and run npm install and it will generate a package-lock.json.
package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json
I write a react app and tried to dockerized it.
after i do this it doesn't compile corectly, it doesn't find "sass" module and this is my error:
Failed to compile.
./src/index.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/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.scss)
Cannot find module 'sass'
Require stack:
- /app/node_modules/sass-loader/dist/utils.js
- /app/node_modules/sass-loader/dist/index.js
- /app/node_modules/sass-loader/dist/cjs.js
- /app/node_modules/loader-runner/lib/loadLoader.js
- /app/node_modules/loader-runner/lib/LoaderRunner.js
- /app/node_modules/webpack/lib/NormalModule.js
- /app/node_modules/webpack/lib/NormalModuleFactory.js
- /app/node_modules/webpack/lib/Compiler.js
- /app/node_modules/webpack/lib/webpack.js
- /app/node_modules/react-scripts/scripts/start.js
and this is my dockerfile:
From node:14.16.1-alpine
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts#4.0.3 -g --silent
COPY . ./
CMD ["npm", "start"]
and I don't have docker-compose.
any solution?
I add this line to my docker file but it doesn't work and gets me same Error:
RUN npm install -g sass
To note! node-sass is deprecated as by now!
Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.
Instead you can see that Sass is followed on the Dart sass project!
react-scripts already moved that direction!
The used package now is sass! npm i -g sass or npm i sass --save-dev
If you go to npm sass page
This package is a distribution of Dart Sass, compiled to pure JavaScript with no native code or external dependencies. It provides a command-line sass executable and a Node.js API.
You can install Sass globally using npm install -g sass which will provide access to the sass executable. You can also add it to your project using npm install --save-dev sass. This provides the executable as well as a library.
What should be done
Install sass
Globally
npm i -g sass
or
Locally
npm i sass --save-dev
I personally prefer to always go with local installs! So that npm install will add it automatically! Sometimes too to maintain the versions per project!
And
App compilling and running after install!
old version of react scripts
If you are running on an old version that require node-sass!
Then you can Update to the latest version! And before that! You may like to remove node_modules and package-lock.json.
npm i react-scripts --save
After that npm install to install again the project dependencies
And you can go for installing sass step
npm cache clear --force
npm install sass
To be clear:
1st) try uninstalling it by using this command
npm uninstall node-sass
and then 2nd) try installing sass
npm install --save-dev sass
this worked for me when I was having issues installing sass on a project using create react app
I solve it!
you just need to add this line in to your "dockerfile" so when you build your docker image it should install sass automaticly:
RUN npm install -g sass
and in your "package.json" add this in the "dependencies" that it tells to program what we have in this case we mean we have the specific version of "sass":
"sass": "version number(example:^5.0.0)"
and add this in "scripts" part that tells to program how to work in this case I think it tells that for "scss" files whatch that file and recognize and open it like a "css":
"scss": "sass --whatch scss -o css"
Try install in your terminal this
npm install --save-dev node-sass
and restart your localhost by typing
npm start
Hit Enter on your prompt
After doing these steps make sure to check your dependency go into
package.json
and find
"devDependencies": {
"node-sass": "^yourversion" }
How to add support for SCSS and SCSS modules in Webpack
npm install --save-dev node-sass sass-loader style-loader css-loader mini-css-extract-plugin
Source: https://www.developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/#how-to-add-support-for-scss-and-scss-modules-in-webpack
I'm having trouble to create npx create-react-app .
➤ YN0009: │ core-js#npm:2.6.11 couldn't be built successfully (exit code 1, logs can be found here: /C:/Users/acer/AppData/Local/Temp/logfile-10088VPjTiMAhqTi1.log)
➤ YN0009: │ fsevents#patch:fsevents#npm%3A1.2.12#builtin<compat/fsevents>::version=1.2.12&hash=77dfe6 couldn't be built successfully (exit code 1, logs can be found here: /C:/Users/acer/AppData/Local/Temp/logfile-10088GGXEekcVAsh7.log)
➤ YN0009: │ core-js-pure#npm:3.6.4 couldn't be built successfully (exit code 1, logs can be found here: /C:/Users/acer/AppData/Local/Temp/logfile-10088HJnNDOaZdPmT.log)
➤ YN0009: │ core-js#npm:3.6.4 couldn't be built successfully (exit code 1, logs can be found here: /C:/Users/acer/AppData/Local/Temp/logfile-10088nbZGburV304n.log)
➤ YN0000: └ Completed in 17.86s
➤ YN0000: Failed with errors in 49.26s
Aborting installation.
yarnpkg add --exact react react-dom react-scripts cra-template --cwd C:\Users\acer\Desktop\coding tutorial\raraa_react has failed.
Deleting generated file... package.json
Deleting generated file... yarn.lock
Done.
i also used the yarn cache clean and npm cache clean --force.
But nothing is work. Pls help me.
This works for me:
npm install -g npm#latest
npm install node
npm install -g yarn
yarn cache clean
npx create-react-app my-app
check if this file 'C:\Users\your user name\.yarnrc' is not hidden.
it helped me.
If you are using yarn so try cleaning cache.
yarn cache clean this way worked on my end.
try re-installing or updating node and npx. That should do the trick.
for me this was causing me some issues, so I completely uninstalled yarn and yarn globally and this worked
npm uninstall yarn
then:
npm uninstall -g yarn
Then you can reinstall yarn again.
I have similar problem, but not exactly the same.
My error is: cra-template#npm:1.1.2 isn't supported by any available linker
This is yarn problem with new option (PNP, pack node_modules folder into zip)
I solved this by editing yarn configuration file.
Windows: C:\Users\USER\.yarnrc.yml
In this file (even after reinstal whole node) i have (don't know why): nodeLinker: nodeLinker
I check this new option PNP (nodeLinker: pnp), but react is not compatible with this.
So i changed this to - nodeLinker: node_modules
And now is everything ok.
just update your latest npm or yarn package like that :
npm install --global yarn
try to update the node version to latest /curremt version , it works in my case
I had the same errors on yarn install command and what worked in my case was to clean the C:\Users\USER\.yarnrc.yml
And then:
yarn cache clean
yarn install
My application was working just well. Until I wanted to use angular-in-memory-web-api which returned undefined.
I thought updating my angular-cli to latest may work. But now I get the 'Cannot find module '#angular/core'.
Here are the steps I used for updating:
Updating angular-cli
To update angular-cli to a new version, you must update both the global package and your project's local package.
Global package:
npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli#latest
Local project package:
rm -rf node_modules dist tmp
npm install --save-dev angular-cli#latest
ng init
Looks like you deleted the node_modules folder. Try running "npm install" again.