Webpack Error: read is not a function - javascript

I am trying to build a full stack web application that uses React, Redux, Socket.io and some other dependencies.
Here is the package.json file for a full list of dependencies
{
"name": "react-voting-app",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"chai": "^3.5.0",
"chai-immutable": "^1.6.0",
"jsdom": "^9.8.3",
"mocha": "^3.1.2",
"react-scripts": "0.7.0",
"webpack": "^1.13.3"
},
"dependencies": {
"babel-preset-es2015": "^6.18.0",
"immutable": "^3.8.1",
"react": "^15.4.0",
"react-dom": "^15.4.0",
"react-redux": "^4.4.6",
"redux": "^3.6.0",
"socket.io": "^1.4.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js",
"test:watch": "npm run test -- --watch",
"eject": "react-scripts eject"
}
}
I am using webpack to bundle the files together. I created the react app using create-react-app.
When I try to run the application, I get the following error
index.js:28 Uncaught TypeError: read is not a function(…)
and a bunch of other warnings from socket.io
Critical dependencies: 1:475-482 This seems to be a pre-built
javascript file. Though this is possible, it's not recommended. Try to
require the original source to get better results
Module not found: Error: Cannot resolve module 'bufferutil' in
/Users/zaidhumayun/Desktop/React/react-voting-app/node_modules/socket.io/node_modules/engine.io/node_modules/ws/lib
Module not found: Error: Cannot resolve module 'utf-8-validate' in
/Users/zaidhumayun/Desktop/React/react-voting-app/node_modules/socket.io/node_modules/engine.io/node_modules/ws/lib
Initially, I was getting another error which stated that
Critical dependencies: 75:43-65 the request of a dependency is an
expression # ./~/socket.io/~/engine.io/lib/server.js 75:43-65
However, I got rid of this error by uninstall socket.io#1.6.0 and installing socket.io#1.4.4 as suggested by this github issue
https://github.com/webpack/webpack-dev-server/issues/212
But, what happened was that the warning was just replaced with a different one. The first one given in the previous list.
After looking through the stack trace of the original error where it says, read is not a function(screenshot of the stack trace below), it looks like the error is in the read module not being required properly or not importing correctly.
Here are the two lines of code pertinent to the issue I found in Server.serverClient
var read = __webpack_require__(/*! fs */ 323).readFileSync;
clientSource = read(/*require.resolve*/(/*! socket.io-client/socket.io.js */ 468), 'utf-8');
The second line is where the error appears.
I am guessing this has something to do with the third warning which stated the module utf-8-validate could not be resolved.
How do I fix this issue? Or is there a workaround to it?

Related

Syntax error when using optional chaining (ES2020) in debug mode (VSCode) in node.js app

I get an "Uncaught SyntaxError: Unexpected token ." message when I try to use my express app in debug mode in VSCode (F5) if my code includes optional chaining (?.).
I do not have this problem when I use the app with the command "npm start" which is working properly.
I do not have experience on building projects with very specific configuration (compilers, lighters...), this one was created just with npm init.
Below you can see the details that I consider useful for solving the issue. Let me know if you need anything else.
Is there anyway I can debug the app if it includes optional chaining syntax? Should I update any version? Should I change any config file?
Details:
node v16.10.0
npm v7.24.0
package.json
"main": "server/server.js",
"scripts": {
"start": "nodemon -e js,json,html,yml,css server/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
},
"license": "ISC",
"dependencies": {
"#marsaud/smb2": "^0.17.2",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"compression": "^1.7.4",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"equals": "^1.0.5",
"express": "^4.17.1",
"jsonwebtoken": "^8.5.1",
"moment": "^2.24.0",
"mongodb": "^3.6.5",
"mssql": "^7.2.1",
"nodemailer": "^6.4.10",
"nodemon": "^2.0.7",
"redoc": "^2.0.0-rc.24",
"swagger-jsdoc": "^4.0.0",
"tedious": "^14.0.0",
"underscore": "^1.9.1"
}
}
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Iniciar el programa",
"program": "${workspaceFolder}/backEnd/server/server.js"
}
],
}
Did you try to switch to different node version? I use node v14 and don't have the problem, but I read on other websites mentioned that they are using v16 and also have problem with optional chaining.
I had this same issue and downgrading npm to version 6.14.16 is what worked for me. Another work around that I was running while searching for a solution was to remove nodemon from the package.json scripts commands and replacing them with just node
"scripts": {
"start": "node js,json,html,yml,css server/server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
and running
nodemon --exec npm run start
Not sure what the exact issue is though, but it seems to be related to running the nodemon command from within the scripts in package.json file. I was able to verify this by simply running
npm run start
with the package.json changes mentioned above perfectly fine, but once it was changed to run with nodemon, I run into issues with optional chaining.
I finally found the solution, I was not using the right debugger so it was mainly a Visual Studio Code wrong configuration setup issue.
I recently installed some other debuggers so I had to set the node.js debugger again.

Nextjs boiler plate development server giving error

I am just starting to learn next.js. I installed create-next-app tried starting a development server without changing any code provided by boilerplate. I get this error
./styles/globals.css
Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://nextjs.org/docs/messages/css-global
Location: pages\_app.js
I am just starting with nextjs so I do not have any other information besides this and I have not changed any code
commands I used
npx create-next-app next_js_list
cd next_js_list
npm run dev
This is the package.json I have
{
"name": "next_js_list",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"next": "11.1.1",
"react": "17.0.2",
"react-dom": "17.0.2"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.1"
}
}
Same for me, looks like an error with the new next.js version 11.1.1, just go back to 11.1.0, and will be ok, a fix will be coming shortly

