I am using a pdf-parse library. When i execute my code it gave the following error
Module not found: Error: Can't resolve 'url' in 'D:\FYP material\website tutorial\newone\fem-2\node_modules\pdf-parse\lib\pdf.js\v1.10.100\build'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
webpack compiled with 9 errors
After some research i found to include resolve.fallback: { "http": require.resolve("stream-http") } in my web.config.js which is located in nodemodules/reactscripts/config/web.config.js but when i put this in my web.config.js it gave a sytax error "; expected". Please help or devise an alternative solution
I tried resolve.fallback: { "http": require.resolve("stream-http") }
and
resolve: {
fallback: {
"http": require.resolve("stream-http")
}
}
in my module.exports in web.config.js but gave a syntax error
Related
I want to be able to log into Payload admin panel using magic login.
The problem is that the payload docs aren't very specific about how to implement Passport strategies. Also the public demo of payload doesn't mention passport anywhere.
https://payloadcms.com/docs/authentication/config#strategies
https://github.com/payloadcms/public-demo
I created a new payload app using npx create-payload-app and chosing the blog template. Then I npm installed the packages passport and passport-magic-login and edited the Users.ts file so that payload uses the MagicLoginStrategy to authenticate. This is the state where i am stuck at the moment because trying to run the project throws a bunch of errors apparently relating to webpack and polyfills.
Users.ts
import { CollectionConfig } from "payload/types";
import MagicLoginStrategy from "passport-magic-login";
const sendEmail = (a, b, c, d) => {
console.log("sendEmail");
console.log(a, b, c, d);
};
const verify = (a, b) => {
console.log("verify");
console.log(a, b);
};
const Users: CollectionConfig = {
slug: "users",
auth: {
tokenExpiration: 7200,
maxLoginAttempts: 5,
lockTime: 600 * 1000,
strategies: [
{
strategy: new MagicLoginStrategy({
secret: "my-secret",
callbackUrl: `api/auth/magiclink/callback`,
sendMagicLink: async (destination, href, _, req) => {
await sendEmail(destination, href, _, req);
},
verify: async (payload, callback) => {
verify(payload, callback);
},
}),
},
],
},
admin: {
useAsTitle: "email",
},
access: {
read: () => true,
},
fields: [
// Email added by default
{
name: "name",
type: "text",
},
],
};
export default Users;
Error Log
ERROR in ./node_modules/jwa/index.js 5:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jwa'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/jws/lib/data-stream.js 3:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/jws/lib/data-stream.js 4:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/jws/lib/sign-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/jws/lib/sign-stream.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
ERROR in ./node_modules/jws/lib/verify-stream.js 5:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
ERROR in ./node_modules/jws/lib/verify-stream.js 7:11-26
Module not found: Error: Can't resolve 'util' in '/Users/mathias/Documents/coding/payload-passport-test2/node_modules/jws/lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
- install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "util": false }
webpack compiled with 7 errors
ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\Users\Sumana\Desktop\Web3\web3app\node_modules\cipher-base'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
You can fix this issue in 2 way .
Delete node_module then change your react-scripts version from "5.0.0" to "4.0.3" after that run npm install.
or
Configure webpack.
1 - install these packages .
npm install fs assert https-browserify os os-browserify stream-browserify stream-http react-app-rewired
2 - Create config-coverrides.js in Root dir of your project next to the package.json
const webpack = require('webpack');
module.exports = function override(config, env) {
config.resolve.fallback = {
url: require.resolve('url'),
fs: require.resolve('fs'),
assert: require.resolve('assert'),
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
buffer: require.resolve('buffer'),
stream: require.resolve('stream-browserify'),
};
config.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
);
return config;
}
I have had this issue for the last week too. It has been documented in many place like this. I don't understand how to fix it but it seems like the people who made the library will fix it https://github.com/ChainSafe/web3.js/issues/4659
Install the polyfills for node.JS and adding two things to webpack.config.js:
npm install node-polyfill-webpack-plugin
In the file [node_modules > react-scripts > config > webpack.config.js] add:
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports > return > plugins:
plugins: [
new NodePolyfillPlugin(),
……………
]
More on the solution:
https://github.com/Richienb/node-polyfill-webpack-plugin#readme
I'm trying to use Socket.io in my Laravel/Vue.js app. But I'm getting this error when running npm run dev.
Module not found: Error: Can't resolve 'path' in '/home/nicolas/LaravelProjects/Chess/node_modules/socket.io/dist'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
webpack compiled with 9 errors
I tried changing the webpack.config.js file by adding resolve.fallback: { "path": false }, but it doesn't seem to help. It is possible that I'm doing it wrong since I have 4 webpack.config.js files in my project (I don't know why).
Maybe can I downgrade webpack? Thanks!
This fix worked for me (Vue 3):
In vue.config.js, add:
const { defineConfig } = require('#vue/cli-service')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
plugins: [
new NodePolyfillPlugin()
]
}
})
Followed by npm install node-polyfill-webpack-plugin
I had this problem in ReactJS with create-react-app(facebook) but other packages (crypto-browserify)
Solution:
First install the necessary packages in this problem "path-browserify" but in my case "crypto-browserify"
Modify webpack.config.js in reactjs with create-react-app this file is inside:
node_modules/react-scripts/config/webpack.config.js
Search module.exports and inside this function there is a return:
module.exports = function (webpackEnv) {
...
return {
...
resolve: {
...
fallback: {
// Here paste
path: require.resolve("path-browserify"),
// But in mi case I paste
crypto: require.resolve("crypto-browserify"),
}
}
}
}
Note: This solution works, but when the webpack project starts it shows warnings
Pd: I am not native speaker English, but I hope understand me.
I have the same issue in React (feb-2022) using Real (realm-web) from Mongo.
I solve this in two steps:
npm i stream-browserify crypto-browserify
create fallback object into webpack.config.js at node_modules/react-scripts/config/webpack.config.js
module.exports = function (webpackEnv) {
...
return {
...
resolve: {
...
fallback: { // not present by default
"crypto": false,
"stream": false
}
}
}
I have the same issue with crypto. Some say that adding a proper path in TS config (and installing a polyfill) should resolve the issue.
tsconfig.json
{
"compilerOptions": {
"paths": {
"crypto": [
"./node_modules/crypto-browserify"
],
}
Details https://github.com/angular/angular-cli/issues/20819
I'm still fighting with crypto, but above link might help in your struggles.
I had the same issue, Strangely an import {script} from 'laravel-mix' in my app.js. I removed it and everything went back to normal.
I could not get the other answers to work with React on a new project with rss-parser. The error messages aren't clear. I fixed it by adding this line to the webpack configuration:
resolve: {
extensions: ['.tsx', '.ts', '.js'],
fallback: { "http": false, "browser": false, "https": false,
"stream": false, "url": false, "buffer": false, "timers": false
}
},
Watch out for this import in your app.js. Removing it fixed my issue.
use the version of webpack 4.46.0 to remove the error
I had to delete this line in a Vue component to solve the problem:
import { ContextReplacementPlugin } from "webpack";
If you use create-react-app(cra)
You have to overwrite the default webpack file
to do that you need to install a package like "react-app-rewired" that
will help overwriting and merge your configuration with the ones were
added by react scripts
First
npm install --D react-app-rewired
create a new file in the root directory called "config-overrides.js"
Install(using npm) and Add the required dependencies to the created config file
npm i -D path-browserify
install other packages as the error message shows
const webpack = require('webpack');
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
path: require.resolve('path-browserify'),
add others as shown in the error if there are more
});
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
}),
]);
return config;
};
Update your package.json scripts
"scripts": {
"build": "react-app-rewired build",
....
"start": "react-app-rewired start",
"test": "react-app-rewired test"
},
Also please note that a new version of react-scripts(newer than 5.0.1) might solve the issue.
had this issue in a react-app.
installation of stream-browserify crypto-browserify didn't work for me
went through with hjpithadia's answer in Reactjs with a slight change in webpack.config.js
install the package
npm install node-polyfill-webpack-plugin
find the webpack configuration file here
node_modules/react-scripts/config/webpack.config.js
import the package
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
search for module.exports
in plugin array add this new NodePolyfillPlugin(),
module.exports = function (webpackEnv) {
...
return {
...
plugins: [
new NodePolyfillPlugin(),
...
]
}
}
For React apps, if you don't need the module make sure webpack ignores it.
install craco https://craco.js.org/docs/getting-started/
create a craco.config.js in the root of your project, mine looks like this:
module.exports = {
webpack: {
configure: (webpackConfig) => {
webpackConfig.resolve.fallback = webpackConfig.resolve.fallback || {}
webpackConfig.resolve.fallback.zlib = false
webpackConfig.resolve.fallback.http = false
webpackConfig.resolve.fallback.https = false
webpackConfig.resolve.fallback.stream = false
webpackConfig.resolve.fallback.util = false
webpackConfig.resolve.fallback.crypto = false
return webpackConfig;
},
}
};
I resolved similar issue:
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "stream": false }
Installing the npm i stream-browserify --save-dev
Making the custom webpack.config.js file containing:
module.exports = {
resolve: {
fallback: { stream: require.resolve("stream-browserify") },
},
};
Installing the npm install #angular-builders/custom-webpack --save-dev
Assigning (angular.json: projects -> <proj_name> -> architect -> build -> options)
"customWebpackConfig": {
"path": "./webpack.config.js"
}
Changing the: build / serve / extract-i18n / test – as of your needs – to use custom Webpack config:
"builder": "#angular-builders/custom-webpack:browser",
I finally found the solution. With laravel, you have to change the webpack.mix.js file and not webpack.config.js.
I'm trying to make use of the jsonapi-vuex npm package. I import it within my code like so:
import { jsonapiModule } from "jsonapi-vuex";
Jest however stumbles over this package. This package uses es6 modules. The index.js for that node module looks like this:
export { jsonapiModule, utils } from './src/jsonapi-vuex'
Jest fails on this even though babel-jest is installed with the following error:
Jest encountered an unexpected token
/node_modules/jsonapi-vuex/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { jsonapiModule, utils } from './src/jsonapi-vuex'
^^^^^^
I've tried various things:
Tried adding to jest config so that just shouldn't ignore this library when transpiling:
transformIgnorePatterns: [
"<rootDir>/node_modules/(?!jsonapi-vuex)"
],
Tried the babel-plugin-transform-es2015-modules-commonjs plugin
As far as I can tell, babel-jest makes use of .babelrc. I have this configured with the #babel/preset-env preset, which is supposed to handle es6 modules... so I really don't understand why it is failing. Here's the .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"modules": "commonjs",
"targets": {
"node": "current"
}
}
]
]}
with this webpack config:
{ test: /\.tsx?$/,
use:[
{
loader:'babel-loader',
options: {
presets:['#babel/preset-env']
}
},
{
loader:'ts-loader'
}]
},
I get an error message Error: Cannot find module 'babel-preset-es2015'
If I add that module I get two errors
babel-preset-es2015 is deprecated, use babel-preset-env
But when I install babel-preset-env I still get error about not finding babel-preset-es2015
When I install babel-preset-es2015 I get the error
Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/henrikbechmann/Servers/tribalopolis/www/tribalopolis.com/node_modules/babel-preset-es2015/lib/index.js
So it's a complete trap!
Any suggestions?
Answer: Mostly a matter of updating .babelrc
{
"presets": [
"#babel/env",
"#babel/react"
]
}
and of course updating modules
tip: try npx update-babel