For people who will meet this problem with tatum io v1 + react ! Developers said that it's problem of react, they will fix it in V2
You can use tatum io V1 with node js !
I've added all dependencies that might fix this bug, but still have fs problem
App.js
import React from "react";
import {
deployMarketplaceListing,
sendMarketplaceApproveErc20Spending,
sendMarketplaceBuyListing,
sendMarketplaceCreateListing,
sendCeloSmartContractReadMethodInvocationTransaction,
sendAuctionApproveNftTransfer,
} from "#tatumio/tatum";
const App = () => {
<>
<div>
<h1>TEST</h1>
</div>
</>;
};
export default App;
after this imports I had 40+ errors. I've fixed most of them with this file
config-overrides.js
const webpack = require("webpack");
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
assert: require.resolve("assert"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
os: require.resolve("os-browserify"),
url: require.resolve("url"),
path: require.resolve("path-browserify"),
});
config.resolve.fallback = fallback;
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: "process/browser",
Buffer: ["buffer", "Buffer"],
}),
]);
return config;
};
Than I have this one err multiple 8 times
ERROR in ./node_modules/#elrondnetwork/bls-wasm/bls_c.js 54:30-43
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/#elrondnetwork/bls-wasm'
ERROR in ./node_modules/#elrondnetwork/erdjs/out/smartcontracts/code.js 78:24-37
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/#elrondnetwork/erdjs/out/smartcontracts'
ERROR in ./node_modules/#elrondnetwork/erdjs/out/smartcontracts/typesystem/abiRegistry.js 78:24-37
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/#elrondnetwork/erdjs/out/smartcontracts/typesystem'
ERROR in ./node_modules/#elrondnetwork/erdjs/out/smartcontracts/wrapper/contractWrapper.js 48:29-42
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/#elrondnetwork/erdjs/out/smartcontracts/wrapper'
ERROR in ./node_modules/#elrondnetwork/erdjs/out/testutils/wallets.js 72:24-37
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/#elrondnetwork/erdjs/out/testutils'
ERROR in ./node_modules/#emurgo/cardano-serialization-lib-nodejs/cardano_serialization_lib.js 10824:14-40
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/#emurgo/cardano-serialization-lib-nodejs'
ERROR in ./node_modules/cardano-crypto.js/lib.js 38:28-41
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/cardano-crypto.js'
ERROR in ./node_modules/caver-js/packages/caver-ipfs/src/index.js 22:11-24
Module not found: Error: Can't resolve 'fs' in '/home/galich/Desktop/projects/mp-test/node_modules/caver-js/packages/caver-ipfs/src'
Than I've tried to fix them with
webpack.config.js
module.exports = (phase, { defaultConfig }) => {
return {
...defaultConfig,
webpack: (config) => {
config.resolve = {
...config.resolve,
fallback: {
fs: false,
path: false,
os: false,
},
node: {
fs: "empty",
},
};
return config;
},
};
};
It didn't help a lot, than I've add to package.json these lines
"browser": {
"fs": false,
"path": false,
"os": false
},
So I've stacked at it, and trying to find solution for 2 hours, has anybody some ideas, how to fix that ? Thank you.
Somehow your app's modules are missing.
I had a similar issue and I resolved it by calling:
npm cache clean --force
npm install
and then
npm start
Related
It seems that vite does not do automatic polyfills anymore - vite 4.0.0
How do you guys go about this? I have tried multiple variations of what I could find over the internet and none of them seems to be solid.
✘ [ERROR] The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/#esbuild-plugins/node-globals-polyfill/_buffer.js" cannot be marked as external
✘ [ERROR] The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/#esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be marked as external
Build failed with 2 errors:
error: The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/#esbuild-plugins/node-globals-polyfill/_buffer.js" cannot be marked as external
error: The injected path "/Users/marian/code/OzoneV2/app-web/node_modules/#esbuild-plugins/node-globals-polyfill/_virtual-process-polyfill_.js" cannot be marked as external
my config
// yarn add --dev #esbuild-plugins/node-globals-polyfill
import { NodeGlobalsPolyfillPlugin } from "#esbuild-plugins/node-globals-polyfill";
// yarn add --dev #esbuild-plugins/node-modules-polyfill
import { NodeModulesPolyfillPlugin } from "#esbuild-plugins/node-modules-polyfill";
// You don't need to add this to deps, it's included by #esbuild-plugins/node-modules-polyfill
import rollupNodePolyFill from "rollup-plugin-node-polyfills";
export default {
resolve: {
alias: {
// This Rollup aliases are extracted from #esbuild-plugins/node-modules-polyfill,
// see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
// process and buffer are excluded because already managed
// by node-globals-polyfill
util: "rollup-plugin-node-polyfills/polyfills/util",
sys: "util",
events: "rollup-plugin-node-polyfills/polyfills/events",
stream: "rollup-plugin-node-polyfills/polyfills/stream",
path: "rollup-plugin-node-polyfills/polyfills/path",
querystring: "rollup-plugin-node-polyfills/polyfills/qs",
punycode: "rollup-plugin-node-polyfills/polyfills/punycode",
url: "rollup-plugin-node-polyfills/polyfills/url",
string_decoder: "rollup-plugin-node-polyfills/polyfills/string-decoder",
http: "rollup-plugin-node-polyfills/polyfills/http",
https: "rollup-plugin-node-polyfills/polyfills/http",
os: "rollup-plugin-node-polyfills/polyfills/os",
assert: "rollup-plugin-node-polyfills/polyfills/assert",
constants: "rollup-plugin-node-polyfills/polyfills/constants",
_stream_duplex: "rollup-plugin-node-polyfills/polyfills/readable-stream/duplex",
_stream_passthrough: "rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough",
_stream_readable: "rollup-plugin-node-polyfills/polyfills/readable-stream/readable",
_stream_writable: "rollup-plugin-node-polyfills/polyfills/readable-stream/writable",
_stream_transform: "rollup-plugin-node-polyfills/polyfills/readable-stream/transform",
timers: "rollup-plugin-node-polyfills/polyfills/timers",
console: "rollup-plugin-node-polyfills/polyfills/console",
vm: "rollup-plugin-node-polyfills/polyfills/vm",
zlib: "rollup-plugin-node-polyfills/polyfills/zlib",
tty: "rollup-plugin-node-polyfills/polyfills/tty",
domain: "rollup-plugin-node-polyfills/polyfills/domain",
},
},
optimizeDeps: {
esbuildOptions: {
// Node.js global to browser globalThis
define: {
global: "globalThis",
},
// Enable esbuild polyfill plugins
plugins: [
NodeGlobalsPolyfillPlugin({
process: true,
buffer: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
build: {
rollupOptions: {
plugins: [
// Enable rollup polyfills plugin
// used during production bundling
rollupNodePolyFill(),
],
},
},
};
I encountered the same issue "cannot be marked as external" when working with the bip39 package and getting error because of buffer not defined. I tried many stuffs so not sure how what I solved, but here is my configuration (working with svelteKit):
In vite.config.js:
import { sveltekit } from '#sveltejs/kit/vite';
import type { UserConfig } from 'vite';
const config: UserConfig = {
plugins: [sveltekit()],
resolve: {
alias: {
// polyfills
Buffer: 'vite-compatible-readable-buffer',
stream: 'vite-compatible-readable-stream',
util: 'rollup-plugin-node-polyfills/polyfills/util',
}
}
};
export default config;
In layout.ts:
import { Buffer as BufferPolyfill } from 'buffer'
declare var Buffer: typeof BufferPolyfill;
globalThis.Buffer = BufferPolyfill
In app.html:
<script>
/**
* this is a hack for error: global is not defined
*/
var global = global || window
</script>
I hope it helps. I'm new to svelte and I don't 100% know what I'm doing :p
I am new to coding. And trying to make an electron app with react. In the app I want to save user login information in the app so that I can automatically fetch the data when the app launches. So, I am using electron-settings to save the data.
code sample:
app.jsx
...
import setting from "electron-settings";
function App() {
...
useEffect(() => {
const getUser = async () => {
return await setting.get('xpass-user')
}
console.log(getUser());
}, [])
return ...;
}
export default App;
electron.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const url = require('url')
const isDev = require('electron-is-dev')
function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 1250,
height: 900,
titleBarStyle: "hiddenInset",
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
}
})
win.loadURL(
isDev
? 'http://localhost:3000'
: url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
})
)
win.webContents.openDevTools();
}
app.on('ready',createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
the error:
ERROR in ./node_modules/electron-settings/dist/settings.js 166:27-40
Module not found: Error: Can't resolve 'fs' in
'C:\Users\learner\app\node_modules\electron-settings\dist'
ERROR in ./node_modules/electron-settings/dist/settings.js 170:29-44
Module not found: Error: Can't resolve 'path' in
'C:\Users\learner\app\node_modules\electron-settings\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 }
ERROR in
./node_modules/electron-settings/node_modules/mkdirp/lib/find-made.js
3:4-19
Module not found: Error: Can't resolve 'path' in
'C:\Users\app\node_modules\electron-settings\node_modules\mkdirp\lib'
If anyone can help me I'd be grateful. Thank You
Module not found: Error: Can't resolve 'fs' in...
In create-react-app, they have stubbed out 'fs'.You cannot import it. They did this because fs is a node core module.
Add the following to the root of the "package.json" file.
"browser": {
"fs": false,
"path": false,
"os": false
}
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.
to resolve this issue check this question How to Polyfill node core modules in webpack 5
i have big problem with my project, when i'm uploading riot api to my file
import { RiotAPI, RiotAPITypes, PlatformId } from "#fightmegg/riot-api";
and trying to use it, exactly like on github, i get insta error in console, which shows that i don't have modules : tls, net, dns. I tried to install them and import, but it was still error.
I'm trying to find user, by world and nickname so i'm using this code
const config: RiotAPITypes.Config = {
debug: false,
cache: {
cacheType: "local", // local or ioredis
client: `localhost:3000/settings`, // leave null if client is local
ttls: {
byMethod: {
[RiotAPITypes.METHOD_KEY.SUMMONER.GET_BY_SUMMONER_NAME]: 5000, // ms
},
},
},
};
const rAPI = new RiotAPI("RGAPI-37aee947-8e88-4f4c-b420-f7828d58e815", config);
(async () => {
const rAPI = new RiotAPI("RGAPI-37aee947-8e88-4f4c-b420-f7828d58e815");
const summoner = await rAPI.summoner.getBySummonerName({
region: PlatformId.EUW1,
summonerName: "Demos Kratos",
});
})();
and problem which i see looks like this :
Module not found: Can't resolve 'net'
Import trace for requested module:
./node_modules/ioredis/built/cluster/index.js
./node_modules/ioredis/built/index.js
./node_modules/#fightmegg/riot-api/dist/esm/cache.js
./node_modules/#fightmegg/riot-api/dist/esm/index.js
./src/pages/settings/index.tsx
Module not found: Can't resolve 'tls'
Import trace for requested module:
./node_modules/ioredis/built/index.js
./node_modules/#fightmegg/riot-api/dist/esm/cache.js
./node_modules/#fightmegg/riot-api/dist/esm/index.js
./src/pages/settings/index.tsx
Module not found: Can't resolve 'dns'
Import trace for requested module:
./node_modules/ioredis/built/cluster/index.js
./node_modules/ioredis/built/index.js
./node_modules/#fightmegg/riot-api/dist/esm/cache.js
./node_modules/#fightmegg/riot-api/dist/esm/index.js
./src/pages/settings/index.tsx
I'm working on an app where I've updated the frontend to use vue cli v5 from v4 and am getting a runtime error: Uncaught ReferenceError: process is not defined. Process.version is referenced in the jsonwebtoken library I'm using. See below:
Uncaught ReferenceError: process is not defined error
jsonwebtoken reference
I had a few pollyfill module related errors during compilation which I fixed below due to vue cli v5 using webpack 5:
fallback: {
crypto: require.resolve('crypto-browserify'),
buffer: require.resolve('buffer'),
util: require.resolve('util'),
stream: require.resolve('stream-browserify')
}
In my webpack config file I've tried adding/setting the process.env variable:
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': ''
}),
new Dotenv({ systemvars: true })
],
Has anyone run into a similar issue upgrading to vue cli v5? Thanks!
Try that:
const webpack = require('webpack');
const {defineConfig} = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack: {
//process: {env: {}},
plugins: [
// fix "process is not defined" error:
// (do "npm install process" before running the build)
new webpack.ProvidePlugin({
process: 'process/browser',
}),
],
resolve: {
fallback: {
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
os: require.resolve("os-browserify/browser"),
url: require.resolve("url"),
assert: require.resolve("assert"),
},
},
}
});
I have external directory common and I would like to import react components from that directory into web-static. In web-static I am using nextjs.
Currently I having this error:
Module not found: Can't resolve 'react' in '/Users/jakub/Sites/WORK/wilio-web-common/common/src/#vendor/atoms'
I added these lines to next.config.js:
const babeRule = config.module.rules[babelRuleIndex];
if (babeRule && babeRule.test) {
babeRule.test = /\.(web\.)?(tsx|ts|js|mjs|jsx)$/;
if (babeRule.include) {
babeRule.include = [
...babeRule.include,
resolve(__dirname, "../common/src/#vendor"),
];
}
}
config.resolve.alias = {
...config.resolve.alias,
"#vendor": resolve(__dirname, "../common/src/#vendor")
};
My tsconfig.json file:
"paths": {
"#vendor/*": ["../common/src/#vendor/*"]
}
Webpack can resolve these components but can't resolve installed packages in these components.
../common/src/#vendor/atoms/Test.js
Module not found: Can't resolve 'react' in '/Users/user1/Sites/WORK/web-app/common/src/#vendor/atoms'
Do I need to include this directory also in webpacks config.externals? Current nextjs webpack externals
-----
options.isServer: false
[ 'next' ]
-----
-----
options.isServer: true
[ [Function] ]
-----
How can be this done? Thanks for any help
Starting in Next.js 10.1.2, you can use the currently experimental externalDir option in next.config.js:
module.exports = {
experimental: {
externalDir: true,
},
};
Note that for React components to work, I also had to declare the root package.json as a yarn workspace:
{
// ...
"private": true,
"workspaces": ["next-js-directory"],
// ...
}