Deployment on Vercel with Auth0: Can't resolve '#auth0/nextjs-auth0' in '/vercel/path0/pages'

I have a project that already was deployed on Vercel. Since last week Im working on improve the layout with the goal of finish a MVP of this project. So, I changed my usage of auth0, using the package to nextjs #auth0/nextjs-auth0. I ran
npm install #auth0/nextjs-auth0
and I have on my package.json
{
"name": "MAmanager",
"version": "1.0.0",
"engines": {
"node": "14.x",
"npm": "6.x"
},
"description": "",
"main": "index.js",
"scripts": {
"dev": "next",
"start": "next start",
"build": "next build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",
"dayjs": "^1.9.5",
"formik": "^2.1.5",
"next": "^10.2.3",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-icons": "^4.2.0",
"swr": "^0.5.6",
"yup": "^0.29.3"
},
"devDependencies": {
"autoprefixer": "^10.2.5",
"postcss": "^8.3.0",
"tailwindcss": "^2.1.2"
}
}
The usages on my pages are
import { UserProvider } from '#auth0/nextjs-auth0'
import { useUser } from '#auth0/nextjs-auth0'
import { withPageAuthRequired } from '#auth0/nextjs-auth0'
And when I deploy my branch on Vercel I get this error
08:57:49.989 Failed to compile.
08:57:49.990 ModuleNotFoundError: Module not found: Error: Can't resolve '#auth0/nextjs-auth0' in '/vercel/path0/pages'
08:57:49.990 > Build error occurred
08:57:49.991 Error: > Build failed because of webpack errors
08:57:49.991 at /vercel/path0/node_modules/next/dist/build/index.js:17:924
08:57:49.991 at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)
08:57:50.020 error Command failed with exit code 1.
I have seen errors like that caused by casing discrepancies but I don't understanding what is happening here. I appreciate any help.
After see other examples I just edited manually the package.json.
After run npm install #auth0/nextjs-auth0 the package was automatically added "#auth0/nextjs-auth0": "github:auth0/nextjs-auth0",.
I just edit to
"#auth0/nextjs-auth0": "^1.3.1"
and worked on deployment.
Note: The way the package was installed worked on dev in localhost but broke only on the deployment.
try making a custom build script for your deployment as a temporary workaround:
npm install && npm i #auth0/nextjs-auth0#1.3.1 && npm run build
This can be added under the deployment settings tab using a custom build command for production. Running the specific targeted package version install after npm i should override the problematic version being installed in prod

error: bundling failed: TypeError: Cannot read property 'transformFile' of undefined, React Native

