james-pre
commented
9 months ago @jman13378 Which version of browserfs are you using?
Closed jman13378 closed 9 months ago
james-pre
commented
9 months ago @jman13378 Which version of browserfs are you using?
jman13378
commented
9 months ago idk latest
james-pre
commented
9 months ago If you're using the latest from NPM, it will not have the latest bug fixes and features. Please read Releases and compatibility going forward.
Try building it from source. That should fix the issue:
git clone https://github.com/jvilk/BrowserFS
cd BrowserFS
npm i
npm run buildwhere do i clone it, anywhere, in the root of the project, in the node_modules of the project
james-pre
commented
9 months ago Please clone it in a separate directory. You can then symlink the BrowserFS in node_modules to it.
For example (from your project):
cd ..
git clone https://github.com/jvilk/browserfs
cd browserfs
npm i
npm run build
cd ../your-project
rm -rf node_modules/browserfs
ln -s ../browserfs node_modules/browserfsnow when i run my build command i get this
james-pre
commented
9 months ago I don't see any issues with BrowserFS. What does index.js look like?
I recently removed the various polyfills exported by BrowserFS (path, process, buffer, etc.). The change was made because BrowserFS is not intended to polyfill those APIs. If you need to polyfill them, you can install a polyfill separately. Moreover, the polyfills used (bfs-path, bfs-process, etc.) were old and did not support the standard APIs correctly.
Those polyfills may have defined the missing globalName variables, which would have led to those errors. Regardless, having the index.js code would help me understand the problem better.
jman13378
commented
9 months ago import _ from "lodash";
window["privateLocalStorage"] = window.localStorage;
delete window.clearInterval;
const Twetzel = {
/** General Objects */
5858: {
/** */ 1: Object,
/** .*/ 2: Object,
/** */ 3: Object,
/** */ 4: Object,
/** */ 5: Object,
/** */ 6: Object,
/** */ 7: Object,
/** */ 8: Object,
/** */ 9: Object,
/** */ 10: Object,
/** */ 213: Object,
/** */ 424: Object,
/** */ 5643: Object,
/** */ 64353: Object,
},
/** Valuables */
5888: {
/** */ 565: Object,
/** */ 56564: Object,
/** */ 347: Object,
/** */ 1234: Object,
/** */ 126: Object,
/** */ 2454: Object,
},
};
window["Twetzel"] = Twetzel;
window.Twetzel[5888][565] = window.privateLocalStorage;
delete window.privateLocalStorage;
window.Twetzel[5858][1] = require("ejs");
const fr = require("browserfs");
fr.configure({ fs: "LocalStorage" });
delete window.localStorage;
window.Twetzel[5858][3] = fr.BFSRequire("fs");
window.Twetzel[5858][2] = require("socket.io-client");
window.Twetzel[5888][56564] = window.Twetzel[5858][2]("dashboard.sokobot.info/");
console.log(window.Twetzel);
require("./socket/socket")(window.Twetzel[5888][56564]);
console.log("e");
window["messages"] = document.getElementById("messages");
var form = document.getElementById("form");
//var loginform = document.getElementById("loginf");
//var signupform = document.getElementById("signupf");
var msg = document.getElementById("input");
/*form.addEventListener("submit", function (e) {
e.preventDefault();
if (input.value) {
if (input.value.includes("\\")) {
input.value = "";
return;
}
let data = JSON.parse(decodeBase64(localStorage.getItem("data")));
console.log(data);
socket.emit("chat message", `{"message": "${input.value}", "id": "${data.username}"}`);
input.value = "";
}
});*/
/*`
<iframe frameBorder="0" src="login.html" style="
width: 100%;
height: 100%;
position: fixed;
z-index: 1;
"></iframe>`,
*/
You are getting the errors because you are mixing CommonJS and ESM modules... You will have to use one or the other.
You also appear to be attempting to use DOM/browser APIs while using NPM modules and Node's require. Again, you will have to choose one (or use a bundler, which I recommend).
jman13378
commented
9 months ago to me it looks like im only using CommonJS modules
james-pre
commented
9 months ago Literally the first line is ESM: import _ from "lodash";
jman13378
commented
9 months ago that was from webpack i never removed it
james-pre
commented
9 months ago I recently removed the various polyfills exported by BrowserFS (path, process, buffer, etc.). The change was made because BrowserFS is not intended to polyfill those APIs. If you need to polyfill them, you can install a polyfill separately. Moreover, the polyfills used (bfs-path, bfs-process, etc.) were old and did not support the standard APIs correctly.
Those polyfills may have defined the missing globalName variables, which would have led to those errors. Regardless, having the index.js code would help me understand the problem better.
You can't use browserfs shims, as they have been removed. You should use a polyfill.
jman13378
commented
9 months ago Alright sorry for the late response im now getting this error in the browser console Uncaught TypeError: e is not a function
james-pre
commented
9 months ago @jman13378
I'm able to build and use BFS fine locally. Are you building from the latest commit or installing from NPM? If your building correctly, you may need to fix your import syntax.
jman13378
commented
9 months ago i am using
Please clone it in a separate directory. You can then symlink the BrowserFS in node_modules to it.
For example (from your project):
cd .. git clone https://github.com/jvilk/browserfs cd browserfs npm i npm run build cd ../your-project rm -rf node_modules/browserfs ln -s ../browserfs node_modules/browserfs
james-pre
commented
9 months ago Can you please get the errors from source? The error message is from the minified code, and does not help me understand the problem. Using a source map would be very helpful
Is there anywhere I can take a look at your code?
jman13378
commented
9 months ago import _ from "lodash"; window["privateLocalStorage"] = window.localStorage; delete window.clearInterval; const Twetzel = { /** General Objects */ 5858: { /** */ 1: Object, /** .*/ 2: Object, /** */ 3: Object, /** */ 4: Object, /** */ 5: Object, /** */ 6: Object, /** */ 7: Object, /** */ 8: Object, /** */ 9: Object, /** */ 10: Object, /** */ 213: Object, /** */ 424: Object, /** */ 5643: Object, /** */ 64353: Object, }, /** Valuables */ 5888: { /** */ 565: Object, /** */ 56564: Object, /** */ 347: Object, /** */ 1234: Object, /** */ 126: Object, /** */ 2454: Object, }, }; window["Twetzel"] = Twetzel; window.Twetzel[5888][565] = window.privateLocalStorage; delete window.privateLocalStorage; window.Twetzel[5858][1] = require("ejs"); const fr = require("browserfs"); fr.configure({ fs: "LocalStorage" }); delete window.localStorage; window.Twetzel[5858][3] = fr.BFSRequire("fs"); window.Twetzel[5858][2] = require("socket.io-client"); window.Twetzel[5888][56564] = window.Twetzel[5858][2]("dashboard.sokobot.info/"); console.log(window.Twetzel); require("./socket/socket")(window.Twetzel[5888][56564]); console.log("e"); window["messages"] = document.getElementById("messages"); var form = document.getElementById("form"); //var loginform = document.getElementById("loginf"); //var signupform = document.getElementById("signupf"); var msg = document.getElementById("input"); /*form.addEventListener("submit", function (e) { e.preventDefault(); if (input.value) { if (input.value.includes("\\")) { input.value = ""; return; } let data = JSON.parse(decodeBase64(localStorage.getItem("data"))); console.log(data); socket.emit("chat message", `{"message": "${input.value}", "id": "${data.username}"}`); input.value = ""; } });*/ /*` <iframe frameBorder="0" src="login.html" style=" width: 100%; height: 100%; position: fixed; z-index: 1; "></iframe>`, */
its here the error is coming from the configure
james-pre
commented
9 months ago What is the error stack in source (not the minified code)?
jman13378
commented
9 months ago how do i find that
james-pre
commented
9 months ago BrowserFS builds a sourcemap, so you should be able to run your code from source to use the sourcemap.
jman13378
commented
9 months ago Uncaught TypeError: e is not a function
at browserfs.js:15651:14
at e.Create (browserfs.js:9772:10)
at browserfs.js:15577:25
at V (browserfs.js:2043:10)
at forEach.t.Create (browserfs.js:15580:10)
at a (browserfs.js:15679:22)
at fo (browserfs.js:15712:10)
at e.configure (browserfs.js:15648:6)
at index.js:41:4
at index.js:60:35 /**
* Creates a file system with the given configuration, and initializes BrowserFS with it.
* See the FileSystemConfiguration type for more info on the configuration object.
*/
function configure(config, cb) {
getFileSystem(config, function (e, fs) {
if (fs) {
initialize(fs);
cb(); // this is the error line
}
else {
cb(e);
}
});
}That is not the most updated version. You probably need to do a git pull and rebuild BrowserFS.
jman13378
commented
9 months ago james-pre
commented
9 months ago The latest commit at the time of writing is 739ee5a. You may also need to do git fetch --all before pulling. 13c8da9 is not a commit in the repository. You should double check you are working in the right repository (Try git remote show origin and check that the URLs point to github.com/jvilk/browserfs)
jman13378
commented
9 months ago i think the problem is when i use npm install in the root project it will update the module to the latest on npm instead of keeping the one installed should i fix this by removing it from the package.json
james-pre
commented
9 months ago Do not use npm install after symlinking BFS to your local project. If you do, then you have to remove the installed BFS and symlink the local repository again.
jman13378
commented
9 months ago alright im now getting this after using patch-package
Uncaught TypeError: n.configure is not a function
at index.js:41:4
at index.js:60:35
at index.js:60:35thsi is the code
this solution was provided by Cloudflare discord (message)
james-pre
commented
9 months ago It is probably because you are using require and because of this:
package.json:
{
...
"exports": {
".": {
"require": "./dist/browserfs.min.js",
"import": "./dist/browserfs.min.mjs"
}
},
...
}scripts/build.mjs
//...
const configs = {
'browser, unminified': { outfile: 'dist/browserfs.js' },
'browser, minified': { outfile: 'dist/browserfs.min.js', minify: true }, // <- this is UMD!
'ESM, unminified': { outfile: 'dist/browserfs.mjs', format: 'esm' },
'ESM, minified': { outfile: 'dist/browserfs.min.mjs', format: 'esm', minify: true },
node: { outfile: 'dist/browserfs.cjs', platform: 'node', format: 'cjs', minify: true, alias: {}, plugins: [] },
};
//...I've fixed it so it should work now (8c574b3). I apologize for taking so long to find and fix the bug.
jman13378
commented
9 months ago so i just need to recompile the latest version?
james-pre
commented
9 months ago Yes, make sure you fetch and pull first.
If you are not familiar with git, I highly recommend you watch this video.
jman13378
commented
9 months ago i love git lmao
give me like 5 min had some issues with pulling/pushing to my repo
jman13378
commented
9 months ago Uncaught (in promise) Error: Error: ENOSPC: LocalStorage is full.
james-pre
commented
9 months ago That is because you delete window.localStorage.
jman13378
commented
9 months ago can I make LocalStorage have a custom variable
jman13378
commented
9 months ago alright after switching to HTTPRequest i get this
browserfs.min.cjs:6 Uncaught (in promise) Error: Error: EIO: Unexpected token '<', " <!DOCTYPE "... is not valid JSON
at Ut (browserfs.min.cjs:6:4780)That is most likely because you are making a request to an endpoint (e.g. example.com/endpoint) which returns an HTML document, and BFS attempts to parse the body as JSON. Could you please get an error stack with the source? (the files should have a .ts extensions).
This is probably an error with BrowserFS.
jman13378
commented
9 months ago where do i get those files
also i didnt even request anything (as in like BFS.readFile())
james-pre
commented
9 months ago The files are in your local clone of BFS.
If you're using Typescript, import from the BFS src directory (e.g. import <stuff> from 'browserfs/src/<file path>.ts').
If not, make sure to use the source maps (run your code from the source).
I think this may have to do with the internal fetch usage and response.json, so I will take a look at that.
jman13378
commented
9 months ago browserfs.zip
these are the files that are used when running the site (browserfs/dist),the one that throws the error is browserfs.min.cjs:6:4780
james-pre
commented
9 months ago Please use the browserfs.cjs (which is unminified). Doing so will help me find and fix the problem faster.
jman13378
commented
9 months ago Alright I'll do that in a few minutes
On Fri, Sep 22, 2023, 8:55 AM Vortex @.***> wrote:
Please use the browserfs.cjs (which is unminified). Doing so will help me find and fix the problem faster.
— Reply to this email directly, view it on GitHub https://github.com/jvilk/BrowserFS/issues/368#issuecomment-1731367643, or unsubscribe https://github.com/notifications/unsubscribe-auth/AYI7YEVEYBTOIIYNYEBCC7DX3WDC5ANCNFSM6AAAAAA4RTIAAM . You are receiving this because you were mentioned.Message ID: @.***>
jman13378
commented
9 months ago the error is in the return line
writeFile(fname, data, encoding, flag, mode, cred) {
return this._rpc("writeFile", fname, data, encoding, flag, mode, cred);
}That code appears to be from WorkerFS. Could you please provide the stack trace?
jman13378
commented
9 months ago Sorry for the delayed response, but it looks like it doesnt error anymore but when i use the read/write methods nothing happens
james-pre
commented
9 months ago Is your code on GitHub? If so, you can point me to it and I can try to reproduce the issue.
jman13378
commented
9 months ago https://github.com/jman13378/webpack its in src/index.js
james-pre
commented
9 months ago @jman13378 Please try with the updates I've made to your configuration in this PR.
james-pre
commented
9 months ago I'm going to close this issue since I can't reproduce the bug with a proper configuration.
when i dont use
configurei getVM1210:5 Uncaught Error: Error: EIO: Initialize BrowserFS with a file system using BrowserFS.initialize(filesystem)when i useconfigurei getUncaught TypeError: e is not a functioncode that uses BFSwebpack config
```js const path = require("path"); var { FilerWebpackPlugin } = require("filer/webpack"); const webpack = require("webpack"); module.exports = { resolve: { // Use our versions of Node modules. alias: { fs: "browserfs/dist/shims/fs.js", buffer: "browserfs/dist/shims/buffer.js", path: "browserfs/dist/shims/path.js", processGlobal: "browserfs/dist/shims/process.js", bufferGlobal: "browserfs/dist/shims/bufferGlobal.js", bfsGlobal: require.resolve("browserfs"), }, fallback: { fs: require.resolve("browserify-fs"), stream: require.resolve("stream-browserify"), buffer: require.resolve("buffer"), }, }, entry: "./src/index.js", mode: "production", output: { filename: "main.js", path: path.resolve(__dirname, "dist"), }, plugins: [new webpack.ProvidePlugin({ BrowserFS: "bfsGlobal", process: "processGlobal", Buffer: "bufferGlobal" }), new FilerWebpackPlugin()], }; ```