Angular5 / Webworker - Tried to find bootstrap code, but could not - angular5

I try to follow all these tutorials about webworker, but no one works. This is one of them: https://blog.angularindepth.com/angular-with-web-workers-step-by-step-dc11d5872135
I follow step by step but after I run npm start I get a
ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (D:\PROJECTS_TIQ\w3\worky\node_modules\#ngtools\webpack\src\entry_resolver.js:121:15)
at Promise.resolve.then.then (D:\PROJECTS_TIQ\w3\worky\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:240:54)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:678:11)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
this is my main.ts .. I think the problem is here, but what..?
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { bootstrapWorkerUi } from '#angular/platform-webworker';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapWorkerUi('webworker.bunde.js')
.catch(err => console.log(err));
also.. this tutorial talks about some kind of AotPlugin that should be in the webpack.config.js .. but when I do npm eject there is no AotPlugin imported in the confg(?)

Related

Adding a plugin to vite

I am trying out Vite and using it to develop a Vue app with Prismic Cms. In reading Prismic Doc's I see have to install dependencies
npm install #prismicio/vue #prismicio/client prismic-dom
Doc's then say you have to register it:
To use #prismicio/vue, you must register it in your app entry point, which is most likely ~/src/main.js.
The access token and API options are only necessary if your repo is set to private.
// `~/src/main.js`
import Vue from 'vue'
import App from './App'
import PrismicVue from '#prismicio/vue'
import linkResolver from './link-resolver' // Update this path if necessary
const accessToken = '' // Leave empty if your repo is public
const endpoint = 'https://your-repo-name.cdn.prismic.io/api/v2' // Use your repo name
// Register plugin
Vue.use(PrismicVue, {
endpoint,
apiOptions: { accessToken },
linkResolver
})
In reading Vite doc's I see you add plugins via the vite.config.js file instead of using Vue.use() in main.js. So I created one as follows:
import { defineConfig } from "vite";
import Vue from "#vitejs/plugin-vue";
import PrismicVue from "#prismicio/vue";
import linkResolver from "./link-resolver"; // Update this path if necessary
const accessToken = ""; // Leave empty if your repo is public
const endpoint = "https://*******-****.cdn.prismic.io/api/v2"; // Use your repo name
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
Vue(),
PrismicVue({
endpoint,
apiOptions: { accessToken },
linkResolver,
}),
],
});
However I get error as follows:
failed to load config from C:\Users\akill\Github\shs\vite.config.js
error when starting dev server:
TypeError: (0 , import_vue.default) is not a function at Object.<anonymous> (C:\Users\akill\Github\shs\vite.config.js:53:28)
at Module._compile (internal/modules/cjs/loader.js:1137:30)
at Object.require.extensions.<computed> [as .js]
(C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:76005:20)
at Module.load (internal/modules/cjs/loader.js:985:32)
at Function.Module._load (internal/modules/cjs/loader.js:878:14)
at Module.require (internal/modules/cjs/loader.js:1025:19)
at require (internal/modules/cjs/helpers.js:72:18)
at loadConfigFromBundledFile (C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:76013:17)
at loadConfigFromFile (C:\Users\akill\Github\shs\node_modules\vite\dist\node\chunks\dep-98dbe93b.js:75932:32)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shs#0.0.0 dev: `vite --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shs#0.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
I also notice VS Code is giving me a hint # import of PrismicVue line of
Could not find a declaration file for module '#prismicio/vue'. 'c:/Users/akill/Github/shs/node_modules/#prismicio/vue/dist/prismic-vue.common.js' implicitly has an 'any' type.
I have isolated it to the line "PrismicVue({endpoint,apiOptions: { accessToken }, Etc....})," causing the error. Can someone explain what is the proper way to import this plugin in Vite? Thanks in advance.
vite.config.js's plugins property is intended for Vite plugins, which are for Vite itself (e.g., adding a custom transform for specific file types). That config is not for Vue plugins, which can only be installed in a Vue 3 app with app.use().
To setup Prismic with Vue 3:
Install the following dependencies. The alpha versions of #prismicio/vue and #prismicio/client (3.x and 6.x, respectively) are needed for Vue 3 support.
npm i -S #prismicio/vue#alpha #prismicio/client#alpha prismic-dom
Create a link resolver that returns a route path based on a given Prismic document type. The resolved route path should already be registered in router.js:
const resolver = doc => {
if (doc.isBroken) {
return '/not-found'
}
if (doc.type === 'blog_home') {
return '/blog'
} else if (doc.type === 'post') {
return '/blog/' + doc.uid
}
return '/not-found'
}
export default resolver
In src/main.js, use createPrismic() from #prismic/vue to create the Vue plugin, and pass that along with the link resolver to app.use():
import { createApp } from 'vue'
import { createPrismic } from '#prismicio/vue'
import linkResolver from './prismic/link-resolver'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.use(createPrismic({
endpoint: 'https://blog-demo2.prismic.io/api/v2',
linkResolver,
}))
.mount('#app')
demo
You probably have a mess in your setup / package.json as there is nothing special to do - I bet that you are missing vite-plugin-vue2 and vue-template-compiler.
To get it working, try to create a new project with the following :
vite.config.js:
const { createVuePlugin } = require('vite-plugin-vue2');
module.exports = {
plugins: [
createVuePlugin()
]
};
main.js:
import Vue from 'vue';
import App from './App.vue';
import PrismicVue from "#prismicio/vue";
const accessToken = ""; // Leave empty if your repo is public
const endpoint = "https://*******-****.cdn.prismic.io/api/v2"; // Use your repo name
Vue.use(PrismicVue, {
endpoint: endpoint
});
new Vue({
render: (h) => h(App),
}).$mount('#app');
App.vue:
<template>
<div id="app">
<img
alt="Vue logo"
src="./assets/logo.png"
/>
</div>
</template>
<style>
#app {
text-align: center;
}
</style>
then package.json:
{
"name": "vue2-prismic",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"#prismicio/client": "^5.1.0",
"#prismicio/vue": "^2.0.11",
"prismic-dom": "^2.2.6",
"vite-plugin-vue2": "^1.4.0",
"vue": "^2.6.12",
"vue-template-compiler": "^2.6.14"
},
"devDependencies": {
"vite": "^2.0.5"
}
}

