We Keep Coding

Can't resolve error appears only in my webpack-build

I'm trying to import a module _module_name_ into my current react-project with typescript, say react-app for reference. The project is bundled up with webpack. I'm importing it into one of my .tsx components. The module that I am importing was written by me and I published it on npm. I'm getting a cannot resolve error when building my react project. It cannot resolve the fs module, apparently. I wonder what causes this problem? Here is the error output:
ERROR in ./node_modules/_module_name_/index.js 2:11-24
Module not found: Error: Can't resolve 'fs' in
'/path/to/project/node_modules/_module_name_'
resolve 'fs' in '/path/to/project/node_modules/_module_name_'
Parsed request is a module
using description file: /path/to/project/node_modules/_module_name_/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
The _module_name_ is extremely simple. For all practical purposes it looks like this:
// index.js
const path = require('path')
const fs = require('fs');
function foo() {
const abi = JSON.parse(fs.readFileSync('file.json', 'utf8'));
return abi
}
module.exports = {
foo
};
Then I have a typescript declaration file:
// index.d.ts
export function foo(): any;
Of course I have the file itself:
// file.json
{
"a": 1
}
and I have a package.json in that _module_name_ which contains at least the following entries:
// package.json
{
"main": "index.js",
"types": "./index.d.ts",
"dependencies": {
"fs": "^0.0.1-security",
...
}
...
}
Remark: When I am in my react project react-app I have no problems importing foo in any old javascript file or typescript file. It will work perfectly unless it's part of the react app. How strange is that. Maybe it has to do with my webpack loaders, cause I'm using webpack to bundle the app.
Question: Is the problem on the side of the _module_name_ or on the side of the react-app?

just had a quick read, but basically you are trying to use nodeJS in the browser. that's not a good idea. have a look here: Can't resolve 'fs' using webpack and react
requiring the files and then parsing should work

Invariant Violation: Module `AppRegistry` is not a registered callable module (calling `runApplication`). and etc

I am making a project using react-native, when I added drawer navigation it started giving me an error as:
Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
so when I search for the solution I came across this answer https://github.com/software-mansion/react-native-reanimated/issues/846#issuecomment-943267584 - But when I followed the procedure as given in this link it started giving me two error - Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?, js engine: hermes and also the above error. I am using react-native 0.67. please help if you can.

try to add this line in your babel.config.js file; Then run again, may be helps you
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
"react-native-reanimated/plugin"
]
};

After adding the react-native-reanimated to your project
Add Reanimated's Babel plugin to your babel.config.js:
module. Exports = {
presets: [
...
],
plugins: [
...
'react-native-reanimated/plugin',
],
};
yarn start --reset-cache
npm start -- --reset-cache
expo start -c

for me, it seems that the new react native version 0.70 is not compatible with react native navigation package,
after removing the navigation package, and clearing the cache the code works!
yarn remove #react-native-navigation
yarn start --reset-cache

Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__

I am using React.lazy to load some React classes on runtime so that they are not all loaded at once. My code works for production, but crashes when I am in development mode. (UPDATE: My code no longer works in production - see below).
The particular error message is very cryptic so hard to know exactly what the issue is:
Uncaught TypeError: Cannot read property 'call' of undefined at __webpack_require__ (main.js:64)
The above error occurred in one of your React components:
in Unknown
in Suspense
in div (created by Main)
in Main (created by Route)
in Route (created by App)
in Switch (created by App)
in div (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
Consider adding an error boundary to your tree to customize error handling behavior.
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at __webpack_require__ (main.js:64)
Line 64 gives the following code:
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
I have other React classes that are not having any issues.
The particular class file that I created is called Categories.js. As far as I know I am not loading the class any differently than any of the ones that are working. I have even tried renaming the class/file and have I have also removed most of my data out of it in case something in the file was causing the issue.
Here are the pertinent lines from my code:
import React, {Suspense} from 'react';
....
const Categories = React.lazy(()=> import('./Categories'))
....
return (
<Suspense fallback={<div>Loading...</div>}>
<Categories class_select={class_select} />
</Suspense>
)
If it helps here is my webpack.config.js file:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = (env, argv) => {
const isProduction = (argv.mode === "production")
return {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
plugins: [
"#babel/plugin-syntax-dynamic-import"
]
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
...(isProduction && {
optimization: {
// minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
extractComments: 'all',
compress: {
drop_console: true
},
}
})
],
}
}),
devtool: !isProduction && 'eval-source-map',
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new CopyPlugin([
{ from: 'src/css', to: 'css' }
])
]
};
};
Questions
1) What is causing this error?
2) Why is it only being caused in dev mode but not production mode?
Update
My code no longer works in production either. I am getting the following error:
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at o (main.js:2).
In fact it is even worse in production than dev. In production none of the React lazy classes are working. In dev it is only one of them that isn't working.

