ElectronJS: Renderer can't resolve module require("./index.js") over HTTP - javascript

I have my folder structure set up like this:
assets/
logo.png
other_web_assets.png
electron/
node_modules
main.js
package-lock.json
package.json
src/
index.js
otherJavascriptFiles.js
index.html
style.css
The reason I've separated ElectronJS from the website is that the website is intended to be served via HTTP (it's not supposed to work without Electron though, I only need the HTTP protocol for Firebase Authentication). Currently I'm serving index.html via the LiveServer VSCode extension on port 5500.
In my index.html I'm using require("./src/index.js") to load index.js, and in the index.js file I use require to communicate with the other javascript files and other node modules.
However, the require("./src/index.js") doesn't work from index.html, I always get the error Uncaught Error: Cannot find module './src/index' in the dev tools console.
I've tried importing index.js with <script src="./src/index.js"></script>, but that results in the same error, with a different javascript file that my index.js tries to import using require.
I can however require normal node modules (for example require("request")) without any errors.
Is there any way to fix this?

To import functions from a js file I use
import {functionName} from 'path to js file where function is defined'
I use Require for pictures, etc. but not for js files.
I suggest you to use import. Also, define the functions you need to import into other files using the word export

Related

Cannot find module (trying to load a module from a folder)

I'm new into webpack, and I'm having an issue trying to resolve a subdependency.
I'm importing a dependency that is trying to require a module from a specific folder (not the node_modules) (let's call it subdependency). That folder contains two files:
subdependency/package.json
subdependency/build/Release/addon.node
subdependency/lib/src/index.js (this index.js requires the addon.node)
I'm using webpack, and when importing my dependency it was not able to find subdependency.
The subdependency is there but it was not accessible. I added a loader for loading .node files https://www.npmjs.com/package/native-ext-loader and it was still not working; trying to identify what was happening I modified in my build the require path from ./subdependency to ./subdependency/build/Release/addon.node and the file was accessible (so I guess the native ext loader is working fine, but it's not loading other files like the index.js).
I think the problem is that webpack is not able to understand that ./subpdendency is a module, or that I'm not loading it correctly.
Any suggestion or idea is welcome!
I resolved the issue by forking the dependency and switching from node-pre-gyp to prebuildify, since node-pre-gyp doesn't works fine with webpack.

Webpack not including all required files in build

I am working on rewritting some part of a js library with WebAssembly . The library uses rollup to bundle and the output created was dist/rebound.js . My changes add an additional file rebound.wasm . I didnt use any wasm loader but just the fetch api to bring to load wasm ,
//rebound.js
fetch('rebound.wasm').then(//instantiate)
I use rollup-copy-plugin to copy the wasm file to dist/rebound.wasm. Everything is fine, the dist folder has both js and wasm file. But when I use it in a test project which uses webpack and import rebound from 'rebound' the rebound.js file is present but the rebound.wasm file is not present. The fetch api gives a 404 error.
I feel webpack may be treeshaking it as there is no explicit import statement. How do I make sure rebound.wasm would in the js build?
If you need anymore info please ask.

Webpack Including JavaScript File via <script> Tag

I'm using Webpack with Storybook and need to include a JavaScript library file in an HTML file via a script tag. Unfortunately, I get a 404 error indicating that the file was not found (the file's path is based on my local filesystem and is correct). How do I inform Webpack regarding where to look for my library or "static" files?
Add files in entry object in webpack.config.js
entryPoint = {
app: ['path/to/script', 'path/to/script2','./index.js'],
};
This will make sure that you have the library loaded when you have run index.js (entry point of project).
More on Webpack entry points.

Browserify modules cannot be referenced from index.html after including bundle.js script

I'm using Browserify to access a Node module from an index.html file (hosted on Google App Engine)
I import the module in a "main.js" file, as I see is the standard in the Browserify documentation, as follows:
var request = require('request');
var fs = require('fs');
I then bundle this up into a bundle.js file using the following command:
browserify main.js -o bundle.js
This successfully produces the required bundle.js file. I then include this at the top of the header in my index.html as follows:
<HEAD>
<script src="/scripts/bundle.js"></script>
<script src="/scripts/util/loader.js"></script>
<!-- More scripts below here -->
A script within the body of index.html then makes a call to a function within loader.js which uses the line
request('api.my-url.com/world').pipe(fs.createWriteStream('/resources/myMap.json'));
Which I use to attempt to create a file containing the contents of the response. However, when I deploy this on GAE, and access index.html, I am greeted by the error message:
loader.js:15 Uncaught ReferenceError: request is not defined
at loadWorld (loader.js:15)
at Object.create ((index):55)
If I try and move the request() call up into the script in index.html I get the same problem, but if I move the line into main.js, I no longer get this issue.
I assume this is down to a personal misunderstanding of Javascript, but I can't seem to figure out why the request object is not available in index.html after bundle.js has been included in index.html via a script tag.
Many thanks to anyone who can shed some light on the situation, thanks.
When you create a browserify bundle, it is intended to be the application's "entry-point". But it seems that here you have your entry-point in index.html, so what you want is to bundle a standalone library.
Browserify has an option called --standalone to do this, which generates a UMD bundle instead: https://github.com/substack/browserify-handbook#standalone
You invoke it in much the same way, but specify what name (in the global namespace) the UMD bundle should be given. Eg.
browserify foo.js --standalone mylib > bundle.js
Now when you include <script src="bundle.js"></script> in your html, subsequent scripts will have be able to reference the mylib object.
Here's an example of using the --standalone option:
https://github.com/joshwnj/react-visibility-sensor/tree/master/example-umd
https://github.com/joshwnj/react-visibility-sensor/blob/master/package.json#L9
Also, if you want something like request that can be used in the browser, https://www.npmjs.com/package/xhr has a very similar API.

What is the difference between JS files in dist/ folder and the one in root?

I am totally new to NodeJS and I wonder what's the difference between those two.
For example, in this project (https://github.com/fikriauliya/hipku), we have index.js and dist/hipku.js. They are similar except the last line:
module.exports = publicMethods; vs return publicMethods;
I guess dist/hipku.js is generated from index.js? How is it generated and why does it need to be generated?
Things in the dist folder are usually the product of building from index.js in this case. You'll notice it gets minified, and that folder would eventually be used on production sites. If you look at the package.json file, you'll notice that index.js is the main file, so if you're doing any edits, that would be the place to do so.
It depends on how you want to use this package, in browser or server side.
server side
index.js is the entry of NPM package. When you do require('hipku'), actually NodeJS locates the file module node_modules/hipku and run index.js ends up with the object adhere to module.exports
browser
Just load dist/hipku.js into your browser by <script>, it will register hipku into your global namespace, then you can use it's API.

Categories

Resources