We Keep Coding

How to Polyfill node core modules using vite

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

`vite build` is throwing `Could not resolve "../internals/window" from "../internals/window?commonjs-external"`

I have recently migrated from CRA to Vite. Everything went smooth, yet the build script is throwing an error.
Seems to be a RollupError
Could not resolve "../internals/window" from "../internals/window?commonjs-external"
When I remove the define object from my config, the build succeeds yet the dev server stops working
I am using the vite 4
here is my config
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
return {
plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
preview: {
port: 3000,
},
build: {
outDir: "build",
rollupOptions: {
external: ["jss-plugin-window"],
},
},
define: {
global: "window"
},
server: {
open: true,
port: 3000,
},
envPrefix: "REACT_APP_",
};
});

I use the following the bypass the issue, got the solution from here: https://dev.to/lico/issues-that-i-encountered-and-how-to-deal-with-them-while-migrating-from-cra-to-vite-51pg
define: {
...(process.env.NODE_ENV === 'development' ? {global: 'window'} : {})
}

Riot API problem with missing modules TLS, NET, DNS

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

Unable to load react dev tools in electron

I'm trying to load React and Redux dev tools in electron, so far Redux was loaded successfully, but React was not. I didn't see the React tab in Developer Tools. Here is my code:
main.js
const electron = require("electron");
const path = require("path");
const url = require("url");
const os = require("os");
const { app, BrowserWindow } = electron;
let win;
const installExtensions = async () => {
const ses = win.webContents.session;
// react dev tools
ses.loadExtension(
path.join(
os.homedir(),
".config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0"
)
);
// redux dev tools
ses.loadExtension(
path.join(
os.homedir(),
".config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0"
)
);
};
const createWindow = async () => {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
});
win.maximize();
await installExtensions();
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true,
})
);
win.webContents.once("dom-ready", () => {
win.webContents.openDevTools();
});
win.on("closed", () => {
win = null;
});
};
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (win === null) {
createWindow();
}
});
package.json
{
"name": "electron-react-typescript",
"version": "0.0.7",
"description": "",
"main": "/main.js",
"scripts": {
"start": "electron main.js"
},
"dependencies": {
"electron": "^10.1.5",
"electron-builder": "^22.9.1"
}
}
I started the program using yarn start, here is the output:
yarn run v1.22.10
warning package.json: No license field
$ electron main.js
(node:8189) ExtensionLoadWarning: Warnings loading extension at /home/searene/.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
(node:8189) ExtensionLoadWarning: Warnings loading extension at /home/searene/.config/google-chrome/Default/Extensions/lmhkpmbekcpmknklioeibfkpmmfibljd/2.17.0_0: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
I saw Redux in the developer tools, but I didn't find React. According to this github issue, the above warnings shouldn't block the loading of dev tools. I also tried re-opening dev-tools, no luck. How to solve it?

under webPreferences add
contextIsolation: false
for the loadExtension function add { allowFileAccess: true } as a 2nd argument.
That should make it work, as they changed the default of contextIsolation to be true in some version (I think 9.0.0),
and added allowFileAccess as an extention loading option for security.
You can make an isDev boolean to use for setting the allowFileAccess if needs be.

Systemjs-Builder - Cannot configure properly - Bundling Typescript into a package

I want to build a quick nodejs script to package a Typescript app as SystemJS modules, a lot like what Angular2 bundles look like.
I tried different configurations but I can't seem to put my finger on it, and haven't found clear enough documentation as of yet.
Note that for this "test", I am not using Gulp or Jspm at all, just systemjs-builder for the time being (and don't plan on using jspm at all either)
Here's what my "project" looks like:
---- Project's Root
-------- index.ts // export * from './modules/index' and eventually more
-------- modules
------------ index.ts // export * from './menu/index'
------------ menu
---------------- menu.component.ts // export class
---------------- menu.service.ts // export class
I want to package this under a single file, where I will have multiple SystemRegister modules that can be consumed in an app thereafter
I tried the following without success:
var Builder = require('systemjs-builder');
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('./modules');
builder.bundle('./modules/index.ts', {
/* SystemJS Configuration Here */
baseURL: './modules',
transpiler: 'typescript',
typescriptOptions: {
"module": "system",
"emitDecoratorMetadata": true,
"experimentalDecorators": true
},
defaultExtension: 'ts',
packages: {
'modules': {
defaultExtension: 'ts'
}
}
}, 'infrastructure.js')
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.error(err);
})
First of all, the defaultExtension options doesn't seem to work at all
So when I do import {something} from 'filePath'; (without extension), it tries to load filePath, instead of filePath.ts;
Second, if I try adding the .ts extension in my imports (which I don't want to do), it complains that the code is invalid (unexpected token #, unexpected token menuItem and so forth)
Anyone have a good example or some explanations on how this is supposed to work?
Thank you

here you have an example: angular typescript skeleton
build task looks like this:
const path = require('path');
const Builder = require('jspm').Builder;
const builder = new Builder();
const packageJson = require(path.join(config.projectDir, 'package.json'));
return beginBuild()
.then(buildSFX)
.catch((err) => console.log('Build Failed', err));
function beginBuild() {
builder.reset();
return builder.loadConfig(path.join(config.projectDir, packageJson.jspm.configFile))
}
function buildSFX() {
const appName = packageJson.name;
const distFileName = `${appName}.min.js`;
const outFile = path.join(config.distDir, distFileName);
const moduleName = 'app';
const buildConfig = {
format: 'global',
minify: true,
sourceMaps: true
};
return builder.buildStatic(moduleName, outFile, buildConfig);
}
and jspm conf looks like this:
System.config({
defaultJSExtensions: true,
transpiler: "typescript",
typescriptOptions: {
"tsconfig": "src/tsconfig.json"
},
paths: {
"github:*": "vendor/jspm_packages/github/*",
"npm:*": "vendor/jspm_packages/npm/*",
"app": "src/index"
}
/// ...
}

Why do you want to bundle typescript? Bundling is a method used for optimizing the delivery of source code to the browser. The browser doesn't know typescript, it only knows javascript (unless you do on the fly transpiling).