javascript import issues with import vs require - javascript

I am building a desktop application using Electorn and angular 8. I am trying to import a javascript file in index.html which has content like the following.
import ipcRenderer from 'electron';
import {
START_NOTIFICATION_SERVICE,
NOTIFICATION_SERVICE_STARTED,
NOTIFICATION_SERVICE_ERROR,
NOTIFICATION_RECEIVED,
TOKEN_UPDATED,
} from 'electron-push-receiver/src/constants';
So when I use the above code I get error Uncaught SyntaxError: Unexpected identifier.
and When I use following code I get Uncaught ReferenceError: require is not defined
const { ipcRenderer } = require ('electron')
const {
START_NOTIFICATION_SERVICE,
NOTIFICATION_SERVICE_STARTED,
NOTIFICATION_SERVICE_ERROR,
NOTIFICATION_RECEIVED,
TOKEN_UPDATED,
} = require ('electron-push-receiver/src/constants')
What could be the solution?
All the angular imports work with first snippets above. they do not have require. So I am assuming the first snippet should work as I am importing it in angular.
I am importing the file by specifying the following in the angular.json file.
"scripts": [
"../path/to/.js",
]

For that import for the ipcRenderer to work you have to establish it like so:
import { ipcRenderer } from "electron";
ipcRenderer being a module that you are pulling out of the electron library.

Related

Can't import Vonage Client SDK into my preact (vite) project

I have a Preact project using Vite. I want to use the nexmo-client SDK from vonage but when I import using the ES method it breaks my project.
// app.tsx
import NexmoClient from 'nexmo-client';
I get the following error in the console.
index.js:19 Uncaught ReferenceError: global is not defined
at index.js:19:19
at index.js:12:22
at node_modules/nexmo-client/dist/index.js (index.js:16:1)
at __require (chunk-J43GMYXM.js?v=f3505250:11:50)
at dep:nexmo-client:1:16
However if I import it using via a script tag it works just fine.
// index.html
<script src="node_modules/nexmo-client/dist/nexmoClient.js"></script>
// app.tsx
const NexmoClient = window.NexmoClient;
OK, there are two problems here.
Firstly, NexmoClient tries to use global which is not available on the browser.
Secondly, NexmoClient has a dependency on socket.io-client, for some reason Vite imports a Node version of the socket.io-client that again tries to use modules that are not available on the browser, namely 'child_process'.
To fix both issues you can provide the following config to Vite, this should make sure the resulting build is compatible with the brother.
// vite.config.js or vite.config.ts
import { defineConfig } from 'vite'
import preact from '#preact/preset-vite'
export default defineConfig({
plugins: [preact()],
define: {
global: {},
},
resolve: {
alias: {
"xmlhttprequest-ssl": "./node_modules/engine.io-client/lib/xmlhttprequest.js"
}
}
})

Can't generate Nuxt website with #googlemaps/js-api-loader

I am using #googlemaps/js-api-loader in my Nuxt 3 website. Everything works fine in local development, but when I try to build the project with nuxt generate (no matter if locally or on Vercel) I'm getting following error:
[nuxt] [request error] Named export 'Loader' not found. The requested module 'file:///path/to/website/node_modules/#googlemaps/js-api-loader/dist/index.umd.js' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:
The important part of loading script looks like this:
import { Loader } from '#googlemaps/js-api-loader';
const loader = new Loader({
apiKey: config.googleMapsApiKey,
version: 'weekly',
});
onMounted(async() => {
await loader
.load()
...
so I tried to import this package differently, e.g.:
import * as gmaps from '#googlemaps/js-api-loader';
const { Loader } = gmaps;
and the previous error disappeared, but now I'm getting
[Vue warn]: Unhandled error during execution of setup function
at <DynamicLocations class="contact__map" locations= [
{
id: 1,
...
[nuxt] [request error] gmaps.Loader is not a constructor
at setup (./.nuxt/prerender/chunks/app/server.mjs:5536:20)
at _sfc_main$t.setup (./.nuxt/prerender/chunks/app/server.mjs:5582:25)
at callWithErrorHandling (./.nuxt/prerender/chunks/renderer.mjs:2654:23)
at setupStatefulComponent (./.nuxt/prerender/chunks/renderer.mjs:9548:30)
at setupComponent (./.nuxt/prerender/chunks/renderer.mjs:9503:12)
at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12068:17)
at Object.ssrRenderComponent (./.nuxt/prerender/chunks/renderer.mjs:12504:12)
at ./.nuxt/prerender/chunks/app/server.mjs:5628:36
at renderComponentSubTree (./.nuxt/prerender/chunks/renderer.mjs:12149:13)
at renderComponentVNode (./.nuxt/prerender/chunks/renderer.mjs:12084:16)
I also can't import package by default export. Do you have any ideas what's going on and how can I fix this?
I found a documentation page related to this problem and there is the following information:
If you encounter these errors, the issue is almost certainly with the upstream library. They need to fix their library to support being imported by Node.
Although they provide a solution to get rid of errors by adding the package to build.transpile:
build: {
transpile: ['#googlemaps/js-api-loader'],
},
It worked for me

Is there a way to import .html file from JavaScript?

I have the following import statements in my Cloudflare Worker project, to import a html file as a string constant :
import userAgentJsch from './userAgentJsch';
import { parse } from 'cookie';
import test from '.test.html';
It fails with the error:
Module not found: Error: Can't resolve '.test.html' in
I was reading about needing to configure my webpack.config.js file, but I don't have such a file.
Can you please help? I just want to keep my html file separated from the js files, but I can't find a solution I can understand.
View folder structure is used for rendering templates no doubts
to read files in nodejs use this :
const fs = require("fs");
const files = fs.readFileSync("new.html");
and to import
var htmlContent = require('path/to/html/file.html');

Loading list of Vue.components as an exported array to be used in app.js

I am on Laravel 8 and am using vue.js v2.6. I am attempting to move all of my Vue.component() declarations out of app.js and declare them in their own file so app.js is less cluttered. So in my project I created a new file js/vueComponents.js and in there I paste all of my vue component declarations. Then in app.js I am attempting to import and Vue.use(require()) but I am getting these errors in the console:
app.js:4301 Uncaught TypeError: $ is not a function
at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/components...
I am a bit new to importing js files as modules etc...am I not doing this correctly?
vueComponents.js
import * as Vue from 'vue'
export let vueFiles = [
Vue.component('users-page', require('./components/users-page.vue').default),
Vue.component('admin-page', require('./components/admin-page.vue').default),
...20 more components...
];
app.js
import { vueFiles } from './vueComponents.js';
Vue.use(vueFiles);
vueComponents.js
// no need to import Vue.
// Just do this... (no array)
Vue.component('users-page', require('./components/users-page.vue'));
Vue.component('admin-page', require('./components/admin-page.vue'));
app.js
require("./vueComponents.js") // give the correct path.

Importing constans from one JavaScript file to another one

I'm trying to import the constans from one JS file to another JS file.
Consider the following files:
Constans file (consts.js):
const cars = ["honda","mitsubishi","mercedes"];
export { cars };
Main javascript file (main.js):
import { cars } from './consts.js';
let initNumberOfCars = 0;
let speed = 80;
...
But I get the following error on line 1 at main.js:
Uncaught SyntaxError: Unexpected token {
How should I import the consts from one js file to another one?
Your code should work as is. It must be a Babel issue. If you don't have babel you'll need to look into setting it up with Webpack or Parcel for minimal config.
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
https://parceljs.org/
https://webpack.js.org/
https://babeljs.io/

Categories