I am trying to update my react library from 16 to 17 for Material UI v5 migration, but was unable to update one of the dependencies.
When I try to update materialui-daterange-picker with a forked repo, I get a module not found error.
Command used
npm install 'https://gitpkg.now.sh/jungsoft/materialui-daterange-picker/package?master'
Error
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'materialui-daterange-picker'...
In my package.json, I have the following line
{
"materialui-daterange-picker": "https://gitpkg.now.sh/jungsoft/materialui-daterange-picker/package?master"
}
Code
import { DateRangePicker } from 'materialui-daterange-picker'
Related
I have installed an npm package on my react application but everytime I try to compile I get this error:
Module not found: Error: Can't resolve 'serialport' in 'C:\Users\Username\Desktop\ProjectGroup\c-test\src'
I have checked the node_modules folder and it is in fact in that folder.
i have also tried to install it again but it still throws the same error.
How would I go about fixing this?
As shown in comments, you installed only the types which are usefull for TypeScript.
Run npm i serialport
I am following the fontawesome documentation on how to add icons with react.
https://fontawesome.com/v6/docs/web/use-with/react/add-icons
I have added babel.config.js and babel-plugin-macros.config.js files in my root directory. Code for both of those file could be viewed in the documentation link attached.
I am getting the error as:
ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching was left unconfigured. Babel's plugins, presets, and .babelrc.js files can be configured
for various types of caching, using the first param of their handler functions:
i added api.cache(true) in my babel.config.js file but still the error persists.
Can anyone identify why this error is showing up?
I had the same issue, if you used create-react-app you could try ejecting the project and following the steps (I failed), but the way I got it to work is to follow https://fontawesome.com/v6/docs/web/use-with/react/
npm i --save #fortawesome/fontawesome-svg-core
npm i --save #fortawesome/free-solid-svg-icons
npm i --save #fortawesome/free-regular-svg-icons
npm i --save #fortawesome/react-fontawesome#latest
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faGear } from '#fortawesome/free-solid-svg-icons';
const gearIcon = <FontAwesomeIcon icon={faGear} />
...
render(<> {gearIcon} </>);
I have ran npm install #ant-design/react-native --save but I keep getting the error below:
error: Error: Unable to resolve module `#react-native-community/viewpager`
from `node_modules/#ant-design/react-native/lib/carousel/index.js`:
#react-native-community/viewpager could not be found within the project.
Why is happening? How do I fix this?
We are migrating CSS-loader from v0.28.11 to v3.1.0
We have 2 projects:
Project A- No component dependency on any other project - (containing some components)
Project B - We are importing Project A as node modules
We are able to run and build project A successfully.
But when we try to run Project B we getting a dependancy error for css files from Project A.
ERROR in ./src/help/css/about.qcss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve './Project/A/src/typography/css/qx-typography.css' in 'D:\Projects\B\src\help\css'
at factory.create (D:\Projects\B\node_modules\webpack\lib\Compilation.js:823:10)
at factory (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:397:22)
at resolver (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:130:21)
at asyncLib.parallel (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:224:22)
at D:\Projects\B\node_modules\neo-async\async.js:2830:7
at D:\Projects\B\node_modules\neo-async\async.js:6877:13
at normalResolver.resolve (D:\Projects\B\node_modules\webpack\lib\NormalModuleFactory.js:214:25)
at doResolve (D:\Projects\B\node_modules\enhanced-resolve\lib\Resolver.js:184:12)
at hook.callAsync (D:\Projects\rx\node_modules\enhanced-resolve\lib\Resolver.js:238:5)
at _fn0 (eval at create (D:\Projects\B\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
Same works fine with if we do css-loader of Project A to v3.1.0 and Project B to v1.0.0
But we get a compile-time error if we change both project css-loader version to 3.1.0
We should be able to run and create a build using CSS-loader with version 3.1.0
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cj s.js):
Error: Missing binding /home/user/frontloja/node_modul es/node-sass/vendor/ linux-x64-64/binding.node
Node Sass could not find a binding for your current environment : Linux 64-bit with Node.js 10.x
Found bindings for the following environments:
- Linux 64-bit with Node.js 12.x
In my case, it happened after I updated ubuntu 18 to 20, so I did it like this
remove or rename node_modules
then reinstall use npm or yarn install
This issue happens because of webpack resolve.alias not works
To solve this issue we can use the relative path.
In my case
Currently, I am in Projects\B\src\help\css
and requiring file from node_Modules
/Project/A/src/typography/css/qx-typography.css
so my path be like (**Relative Path**)
../../../../node_modules/Project/A/src/typography/css/qx-typography.css";
Error: ./src/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Failed to find 'bootstrap/dist/css/bootstrap.min.css'
Solution:
Run the following command for installing additional packages
npm install bootstrap jquery popper.js
I had this issue in my Angular project. It looks like a bootstrap issue. I just downgraded bootstrap from 5.1.3 to 4.6.0. That's all
I've just updated some Node modules in a React react project, but now when I go to localhost:3000 I get a Failed to compile error because ./node_modules/jss-default-unit/lib/index.js was not found:
The packages I've upgraded are Material UI and react-scripts, as seen from a git diff of package.json:
How can I resolve this issue?
(This issue, https://github.com/cssinjs/react-jss/issues/146, describes a similar issue caused by Babel running on node_modules, but I wasn't able to find a webpack.config.js in node_modules/babel-loader to modify).
I resolved this by running npm install jss-default-unit and restarting the server with npm start.