Process
In order to find a potential solution to this issue, I had to tinker with the optimization module, which was indeed the issue here, even when not enabled surprisingly.
My best guess is that some parameters are set to default in production mode and not in dev mode and this causes the issues of imports and undefined properties.
I decided to try replicating the deployment environment and check if I could at least "break" the development as well and investigate the issue from here. These are the parameters that are different between production and development and that were suspect in causing the issue at hand (you can try yourself by switching to the opposite value to put your deployment like the development environment for example).
On the link I provided in the comment, the user was explaining that the issue was at deployment level and that the way the vendors chunk were built, were colliding with the main chunks and cuts the entry to one another. One of the solution was to use concatenateModules: false apparently, but to no avail, it didn't solve my issue. So I tried with the others and found the issue bellow.
Potential solution
in module.exports, the optimization object should be edited
optimization: {
minimize: true,
namedModules: true,
namedChunks: true,
removeAvailableModules: true,
flagIncludedChunks: true,
occurrenceOrder: false,
usedExports: true,
concatenateModules: true,
sideEffects: false, // <----- in prod defaults to true if left blank
}
Edit: all of these parameters are set to their opposite between production and development, tweak them at your own leisure, some issues stems from them
Explanation
After switching all the parameters I found that the sideEffects one is the one that breaks things and I see why:
The sideEffects flag will break down imports into separate ones as follow, as per the documentation on sideEffects:
import { a, b } from "big-module-with-flag"
is rewritten to
import { a } from "big-module-with-flag/a";
import { b } from "big-module-with-flag/b";
And will try to optimize imports accordingly across the modules, which can cause issues in production. Normally this should help optimizing the size of the package by reducing the bundles, at the cost of removing some imports but can break things at import.
I hope the explanation was somewhat clear, if somebody has deeper knowledge on WebPack optimization, any documentation and enhancement would be welcome.

I also had the same error, extremely difficult to diagnose the root cause from a minified JavaScript stack trace. In the end, I just upgraded the Webpack version to the latest 4.X stable release (I was using Angular 11, so no Webpack 5 support) and the problem magically went away. Assume there must have been some dependency tree bug in the Webpack 4.2.X version that I was using previously.
Webpack versions reference:
https://www.npmjs.com/package/webpack
Commands
npm uninstall webpack
npm install --save-dev webpack#4.46.0

I had a similar error that would only occur on production.
Production had Cloudflare but Test did not.
It turned out our Cloudflare cache settings were ignoring our cache busting. Cache busting via query parameters /scripts/main.js?v=1080237476. So our code-split Webpack output had mis-matched JavaScript files and threw the error Uncaught TypeError: Cannot read property 'call' of undefined.
The quick fix was to purge our Cloudflare cache after deploy. Long term fix is to configure our Cloudflare settings or use hashed filenames instead of query parameters for cache busting.

Installing Modernizr with Yarn on Rails

I am trying to install Modernizr with Yarn in Rails. I do 'yarn add Modernizr' and it gets added to the .node-modules directory. However, I can't figure out how to reference it properly from Rails.
I have added //= require modernizr/src/Modernizr to application.js. But I'm not sure that's the right reference because I get the following error:
Uncaught ReferenceError: define is not defined
Do I need to somehow build the Modernizr library. Does yarn not do that? I'm somewhat new to this and struggling to understand the relationship between webpacker, yarn, and rails and how to properly build and add libraries to rails with yarn. The tutorials all make it seem as though it's as simple as 'yarn add xxx' but I seem to be missing something. Thank you.

