I'm using the zerorpc package within an Electron-Vue project as a client to communicate with a remove server. Before using webpack to bundle the project, I was able to call these functions both in the main process and in the renderer process of Electron but after using vue command line to create a project which automatically adds in webpack and babel, it cannot load the module.
I've created a basic Vue.js project using its command line interface and then installed vue-electron-builder plugin and selected electron 5 using the following commands:
vue create myproject
yarn install
vue add electron-builder
yarn install zerorpc --save
yarn electron:serve
Some had suggested to rebuild the zeromq library against the Electron headers for a similar problem but that didn't solve the problem.
When I run yarn electron:serve, it finishes the normal serving procedure successfully but faces an error it's bundling the main process:
error in ./node_modules/zeromq/build/Release/zmq.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Related
I'm working on a project that's based on a given sample project that uses a package named Seeso.
The sample project uses the 'cross-env' and 'parcel-bundler' packages which are both deprecated, and I would like to replace them with pure node.
I managed to create a backend that statically serves requested files and thus handles imports,
but the Seeso package seems to dynamically resolve its imports using a webpack bundle (I have little to no knowledge of webpack but not even a configuration file is present; just the bundle), and I get the following error after I changed the import path of Seeso in the easy-seeso.js file to its actual path:
Uncaught SyntaxError: The requested module '/external_modules/seeso/dist/seeso.js' does not provide an export named 'CalibrationAccuracyCriteria' (at easy-seeso.js:2:34)
because of
import Seeso, {InitializationErrorType, CalibrationAccuracyCriteria} from '/external_modules/seeso/dist/seeso.js';
How can I import the needed Seeso files from the webpack bundle with minimum work and understanding of webpack as possible? (Preferably without running webpack commands before running - would like to run 'node server.js' and that's it)
Here is the sample project:
https://github.com/visualcamp/seeso-sample-web
I'm trying to create a monorepo using vue-cli 3 and lerna. I now have two packages:
common and app. Both common and app use Vue and import it. common has its main set like this. "main": "dist/common.umd.min.js"
When I import common in app, the process crashes with this error message trying to process common.umd.min.js:
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
Even running with node --max-old-space-size=4096 node_modules/#vue/cli-service/bin/vue-cli-service.js serve throws this error.
If I use "main": "src/main.ts", the build process works, but when I use vue-cli-service build, Vue is bundled twice, once for common and once for app.
Like you noticed, you are bundling Vue twice in your app. This is likely because you are including Vue as a dependency of both your common and app packages.
Have the app package be the only package that depends on Vue, and then you can make your common package export a Vue plugin. Your app package can then install the common plugin like so:
// main.js (in the app package)
import Vue from 'vue';
import plugin from 'my-common-package';
Vue.use(plugin);
I'm unsure of what is causing the out of memory error, but only using one Vue instance is a good start.
I am using Angular Universal Starter repo. In angular 4 universal for ssr we could debug browser and node part of application in dev mode(see console), but now I do not see way to debug node part. I tried to execute ts-node server.ts with some changes( paths to files, etc), but angular seems needs aot compiled app and
throw Error: You must pass in a NgModule or NgModuleFactory to be
bootstrapped.
from docs:
Development (Client-side only rendering)
- run npm run start which will start ng serve
Production (also for testing SSR/Pre-rendering locally)
- npm run build:ssr && npm run serve:ssr
At first glance debug on Node.js in development do not work. At least from the box. May be someone resolve this issue.
You can't debug node part of your Angular 4 app in browser. Node work on server part so you can't see this in browser (client side).
Only way to debug this part when you start it from ts-node server.ts is to use external tools like WebStorm etc. If you start your App in TS mode from Debug mode you can use all features of this tools.
I think this small piece of code can help you
create the project
ng n debuggable-universal-server --interactive=false
cd debuggable-universal-server
add universal
ng add #nguniversal/express-engine --clientProject debuggable-universal-server
To create the server-side app module, app.server.module.ts, run the following CLI command.
ng add #nguniversal/express-engine
To start rendering your app with Universal on your local system, use the following command.
npm run dev:ssr
I wrote a very basic express.js app. Then tried to make it one .js file. Browserify compiled the whole thing to a one file. But browserify-compiled code didn't work. As far as I know, browserify just replaces require statements with module codes. Error is:
C:\Users\HP\n\express\app.js:27025
__proto__: http.IncomingMessage.prototype
^
TypeError: Cannot read property 'prototype' of undefined
at Object.__dirname.173.accepts (C:\Users\HP\n\express\app.js:27025:34)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.170../application (C:\Users\HP\n\express\app.js:26823:11)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.168../lib/express (C:\Users\HP\n\express\app.js:26154:18)
at s (C:\Users\HP\n\express\app.js:1:316)
at C:\Users\HP\n\express\app.js:1:367
at Object.__dirname.153.express (C:\Users\HP\n\express\app.js:24010:15)
Browserify is designed specifically to package code for a browser.
Node.js supports a number of modules that a browser doesn't which have to be emulated by builtins. These modules will be replaced by a browser-specific shim. Some only supply a subset of the Node API that makes sense to have in a browser.
So you are running an app that has converted all the Node.js modules to support running what it can in a browser, back in Node where the modules are available but are no longer being used.
Try rollup or you could possibly configure babel to work like you need
I had this very same issue but like you said the compile code should work on server side. I solved it from this link:
https://www.linkedin.com/pulse/bundling-nodemodules-your-nodejs-app-one-single-file-xuan-son-nguyen/
Use browserify for bundling and terser for minifying. Starting by installing them globally:
npm install -g browserify
npm install -g terser
Next, we have to add a build script to package.json
...
"scripts": {
...
"build": "browserify --node --ignore-missing index.js | terser > bundle.js"
}
...
Each time you want to promote to production, you have to make a new bundle:
npm run build
A new file called "bundle.js" will be created.
Let there be peace, and there was peace. Happy coding.
I have created a unit test in angular js,However I have no idea on how to setup node.js and Karma
So I downloaded the node.js from nodejs.org and installed it.
Open the command prompt and installed karma by executing "npm install karma"
It installed karma.But when I execute my angular js unit test case,it reports some errors
angular is undefined.
I followed the instructions as mentioned in this
http://bardevblog.wordpress.com/2013/07/28/setting-up-angularjs-angular-seed-node-js-and-karma/
Is there any where how to setup Karma and node js to execute angular unit test cases.
Please provide me the information
You can use the Yeoman generator for an Angular.js app to generate a new project and see how it is done there. Please follow the steps under "Usage" on the GitHub page to set up the new project. (For all questions yo is asking just hit enter.) Finally, type grunt test:client. This executes Karma configured with the karma.conf.js.
In your karma config file you need to define all the js files that needs to be loaded and the order in which you specify then is important! Example:
files : [
'source/lib/angular/angular.js', // angular first
'source/lib/angular/*.js', // then any other angular files (angular-mocks.js, angular-resource.js, angular-route.js ...
'source/lib/x2js/xml2json.min.js', // some libraries I used
'source/lib/jquery/jquery.js',
'source/lib/ui-bootstrap/ui-bootstrap.js',
'source/js/*.js', // my own js code
'source/tests/unit/*.js' // unit tests
]