I am making web scraping site,
and I want get Tags in URL , but they are dynamic sources.
so I can't touch only Cheerio.
people recommended Puppeteer. and my problem was starting
first. I could see Module not found:
Error: Can't resolve 'https' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'
and also they couldn't find out os, path .....
so I add (I use yarn) webpack and cli
second. I set the webpack.config.js for fallback
resolve:{
fallback:{
"fs":false,
"os": require.resolve("os-browserify/browser"),
"path": require.resolve("path-browserify"),
"https": require.resolve("https-browserify"),
"stream": false,
"zlib": false ,
"crypto": false,
"constants": false,
}
}
because the Err-Message said
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: { "https": require.resolve("https-browserify") }'
- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "https": false }
but the err messages still there when I yarn start
Third. I thought if the config didn't set .
so I did ' $ webpack --config webpack.config.js'
I couldn't see the err
but still when I did yarn start, problem are there
4th. I add fs, os, http..... (in the err's module name) using yarn
I can see the dependencies
"os": "^0.1.2", "path": "^0.12.7",
and added
"browser": {
"crypto": false,
"fs": false,
"path": false,
"os": false,
"net": false,
"stream": false,
"tls": false
}
setting in package.json
but,,
.
.
.
ERROR in ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/FirefoxLauncher.js 43:29-42
Module not found: Error: Can't resolve 'fs' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'
ERROR in ./node_modules/puppeteer-core/lib/cjs/puppeteer/node/ProductLauncher.js 65:13-26
Module not found: Error: Can't resolve 'fs' in '/Users/Documents/myMac/Study/bookMarks/node_modules/puppeteer-core/lib/cjs/puppeteer/node'
webpack compiled with 41 errors
I am having 41 errors
5th . I removed folder the node_modules and yarn.lock
and did
$ yarn cache clean $ yarn install
it doesn't work
also I removed puppeteer-core and re-add
and i have 41 errors still
do you have another way
or
can I alternate puppeteer?
at last
this is js module using puppeteer
const puppeteer = require('puppeteer-core');
const DomParser = require('dom-parser');
async function getTagList(url) {
const tagListText = new Array();
try{
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(url);
const html = await page.content();
const parser = new DomParser();
const dom = parser.parseFromString(html);
const tagList = dom.getElementsByClassName('tag_area')[0].getElementsByTagName('a');
tagListText = Array.from(tagList).map(tag => tag.textContent);
await browser.close();
}catch(error) {
console.error(error);
}
return tagListText;
}
module.exports = { getTagList };
and I am using chatGPT. he recommended setting in webpack.config.js
Specially fallback -> fallbacks
and it can't terminal said fallbacks isn't option
I use webpack5
ERROR MESSAGE IN QUESTION:
While trying to resolve module idb from file C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\#firebase\app\dist\esm\index.esm2017.js, the package C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\idb\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\idb\build\index.cjs. Indeed, none of these files exist:
Error message photo
The confusing part of this error is that the file index.esm2017 does in fact exist at the directory. '`C:\Users\OG\Desktop\programming\react_native\mealstogo\MealsToGo2\node_modules\idb\build\index.cjs'
I have uninstalled and reinstalled firebase. I have installed and uninstalled 'idb'. I have cleared yarn cache, expo cache, deleted node_modules and reinstalled as well as cleared watchman cache all to no avail. I have also triple checked that the file directory is in fact where the error message says it isn't.
The error arose when expo installing lottie-react-native, however it seems unrelated, and the problem remained once removing lottie-react-native. I have used git to revert my code to before the behavior started and now the problem persists here as well.
It almost seems as the entire project is now trashed, how do I move forward.
If you are using expo, to resolve this issue, create a metro.config.js file in the project root. In the file add the file extension cjs. details
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
ScreenShot
React Native cli
const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
exports.resolver = {
...defaultResolver,
sourceExts: [
...defaultResolver.sourceExts,
"cjs",
],
};
I get the same error... I think there's something funny about the new firebase version. I downgraded my firebase version to 9.6.11 to fix the issue temporarily...
npm uninstall firebase
npm install firebase#9.6.11
I just added the following code to metro.config.js file. Im using Firebase v9.8.1
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
//added this
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
},
};
I tried few things to resolve this issue in expo the solution worked for me to create metro.config.js file in root directory and add the following code;
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
And now restart your expo app!!
Found this that worked after restarting metro bundler:
https://github.com/thysultan/stylis/issues/233
For Expo you have to change your app.json file:
{
"expo": {
...,
"packagerOpts": {
"sourceExts": ["cjs"]
}
}
I have just installed this command it will automatically downgrade your firebase version and resolve the issue
expo install firebase#9.6.11
I have a react-native project(no expo) and got the same error, in my case I had firebase 9.7.0, but I changed to 9.6.11 like the buddy upper in this thread and it works.
I build node modules with yarn install, and after npx pod-install.
this is my package.json after and before(just firebase changed)
after:
"dependencies": {
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"firebase": "9.7.0",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.1",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1"
},
before: (it works):
"dependencies": {
"#react-navigation/native": "^6.0.10",
"#react-navigation/stack": "^6.2.1",
"axios": "^0.27.2",
"firebase": "9.6.11",
"react": "17.0.2",
"react-native": "0.68.1",
"react-native-gesture-handler": "^2.4.1",
"react-native-safe-area-context": "^4.2.5",
"react-native-screens": "^3.13.1"
},
After 1 hour research I found my solution. I got this error because wrong authDomain in firebase config.
Old:
authDomain: "https://something.firebaseio.com"
Fix:
authDomain: "something.firebaseio.com"
Hope this will help someone!
Note: This is not an efficient or recommended fix. Just quick and dirty.
If you keep running into the issue and need a short-term fix then you can navigate over to the idb folder inside your node_modules folder, access the package.json file and change any file type ending in cjs to js.
node_modules --> idb --> package.json --> change any 'cjs' to 'js'
Again, this isn't the best solution. It's just a duct tape fix.
Having the exact same issue even after adding firebase in a clean expo project. The issue is due to .cjs not supported in expo.
I fixed it
by adding cjs into metro.config.js as described here: https://github.com/thysultan/stylis/issues/233#issuecomment-1000648356
I work with "react": "^17.0.2",
I tried to add the web3 library by npm i web3
But when I try to instantiate my web3 object like this
web3 = new Web3((window as any).ethereum);
Or like this
web3 = new Web3();
And I try to start my app (npm start)
I get a lot of errors
about my webpack I have to add some fallback in my webpack.config.js
Compiled with problems:
ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in
'C:...\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 }
ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in ....
ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js
71:31-48
Module not found: Error: Can't resolve 'assert' in ...
ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js
14:31-48
Module not found: Error: Can't resolve 'assert' in ... ERROR in
./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48
Module not found: Error: Can't resolve 'assert' in ...
ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91
Module not found: Error: Can't resolve 'crypto' in ... ERROR in
./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js
7:193-227
Module not found: Error: Can't resolve 'crypto' in ...
ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26
Module not found: Error: Can't resolve 'http' in ...
ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28
Module not found: Error: Can't resolve 'https' in ...
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26
Module not found: Error: Can't resolve 'http' in ...
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28
Module not found: Error: Can't resolve 'https' in ...
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22
Module not found: Error: Can't resolve 'os' in
'C:...\node_modules\xhr2-cookies\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: { "os": require.resolve("os-browserify/browser") }'
install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os":
false }
a lot of errors like this : Failed to parse source map from 'C:....\node_modules\xhr2-cookies\xml-http-request-upload.ts' file: Error: ENOENT: no such file or directory
WARNING in ./node_modules/#ethersproject/abi/lib.esm/coders/fixed-bytes.js Module
Warning (from ./node_modules/source-map-loader/dist/cjs.js): Failed to
parse source map from
'C:...\node_modules#ethersproject\abi\src.ts\coders\fixed-bytes.ts'
file: Error: ENOENT: no such file or directory, open
'C:...\node_modules#ethersproject\abi\src.ts\coders\fixed-bytes.ts'
# ./node_modules/#ethersproject/abi/lib.esm/abi-coder.js 13:0-55
76:17-32 # ./node_modules/#ethersproject/abi/lib.esm/index.js 4:0-56
6:0-204 6:0-204 # ./node_modules/web3-eth-abi/lib/index.js 28:21-59
30:16-55 # ./node_modules/web3-eth/lib/index.js 47:10-33 #
./node_modules/web3/lib/index.js 34:10-29 #
./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 #
./src/App.tsx 5:0-53 10:35-47 # ./src/index.tsx 7:0-24 11:33-36
WARNING in ./node_modules/#ethersproject/abi/lib.esm/coders/null.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from
'C:...\node_modules#ethersproject\abi\src.ts\coders\null.ts'
file: Error: ENOENT: no such file or directory, open
'C:...\node_modules#ethersproject\abi\src.ts\coders\null.ts'
# ./node_modules/#ethersproject/abi/lib.esm/abi-coder.js 14:0-42
50:19-28 # ./node_modules/#ethersproject/abi/lib.esm/index.js 4:0-56
6:0-204 6:0-204 # ./node_modules/web3-eth-abi/lib/index.js 28:21-59
30:16-55 # ./node_modules/web3-eth/lib/index.js 47:10-33 #
./node_modules/web3/lib/index.js 34:10-29 #
./src/components/Authenticate.tsx 7:0-24 14:19-23 14:24-42 #
./src/App.tsx 5:0-53 10:35-47 # ./src/index.tsx 7:0-24 11:33-36
I used the basic template given by npx create-react-app Appname --template typescript
And then added web3 library (npm i web3)
And tried this code
import React, { useState } from 'react';
import detectEthereumProvider from '#metamask/detect-provider'
import Web3 from 'web3';
const Authenticate = () => {
const web3 = new Web3();
}
return (
<div>
TEST
</div >
);
};
export default Authenticate;
Install react-scripts #4.0.3
npm install --save react-scripts#4.0.3
Hello I am doing blockchain with React but when I import Web 3 using
import Web3 from 'web3'
it give me this error:
./node_modules/web3-eth-accounts/lib/index.js
Module parse failed: Unexpected token (225:12)
You may need an appropriate loader to handle this file type.
| }
| return signed({
| ...tx,
| chainId: args[0],
I am using node 14.17.1 and I created this using
create-react-app my-app --scripts-version 1.1.5
and I installed web3 using
npm install web3
This is the tsconfig.json file and this file showing errors as well
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"outDir": "./lib",
"esModuleInterop": true
},
"include": [
"./src"
]
}
and index.js code where the error is referring
return signed({
...tx,
chainId: args[0],
nonce: args[1],
networkId: args[2],
...args[3] // Will either be gasPrice or maxFeePerGas and maxPriorityFeePerGas
});
Your project's created with --scripts-version 1.1.5 which mean its babel can not parse ..., consider to use higher scripts-version. For me, I upgraded from 1.1.4 to 3.2.0
I have started a new create-react-app (CRA) project to replace an existing React project that did not use CRA. The project is using TypeScript and my IDE is WebStorm.
My package.json file contains the following modules in devDependencies:
"#types/react": "~16.9.50",
"#typescript-eslint/eslint-plugin": "~4.3.0",
"eslint": "6.6.0",
"eslint-config-airbnb-typescript": "~11.0.0",
"eslint-plugin-import": "~2.22.1",
"eslint-plugin-jsx-a11y": "~6.3.1",
"eslint-plugin-react": "~7.21.3",
"eslint-plugin-react-hooks": "~4.1.2",
"typescript": "~4.0.3"
An example of one component is as follows:
import React, { FunctionComponent } from 'react';
const Content: FunctionComponent = () => (
<div>Hello</div>
);
export { Content };
ESLint / WebStorm complains with the following error:
ESLint: 'FunctionComponent' is defined but never used.(#typescript-eslint/no-unused-vars)
My code still compiles without any errors or warnings and my website works without any issues. My previous project did not have any issues recognizing TypeScript types. I have the #types modules installed. I think the relevant parts of .eslintrc, tsconfig.json and the relevant settings in WebStorm are identical.
Does anyone have any insight?
I resolved the issue by upgrading to react-scripts 4.0