What you're looking for is the webpacker gem, which ships by default with Rails 5.1+ but can be used with Rails 4.2+. Get that set up, then follow these steps to get a custom Modernizr build running in your Rails app:
Loader
Install the loader for modernizr:
$ yarn install webpack-modernizr-loader
Modernizr Configuration
Download your desired modernizr config from the modernizr site. Visit a link like this:
https://modernizr.com/download?-appearance-backgroundblendmode-backgroundcliptext-backgroundsize-bgpositionxy-borderradius-boxshadow-boxsizing-canvas-canvastext-cssgradients-csspointerevents-fontface-generatedcontent-inputtypes-lastchild-mediaqueries-multiplebgs-opacity-svg-touchevents-setclasses-dontmin-cssclassprefix:mod_
Then configure your build, click "Build" in the upper right-hand corner, and download "Command Line Config".
Then convert it from JSON to a module and save it as config/webpack/.modernizrrc.js (note the leading period in the filename), like so:
"use strict";
module.exports = {
minify: false,
options: [
"setClasses"
],
"feature-detects": [
"test/canvas",
"test/canvastext",
"test/inputtypes",
"test/svg",
"test/touchevents",
"test/css/appearance",
"test/css/backgroundblendmode",
"test/css/backgroundcliptext",
"test/css/backgroundposition-xy",
"test/css/backgroundsize",
"test/css/borderradius",
"test/css/boxshadow",
"test/css/boxsizing",
"test/css/fontface",
"test/css/generatedcontent",
"test/css/gradients",
"test/css/lastchild",
"test/css/mediaqueries",
"test/css/multiplebgs",
"test/css/opacity",
"test/css/pointerevents"
]
};
Custom Configuration
Next, create a custom webpack config file as config/webpack/custom.js:
const path = require("path");
module.exports = {
module: {
rules: [
{
loader: "webpack-modernizr-loader",
test: /\.modernizrrc\.js$/
}
]
},
resolve: {
alias: {
modernizr$: path.resolve(__dirname, "./.modernizrrc.js")
}
}
};
Expose Configuration
Make your config/webpack/environment.js look like this:
const { environment } = require("#rails/webpacker");
const customConfig = require('./custom');
environment.config.merge(customConfig);
module.exports = environment;
Import Modernizr
Add the following line to app/javascript/packs/application.js:
import modernizr from 'modernizr';
Load Your Pack
Add this to your layout:
<%= javascript_pack_tag "application", defer: true %>
Voila
Load up your site in a browser, inspect, and confirm that (a) modernizr CSS classes have been added to the DOM, and (b) you aren't seeing any webpack compilation errors in the console.
Further Reading
I came upon this question when I was looking to set up modernizr using webpacker in a Rails 5 app, saw the question was unanswered, and figured it out myself. If you want to know how all of this works, I suggest reading the docs for webpacker and webpack-modernizr-loader.

Uncaught ReferenceError: process is not defined

I am using node.js to create a web application. When I run the application (either by opening index.html on the browser or using the command "npm start" on the terminal) I get two errors:
Uncaught ReferenceError: process is not defined
Uncaught ReferenceError: require is not defined
I solved the "require is not defined" error by specifically including in my index.html head tag the link to this script, where the require function is defined.
However, I cannot find something similar for the process function.
My question is doublefold:
Why do built-in node.js modules need to be re-defined? Why are they not recognized as they are, that is "built-in modules"? Doesn't the term "built-in module" mean that a module need not be redefined externaly/second-handedly?
Is there a way to solve this problem? My script is very simple, I am just trying to use a basic function of node.js, so I cannot figure out what errors I might have done.
If anyone has come about this problem and has found a way around it or a reason this happens, you would be of great help.

Node.js code must be run by the node process, not the browser (the code must run in the server).
To run the code, you must run the command:
node server.js
And then you can access your server from a browser by typing "http://localhost:8080", for example. You must have a file server.js (or whatever) with the server code you want (in this case, creating a web server in port 8080).
You can follow this easy example, using express as http server module: http://expressjs.com/starter/hello-world.html

Webpack can inject environment variables into the "client side" .js code (very useful in case of SPA/PWA). You should define them as plugins in webpack.config.js
webpack.config.js
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.MY_ENV': JSON.stringify(process.env.MY_ENV),
... and so on ...
})
],
}
Now you can access it on client side:
app.js
// Something like that
if(process.env.NODE_ENV === 'debug'){
setDebugLevel(1)
}

