I have created a small Email notification react project(GINX web application), which is now basically supporting HTML emails and Plain emails. Keeping an eye on the future, I want to include MJML also in my project but after installing npm mjml-react library and when I try to import any elements from that library, it is throwing an error which says Module not found: Can't resolve 'fs'
I am happy to get inputs from you guys on how to Render mjml-react library in my NGINX web application
Module not found: Error: Can't resolve 'fs' in 'C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\clean-css\lib\reader'
Module not found: Error: Can't resolve 'fs' in 'C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\clean-css\lib\reader'
Module not found: Error: Can't resolve 'fs' in
'C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\uglify-js\tools'
Module not found: Error: Can't resolve 'mjml' in
'C:\Users\malliar\Dap\Dap-ui\dap-management-ui\acceleratorUI\node_modules\mjml-react\dist\es\src'
I am new to react and when I add material ui data table to my salesTable.js, I have got an error like below.
ERROR in ./src/SalesTable/SalesTable.js 5:0-50
Module not found: Error: Can't resolve '#material-ui/data-grid' in 'D:\Pract
resolve '#material-ui/data-grid' in 'D:\Practice_react\react_sama\src\SalesT
Parsed request is a module
using description file: D:\Practice_react\react_sama\package.json (relativ
Field 'browser' doesn't contain a valid alias configuration
resolve as module
D:\Practice_react\react_sama\src\SalesTable\node_modules doesn't exist
D:\Practice_react\react_sama\src\node_modules doesn't exist or is not
looking for modules in D:\Practice_react\react_sama\node_modules
single file module
using description file: D:\Practice_react\react_sama\package.json
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\Practice_react\react_sama\node_modules\#material-ui\data-gr
.web.mjs
....
You can install additional packages with the following syntax:
npm install #mui/x-data-grid
The grid has a peer dependency on one MUI component. If you are not already using MUI in your project, you can install it with:
npm install #mui/material
You can read the documentation from this Data Grid - Getting started
When I add a new React component to my NextJS app (React, TypeScript and GraphQL), my local development environment suddenly breaks with this cryptic error:
wait - compiling...
error - ./node_modules/busboy/lib/main.js:1:0
Module not found: Can't resolve 'fs'
null
When I stash my new component, everything works fine. I'm trying to figure out what it is in my new component that's triggering this error.
Relevant dependencies:
#apollo/client: ^3.2.5
apollo-server-micro: ^2.18.2
graphql: ^15.4.0
next: 10.0.0
react: 17.0.1
react-dom: 17.0.1
Turns out I was importing gql from the wrong package. As I'm building both the server and the client in one app, I have to be careful importing the right methods from the right packages.
This line from my imports caused the error:
import { gql } from "apollo-micro-server
Changing the line to this fixed the error:
import { gql } from "#apollo/client"
React noob here. Trying to clone and run https://github.com/strangebnb/react-airbnb
I clone. run npm install. Then webpack but I get
ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/tom/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I found https://github.com/thereactivestack/meteor-webpack/issues/21 (I see this is very recent, read: yesterday), and after messing around with my packages.json, changing react, react-dom, material-ui version numbers and running npm i --save react-tap-event-plugin, I got down to 'only' 1 error message
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/react-airbnb/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I'm pretty new and I'm not sure how to go about fixing this. Any hints greatly welcomed.
Thanks
Due to update in React, react-tap-event-plugin breaks
Change react-tap-event-plugin to ^2.0.0 in your package.json if using react version ^15.4.0.
I forked that repo and fixed this issue in my repo. Also, sent pull request to the owner of original repo. Here's link to my forked repo:
https://github.com/pankajvishwani/react-airbnb
If you don't want to clone my repo, you can add the following in webpack.config.js:
var reactDomLibPath = path.join(__dirname, "./node_modules/react-dom/lib");
var alias = {};
["EventPluginHub", "EventConstants", "EventPluginUtils", "EventPropagators",
"SyntheticUIEvent", "CSSPropertyOperations", "ViewportMetrics"].forEach(function(filename){
alias["react/lib/"+filename] = path.join(__dirname, "./node_modules/react-dom/lib", filename);
});
module.exports = {
...
resolve: {alias: alias},
...
}
UPDATE: As of React 16 the react-tap-event-plugin is deprecated and no longer required https://www.npmjs.com/package/react-tap-event-plugin
Old solution redundant as of React 16
Updating the react tap event plugin to over 2.0.1 will fix your issue if you're using React 15.4.0.
A new React version has been released (https://github.com/facebook/react/blob/master/CHANGELOG.md), and I read recently that there have been big changes where react-dom still secretly lived on in the react package but is now being removed. If you read 15.4.0, the first point: 'React package and browser build no longer "secretly" includes React DOM. (#sebmarkbage in #7164 and #7168)'
Also reading the tap event plugins npm docs: Only the latest tap event plugin (v2.0.1 currently) supports React 15.4+. https://www.npmjs.com/package/react-tap-event-plugin
Check the version of React and react-tap-event-plugin.
npm list --depth=0
In the short term, you could fix React to a specific earlier version.
If your package.json file contains something like:
"react": "^15.3.2",
in the dependencies section, you could change it to say
"react": "=15.3.2”,
For react 16+ react-tap-event-plugin is not required anymore:
react-tap-event-plugin
I am using rewire prior to require method in my React/Flux app, to load components. But after installation I got this error:
ERROR in ./~/rewire/lib/rewire.js
Module not found: Error: Cannot resolve module 'module' in /Users/path/node_modules/rewire/lib
# ./~/rewire/lib/rewire.js 1:13-30
ERROR in ./~/rewire/lib/rewire.js
Module not found: Error: Cannot resolve module 'fs' in /Users/path/node_modules/rewire/lib
# ./~/rewire/lib/rewire.js 2:9-22
ERROR in ./~/rewire/lib/moduleEnv.js
Module not found: Error: Cannot resolve module 'module' in /Users/path/node_modules/rewire/lib
# ./~/rewire/lib/moduleEnv.js 3:13-30
ERROR in ./~/rewire/lib/moduleEnv.js
Module not found: Error: Cannot resolve module 'fs' in /Users/path/node_modules/rewire/lib
# ./~/rewire/lib/moduleEnv.js 4:9-22
While googling I found similar issue, but no desirable solution. Does anyone know what is the issue or conflict about and how to resolve it?
This is a webpack issue.
Since you're trying to use rewire, I'll assume you plan to run your tests through NodeJS and not a browser. Otherwise, check out rewire-webpack.
Rewire expects a NodeJS environment, but by default webpack targets a browser environment, and as such doesn't know about the standard NodeJS modules that rewire might depend on.
You need to set the target property of your webpack config to "node" in order to let webpack know it should consider standard NodeJS modules as externals.