Web3js fails to import in Vue3 composition api project

I've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.
So then I added this line to main.js:
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3' <-- This line
createApp(App).mount('#app')
And I get the following error:
I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:
I'm using Vue 3
I'm using Vue 3 Composition API
I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
web3js is in Typescript and my Vue3 project is not configured for Typescript
But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.
How do I go about resolving this issue?
Option 1: Polyfill Node globals/modules
Polyfilling the Node globals and modules enables the web3 import to run in the browser:
Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D #esbuild-plugins/node-globals-polyfill
npm i -D #esbuild-plugins/node-modules-polyfill
Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.
Configure define to replace global with globalThis (the browser equivalent).
import { defineConfig } from 'vite'
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill'
export default defineConfig({
⋮
optimizeDeps: {
esbuildOptions: {
2️⃣
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
3️⃣
define: {
global: 'globalThis',
},
},
},
})
demo 1
Note: The polyfills add considerable size to the build output.
Option 2: Use pre-bundled script
web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})
demo 2
Note: This option produces 469.4 KiB smaller output than Option 1.
You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config
export default defineConfig({
// ...
define: {
'process.env': process.env
}
})
I found the best solution.
The problem is because you lose window.process variable, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app:
window.process = {
...window.process,
};

error PropType not found in 'vue' in open source project

i am trying to work on an opensource software for NLP named doccano,i tried running only the frontend part where i ran the command npm install to get all needed dependencies then when i run npm run dev it starts compiling and then fails with this error
/home/nissow/Documents/doccano/doccano/frontend/components/project/FormDelete.vue
33:14 error PropType not found in 'vue' import/named
and when i checked the FormDelete.vue i did not notice any errors and no errors were detected on vscode either
<script lang="ts">
import Vue,{ PropType } from 'vue'
import BaseCard from '#/components/utils/BaseCard.vue'
import { ProjectDTO } from '~/services/application/project/projectData'
export default Vue.extend({
components: {
BaseCard
},
props: {
selected: {
type: Array as PropType<ProjectDTO[]>,
default: () => []
}
},
computed: {
nonDeletableProjects(): ProjectDTO[] {
return this.selected.filter(item => !item.current_users_role.is_project_admin)
},
hasNonDeletableProjects(): boolean {
return this.nonDeletableProjects.length > 0
}
}
})
</script>
here's package.json content :
and here's the second part
import type { PropType } from 'vue'
see detail https://github.com/nuxt-community/composition-api/issues/189
It was also a problem elsewhere.
Sounds like a known bug in eslint and typescript. It doesn't seem to cause an error depending on the version.
https://github.com/nuxt-community/composition-api/issues/189
i just made it work, by installing yarn and then running, yarn dev as it was suggested in the README.MD the first time i was doing it with npm run dev.

import vue-awesome icons error while jest testing with nuxt on node 13.9.0

I have followed the instructions on https://github.com/Justineo/vue-awesome
in my jest.config.js I add the following
transformIgnorePatterns: [
'/node_modules(?![\\\\/]vue-awesome[\\\\/])/'
]
my nuxt.config.js
build: {
transpile: [/^vue-awesome/] // enable font-awesome integration.
},
The icons work just fine when I'm running the dev box, but I get the following when I run yarn test:
[path/to/project]/node_modules/vue-awesome/icons/building.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Cannot use import statement outside a module
explicitly, the issue seems to be something to do with how babel reads (or overlooks) the imports above the Icon component import. So, for example, given the building.js in the error log above, here is how the import looks in the vuejs file:
<script>
import 'vue-awesome/icons/building'
import Icon from 'vue-awesome/components/Icon'
export default {
componentes: {
'v-icon': Icon
}
...
}
</script>
It looks like I have to explicitly mock the component and its imports at the top of the file (below the imports)
the following works for my test.
import { shallowMount, createLocalVue } from '#vue/test-utils'
import Vuex from 'vuex'
import { AxiosSpy, MockNuxt } from 'jest-nuxt-helper'
import index from '#/pages/courses/index'
// MOCKS:
jest.mock('vue-awesome/icons/building', () => '')
jest.mock('vue-awesome/components/Icon', () => '<div></div>')
...

How to use installed modules in aurelia

I am using the skeleton-typescript sample and work through the documentation. I am trying to set up a value converter with numeral as it is shown in the docs.
import numeral from 'numeral';
export class CurrencyFormatValueConverter {
toView(value) {
return numeral(value).format('($0,0.00)');
}
}
I have installed numeral via jspm install numeral. It is added package.json within the jspm dependencies and I manually added it to bundles.js.
After saving the typescript file I get the error: Cannot find module 'numeral'.. What am I missing?
You need d.ts for numeral.js. and since there is no d.ts on Typings this can resolve problem:
$ jspm install npm:#types/numeral.
It works in my skeleton with value converters. Import can be done like import * as numeral from 'numeral';
You should add it in your configuration like:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('numeral');
aurelia.start().then(() => aurelia.setRoot());
}
You will find the exact package names in your package.json:
jspm": {
"dependencies": {
...
"numeral": "xxxx"
...
}
}