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
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"
}
}
})
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
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');
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.
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/