installing:
npm i peerjs
/plugins/peerjs.js
import Peer from 'peerjs'
export default Peer
nuxt.config.js
plugins: [
{ src: "~/plugins/peerjs.js", ssr: true }
],
Browser error:
client.js?06a0:103 TypeError: Cannot set properties of undefined
(setting '_events')
at i (peerjs.min.js?a0bc:46)
at i (peerjs.min.js?a0bc:66)
at _callee2$ (index.js?f26e:87)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:294)
at Generator.eval [as next] (runtime.js?96cf:119)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
_callee$ # client.js?06a0:103 tryCatch # runtime.js?96cf:63 invoke # runtime.js?96cf:294 eval # runtime.js?96cf:119 asyncGeneratorStep #
asyncToGenerator.js?1da1:3
_next # asyncToGenerator.js?1da1:25 eval # asyncToGenerator.js?1da1:32 eval # asyncToGenerator.js?1da1:21 eval # client.js?06a0:65
Promise.catch (asíncrono) eval # client.js?06a0:115 eval #
client.js:1294 ./.nuxt/client.js # app.js:35
webpack_require # runtime.js:854 fn # runtime.js:151 0 # app.js:9767
webpack_require # runtime.js:854 checkDeferredModules # runtime.js:46 webpackJsonpCallback # runtime.js:33 (anónimo) #
app.js:1
Setting { src: '~/plugins/peerjs.js' , mode: 'server'} fixed the issue.
Strange since it should either be mode: 'client' as shown in the documentation but I guess that PeerJS relies in fact on Node and not on client's window.
Related
vue app will not load it keeps complaining about issuerBaseURL" must be a valid uri no matter what changes I am following this tutorial https://auth0.com/blog/complete-guide-to-nodejs-express-user-authentication/
TypeError: "issuerBaseURL" must be a valid uri
at module.exports.get (/Users/admin/Desktop/Desktop/Test/auth0-express-pug-sample-main/node_modules/express-openid-connect/lib/config.js:200:11)
at auth (/Users/admin/Desktop/Desktop/Test/auth0-express-pug-sample-main/node_modules/express-openid-connect/middleware/auth.js:27:18)
at Object.<anonymous> (/Users/admin/Desktop/Desktop/Test/auth0-express-pug-sample-main/src/index.js:29:3)
at Module._compile (node:internal/modules/cjs/loader:1102:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1131:10)
at Module.load (node:internal/modules/cjs/loader:967:32)
at Function.Module._load (node:internal/modules/cjs/loader:807:14)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
at node:internal/main/run_main_module:17:47
[nodemon] app crashed - waiting for file changes before starting...
App Configuration
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");
app.use(express.static(path.join(__dirname, "..", "public")));
app.use(
auth({
issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL,
baseURL: process.env.BASE_URL,
clientID: process.env.AUTH0_CLIENT_ID,
secret: process.env.SESSION_SECRET,
authRequired: false,
auth0Logout: true,
})
);
I was able to fix it by changing the .env file to AUTH0_ISSUER_BASE_URL=https://dev-4qbs9kwu.us.auth0.com/
The issuerBaseURL should be a secure URL and starts with HTTPS://
i installed postgraphile-plugin-upload-field
npm i graphile-contrib/postgraphile-plugin-upload-field
then
postgraphile -c 'postgres://postgres:mysecretpass#192.168.38.4:5432/gimapp' --cors -p 5001 --enhance-graphiql --host "0.0.0.0" -s messages,basic_auth,user --append-plugins #graphile/postgis,#graphile-contrib/pg-simplify-inflector,postgraphile-plugin-connection-filter,#graphile-contrib/postgraphile-plugin-upload-field --watch --no-ignore-indexes --jwt-token-identifier basic_auth.jwt_token --jwt-secret mysecretpass
throws exception like this.
Failed to load plugin '#graphile-contrib/postgraphile-plugin-upload-field'
/usr/lib/node_modules/postgraphile/build/postgraphile/cli.js:268
throw e;
^
Error: Cannot find module '#graphile-contrib/postgraphile-plugin-upload-field'
Require stack:
- /usr/lib/node_modules/postgraphile/build/postgraphile/cli.js
- /usr/lib/node_modules/postgraphile/cli.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Module.require (node:internal/modules/cjs/loader:997:19)
at require (node:internal/modules/cjs/helpers:92:18)
at /usr/lib/node_modules/postgraphile/build/postgraphile/cli.js:263:20
at Array.map (<anonymous>)
at loadPlugins (/usr/lib/node_modules/postgraphile/build/postgraphile/cli.js:255:18)
at Object.<anonymous> (/usr/lib/node_modules/postgraphile/build/postgraphile/cli.js:323:23)
at Module._compile (node:internal/modules/cjs/loader:1108:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/usr/lib/node_modules/postgraphile/build/postgraphile/cli.js',
'/usr/lib/node_modules/postgraphile/cli.js'
]
}
and here is another situation if i remove #graphile-contrib
postgraphile -c 'postgres://postgres:mysecretpass#192.168.38.4:5432/gimapp' --cors -p 5001 --enhance-graphiql --host "0.0.0.0" -s messages,basic_auth,user --append-plugins #graphile/postgis,#graphile-contrib/pg-simplify-inflector,postgraphile-plugin-connection-filter,postgraphile-plugin-upload-field --watch --no-ignore-indexes --jwt-token-identifier basic_auth.jwt_token --jwt-secret mysecretpass
here is the error:
PostGraphile v4.10.0 server listening on port 5001 🚀
Recoverable error occurred; use envvar 'DEBUG="graphile-build:warn"' for full error (see: https://graphile.org/postgraphile/debugging )
> TypeError: Cannot read property 'filter' of undefined…
Recoverable error occurred; use envvar 'DEBUG="graphile-build:warn"' for full error (see: https://graphile.org/postgraphile/debugging )
Seems like i'm stuck with my problems with loading a external umd component in vue.
I try to do something similar as
Vue 3 external component/plugin loading in runtime
This works for me using vue2 and webpack
Now I'm using Vue3/Vite and also the same source as in the Question above.
But when resolving the external component promise i get the following error when :
vue.js:1184 [Vue warn]: Unhandled error during execution of async component loader
at <AsyncComponentWrapper>
at <DemoComponent>
at <HelloWorld msg="Hello Vue 3.0 + Vite" >
at <App>
warn # vue.js:1184
logError # vue.js:1357
handleError # vue.js:1349
onError # vue.js:4637
(anonymous) # vue.js:4677
Promise.catch (async)
setup # vue.js:4676
callWithErrorHandling # vue.js:1300
setupStatefulComponent # vue.js:7561
setupComponent # vue.js:7522
mountComponent # vue.js:5264
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
mountChildren # vue.js:5043
processFragment # vue.js:5203
patch # vue.js:4854
componentEffect # vue.js:5357
reactiveEffect # vue.js:339
effect # vue.js:314
setupRenderEffect # vue.js:5322
mountComponent # vue.js:5280
processComponent # vue.js:5240
patch # vue.js:4861
render # vue.js:5937
mount # vue.js:4168
app.mount # vue.js:9324
(anonymous) # main.js:7
Show 16 more frames
external-component.js:11 Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
at <anonymous>
at HTMLScriptElement.<anonymous> (external-component.js:11)
this is the Code for the promise
export default async function externalComponent(url) {
const name = url.split(`/`).reverse()[0].match(/^(.*?)\.umd/)[1];
if (window[name]) return window[name];
console.log('run');
window[name] = new Promise((resolve, reject) => {
script.async = true;
script.addEventListener(`load`, () => {
resolve(window[name]);
});
script.addEventListener(`error`, () => {
reject(new Error(`Error loading ${url}`));
});
script.src = url;
document.head.appendChild(script);
});
return window[name];
}
and use this in my DemoComponent:
<script lang="ts">
import externalComponent from '../external-component';
import { defineAsyncComponent } from 'vue'
const asyncComponent = defineAsyncComponent(
() => externalComponent(`http://localhost:8200/MyComponent/MyComponent.umd.min.js`)
)
export default {
name: 'DemoComponent',
components: {
MyComponent:asyncComponent
},
....
Can somebody help me with this?
update:
If import vue from vue/dist/vue.esm-bundler and set to global, then no need to change Vite config, and no need to load vue from cdn.
import * as Vue from 'vue/dist/vue.esm-bundler';
window.Vue = Vue;
After trying the link above, I had gotten the vue warn invalid vnode type symbol(static) (symbol) error.
By adding the following config in Vite.config.js, it works for me.
// vite.config.js
import { viteExternalsPlugin } from 'vite-plugin-externals'
export default {
plugins: [
viteExternalsPlugin({
vue: 'Vue'
}),
]
}
https://github.com/crcong/vite-plugin-externals
I have decided to add bootstrap 4 to my Aurelia project.
It is an asp.net 2 solution with webpack.
This is what I did...
I removed bootstrap 3 and added bootstrap 4 via npm.
I added popper.js using npm next.
I rebuilt the solution which compiled ok.
I then ran the solution to find I now have the following error.
content - script.bundle.js:333 loading pref showConsoleLogs before prefs were initialised, you will not get the correct result
getPref # content-script.bundle.js:333
(anonymous) # content-script.bundle.js:481
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:521
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:593
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:621
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1346
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1662
a # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:2097
a # content-script.bundle.js:1
u # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:2106
(anonymous) # content-script.bundle.js:1
(anonymous) # content-script.bundle.js:2100
ReferenceError: $ is not defined
at Object.65 (bootstrap.js:3849)
at __webpack_require__ (bootstrap d7bcc5cf3ba589d57197:659)
at fn (bootstrap d7bcc5cf3ba589d57197:85)
at Object.boot(validation - renderer - custom - attribute.js:20)
at __webpack_require__ (bootstrap d7bcc5cf3ba589d57197:659)
at fn (bootstrap d7bcc5cf3ba589d57197:85)
at WebpackLoader.<anonymous>(aurelia - loader - webpack.js:176)
at step (aurelia - loader - webpack.js:36)
at Object.next(aurelia - loader - webpack.js:17)
at aurelia- loader - webpack.js:11
Promise rejected (async)
(anonymous) # aurelia-bootstrapper.js:146
(anonymous) # aurelia-bootstrapper.js:145
Promise resolved (async)
run # aurelia-bootstrapper.js:136
(anonymous) # aurelia-bootstrapper.js:161
45 # app.js?v = W7oxVndIkrRrS4plh4l6MCNBU4PUsPEnfFxcjfVxtDg:16384
__webpack_require__ # bootstrap d7bcc5cf3ba589d57197: 659
fn # bootstrap d7bcc5cf3ba589d57197: 85
83 # app.js?v = W7oxVndIkrRrS4plh4l6MCNBU4PUsPEnfFxcjfVxtDg:27388
__webpack_require__ # bootstrap d7bcc5cf3ba589d57197: 659
0.__webpack_exports__.e # bootstrap d7bcc5cf3ba589d57197: 708
(anonymous) # bootstrap d7bcc5cf3ba589d57197: 708
client.js:82[HMR] connected
here is my webpack vendor file.
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = ({ prod } = {}) => {
const isDevBuild = !prod;
return [{
stats: { modules: false },
resolve: {
extensions: ['.js']
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract([isDevBuild ? 'css-loader' : 'css-loader?minimize']) }
]
},
entry: {
vendor: [
'aurelia-event-aggregator',
'aurelia-fetch-client',
'aurelia-framework',
'aurelia-history-browser',
'aurelia-logging-console',
'aurelia-pal-browser',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-templating-binding',
'aurelia-templating-resources',
'aurelia-templating-router',
'aurelia-validation',
'jquery',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: 'dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
}]
};
I do not have the depth of knowledge to decifer these and figure I have left out a step in the installation of bootstrap 4.
Does anybody know how bootstrap 4 should be installed into a webpack project?
Have a look at this pull request to aurelia-skeleton-navigation repository
https://github.com/aurelia/skeleton-navigation/pull/874
It bumps up bootstrap dependency to v4
Whenever I install a new package via npm install my angular 2 import is not recognizing the package and my browser returns 404 error.
For example, I've been trying to install the following package:
https://github.com/dougludlow/ng2-bs3-modal
and this is what my browser returns:
GET http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal 404 (Not Found)fetchTextFromURL # system.src.js:1154(anonymous function) # system.src.js:1710ZoneAwarePromise # angular2-polyfills.js:589(anonymous function) # system.src.js:1709(anonymous function) # system.src.js:2734(anonymous function) # system.src.js:3308(anonymous function) # system.src.js:3575(anonymous function) # system.src.js:3960(anonymous function) # system.src.js:4419(anonymous function) # system.src.js:4671(anonymous function) # system.src.js:406ZoneDelegate.invoke # angular2-polyfills.js:332Zone.run # angular2-polyfills.js:227(anonymous function) # angular2-polyfills.js:576ZoneDelegate.invokeTask # angular2-polyfills.js:365Zone.runTask # angular2-polyfills.js:263drainMicroTaskQueue # angular2-polyfills.js:482ZoneTask.invoke # angular2-polyfills.js:434
angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-bs3-modal/ng2-bs3-modal(…)
Although I can see that node_modules\ng2-bs3-modal is existing.
What's wrong here?
You need to configure SystemJS to load right files from the library.
You could try the following configuration:
<script>
System.configure({
map: {
'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
},
packages: {
'ng2-bs3-modal': {
format: 'register',
defaultExtension: 'js'
}
}
});
(...)
</script>