I receive this error whenever I run react-native start, but this started happening recently after I had installed firebase-tools and stripe in my node modules, but before that it would run just fine, also here's the error's stacktrace:
::ffff:127.0.0.1 - - [22/Mar/2020:19:59:30 +0000] "GET /index.bundle?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.12.1"
error: bundling failed: TypeError: Cannot read property 'transformFile' of undefined
at C:\Users\me\Project\node_modules\react-native\node_modules\#react-native-community\cli\node_modules\metro\src\Bundler.js:87:34
at Generator.next (<anonymous>)
at asyncGeneratorStep (C:\Users\me\Project\node_modules\react-native\node_modules\#react-native-community\cli\node_modules\metro\src\Bundler.js:14:24)
at _next (C:\Users\me\Project\node_modules\react-native\node_modules\#react-native-community\cli\node_modules\metro\src\Bundler.js:34:9)
at processTicksAndRejections (internal/process/task_queues.js:93:5)
Here's my package.json:
{
"name": "Project",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"card-validator": "6.2.0",
"firebase-tools": "7.15.1",
"jetifier": "^1.6.5",
"prop-types": "15.7.2",
"react": "^16.13.1",
"react-art": "^16.13.1",
"react-dom": "^16.13.1",
"react-geocode": "0.2.1",
"react-native": "0.61.5",
"react-native-country-picker-modal": "1.9.8",
"react-native-elements": "1.2.7",
"react-native-firebase": "5.6.0",
"react-native-geocoding": "0.4.0",
"react-native-gesture-handler": "1.5.2",
"react-native-maps": "0.26.1",
"react-native-paper": "3.2.1",
"react-native-reanimated": "1.4.0",
"react-native-restart": "0.0.14",
"react-native-shadow": "^1.2.2",
"react-native-svg": "12.0.3",
"react-native-vector-icons": "6.6.0",
"react-native-web": "^0.9.13",
"react-navigation": "4.0.10",
"react-navigation-drawer": "2.3.3",
"react-navigation-stack": "1.10.3",
"stripe": "^8.33.0",
"tipsi-stripe": "7.5.1",
"typescript": "^3.8.3"
},
"devDependencies": {
"#babel/core": "7.7.4",
"#babel/runtime": "7.7.4",
"#react-native-community/eslint-config": "0.0.5",
"babel-jest": "24.9.0",
"eslint": "^5.0.0",
"jest": "24.9.0",
"metro-react-native-babel-preset": "0.56.3",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}
I am also well aware of another question that has the same problem on StackOverflow, but that question's solution didn't work for me, because npm ignored it when i ran react-native start since those modules were deprecated, and I still got the same error
Downgrading NodeJS to LTS version always helps. I faced same issue when I was trying on the NodeJS^17 but when I downgraded it to NodeJS^14 and reinstalled node_modules everything was fixed.
The solution in the first comment under the question worked for me, which was deleting the node_modules and package-lock.json, HOWEVER, I didn't want to do this knowing i would run into more errors, and sure enough I did, but at least I was able to fix them and get it to run, unlike the stubborn error I asked about. So yes, this method works, but I definitely hope that someone has a better way.
I was having this error. I did two things which I think led to me fixing this issue:
I'm working in a monorepo so I added the following code to my package.json:
"workspaces": {
"nohoist": [
"react-native",
"react-native/**",
"react",
"react/**"
]
}
I upgraded my metro-react-native-babel-preset package from ^0.58.0 to the latest version - ^0.59.0 (yarn add -D metro-react-native-babel-preset)
I have the same problem with Nodejs version 17.1.0. Just uninstalled it and reinstall Nodejs version 16.13.0.
I had the same issue. I was running npm v7. and node v10. I upgraded both to latest, and it started working.
This error happened to me when I was using the inline require in metro config for performance optimization.
I solve this problem changing the metro config property "blacklist" to "blockList":
return {
preloadedModules: moduleMap,
transform: { inlineRequires: { blockList: moduleMap } },
}
This is an old thread but I wanted to contribute as it is one of the first threads that appears in Google when searching "Cannot read property 'transformFile' of undefined".
This might not be a permanent fix as it seems to crop up when installing new dependencies, I'm also using Expo.
To fix this I've been installing the dependency, then using yarn-upgrade-all which goes through your package.json and upgrades them all to the latest version. This can obviously cause conflicts but for my use, it's working (so far) and doesn't require something drastic like deleting folders or files.
rm -rf node_modules
yarn
pod install

How to transpile every dependency in a React app using Babel

I am developing an app using react and it needs to run on IE. I'm using an external library called query-string. It contains arrow functions and IE doesn't know those and for some reason the code in this library is not transpiled or translated to older JS.
I had similar issue within this project with the library popmotion which was using a find method, but I fixed that by installing Babel polyfill and including it in the main file App.jsx. I did not eject the react app as I'm quite new to this and don't know exactly how react works under the hood.
This is my package.json
{
"name": "ruzovky",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.6",
"deepcopy": "^1.0.0",
"node-sass-chokidar": "^1.3.3",
"npm-run-all": "^4.1.3",
"popmotion": "^8.3.4",
"prop-types": "^15.6.2",
"query-string": "^6.1.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4"
},
"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "node-sass-chokidar src/ -o src/ --watch",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
To help you understand my issue: Everything else does get transpiled, as react takes care of everything (I can create react components using javascript, which no browser supports yet), except this single library. In my node_modules folder there is babel-loader and webpack too.
You should use build tool, the simplest & most widespread one is webpack.
Here is the tutorial on how to transpile ES6 to older versions via webpack

Categories

Resources