If you are facing this problem and you are using webpack, you can get the desired process data injected into the client bundle by using DefinePlugin within your webpack.config.js.
In the example below, I show how to add several things to process.env object to make available within the browser:
all the environment variables inside .env using the library
dotenv
the value of NODE_ENV, which is either 'development' or 'production'
Working example
# .env
API_KEY=taco-tues-123
API_SECRET=secret_tacos
// webpack.config.js
const dotenv = require('dotenv').config({ path: __dirname + '/.env' })
const isDevelopment = process.env.NODE_ENV !== 'production'
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
'process.env.NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production'),
}),
].filter(Boolean),
}
// Within client side bundle (React)
// src/App.jsx
console.log(process.env) // {API_KEY: "taco-tues-123", API_SECRET: "secret_tacos"}
console.log(process.env.NODE_ENV) // development
Notice that console.log(process.env) only has the values from the .env file, and that NODE_ENV is not a part of the process.env object.
In the example below, I show how I was trying to inject the process.env object which led me to this stack overflow. I also include a highlight from the webpack documentation on why the code below was not working.
Broken example
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': {
...dotenv.parsed,
'NODE_ENV': JSON.stringify(isDevelopment ? 'development' : 'production')
}
}),
].filter(Boolean),
}
// Within client side bundle (React)
// src/App.jsx
console.log(process.env) // Uncaught ReferenceError: taco is not defined
console.log(process.env.NODE_ENV) // development
From the webpack DefinePlugin docs:
Warning When defining values for process prefer
'process.env.NODE_ENV': JSON.stringify('production')
over
process: { env: { NODE_ENV: JSON.stringify('production') } }
Using the latter
will overwrite the process object which can break compatibility with
some modules that expect other values on the process object to be
defined.
!Warning!
Injecting dotenv.parsed into the client bundle as described will expose these secrets to the client. For development purposes, not a big deal, but in a deployed production environment, any passwords or private api keys will be visible to anyone that goes looking for them.

I had the same problem solved it by going into my .eslintrc.js file
to configure my globals variables, adding require and process to the globals variable and setting the corresponding value equal to "writable". Hope it works for you.
this link really helped
https://eslint.org/docs/user-guide/configuring#specifying-globals

I had same problem when I tried to do this node js app: https://www.youtube.com/watch?v=mr9Mtm_TRpw
The require in html was reached from a < script> and was undefined, like
<script> require('./renderer.js');</script>
I changed it to:
<script src="./renderer.js"></script>
The process in html script was also undefined. I included the webPreferences: nodeIntegration in the js file:
win = new BrowserWindow({
width: 800,
height:600,
icon: __dirname+'/img/sysinfo.png',
webPreferences: {
nodeIntegration: true
}
});
I hope it helped.

You can add the following to your package.json file
{
"name": "mypackage",//default
"version": "0.0.1", //default
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}}
More Explanation

I was just getting this error (Uncaught ReferenceError: process is not defined) in a local hot-reloading Quasar (Vue) app when calling a particular endpoint. The fix for me ended up being to just restart the hot-reloading server (I hadn't reloaded it since adding the process.env.MY_VARIABLE code).

If you are using the npm module dotenv-webpack with Webpack 3, it might be because you are using destructuring, like so:
const { ENV1, ENV2 } = process.env;
This is a known issue.
Ugly workaround is:
const { ENV1 } = process.env;
const { ENV2 } = process.env;

If you followed all answers here but still have same error then try this.
The error is caused by the react-error-overlay package which has dependencies that were updated to support webpack v5 and are not compatible with react-scripts v4.
So to solve the Uncaught ReferenceError: process is not defined in React, open your terminal in your project's root directory and update the version of your react-scripts package by running npm install react-scripts#latest and re-install your dependencies if necessary.
You can find more detailed answers in here

I had this issue, and for some reason no amount of fiddling around with the webpack.config.js using the other suggestions would resolve it. I suspect some packages I'm using are written incorrectly for the browser, or there might be something wrong with my environment.
I ended up "fixing" it by adding the following code to my HTML file above all other <script> file references. .
<script>
// Required by some npm packages
window.process = { browser: true, env: { ENVIRONMENT: 'BROWSER' } };
</script>