I am creating an app with react bricks,
Everything was running smoothly until I wanted to import icons and then I ran an authentication, and now one of the main frontend packages is not found in my app.
Module not found: Can't resolve 'react-bricks/frontend'
1 | import { useState } from 'react'
> 2 | import { ReactBricks } from 'react-bricks/frontend'
3 | import type { AppProps } from 'next/app'
4 | import config from '../react-bricks/config'
I have uninstalled icon. I've tried running the following commands:
npm install --save react-bricks
npm install --save react-bricks-ui
I've also deleted and reinstalled node_modules.
This is my package.json:
{
"dependencies":{
"next":"^12.3.1",
"prism-theme-night-owl":"^1.4.0",
"prismjs":"^1.29.0",
"react":"^18.2.0",
"react-bricks":"^2.3.16",
"react-bricks-ui":"^0.1.17",
"react-dom":"^18.2.0",
"react-slick":"^0.29.0"
},
"devDependencies":{
"#types/node":"^18.8.2",
"#types/react":"^18.0.21",
"autoprefixer":"^10.4.12",
"concurrently":"^7.4.0",
"postcss":"^8.4.17",
"tailwindcss":"^3.1.8",
"typescript":"^4.8.4"
}
}
Related
I am trying to get #next/mdx running with the new app directory. I followed the setup in the Readme of the package but i get the following error message when I try to render an mdx page. I can not find any information on this package what so ever.
Module not found: Can't resolve 'next-mdx-import-source-file'
1 | import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
> 2 | import { useMDXComponents as _provideComponents } from "next-mdx-import-source-file";
3 | function _createMdxContent(props) {
4 | const _components = Object.assign({
5 | h1: "h1",
This error occurs if the file mdx-components.js is not present in the project root directory.
This dependency is not an actual package but rather some next magic which actually imports the mdx-components.js file. In my case I missed out on on the plural.
I want to use pdfMake in deno and not host the pdfMake files and vfs_fonts on my server, by using a CDN line CDNJS or esm.sh.
I have the following code in the to of my app.js file:
import pdfMake from "https://esm.sh/pdfmake"
import * as pdfFonts from "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.min.js"
but I get the following errors:
[!] [#0] starting `deno run -A app.js`
Download https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js
Download https://deno.land/x/md5/mod.ts
error: Uncaught TypeError: Cannot read properties of undefined (reading 'pdfMake')
this.pdfMake = this.pdfMake || {}; this.pdfMake.vfs = {
^
at https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.4/vfs_fonts.js:1:21
[E] [daem] app crashed - waiting for file changes before starting ...
I am not sure how to import or load the vfs_fonts from the CDN. Please note that my aim is to use a CDN for getting pdfMake and it's fonts.
I've changed the app.js file so that I only load the pdfmake from the CDN. I then load the fonts seperatly from the CDN into the pdfMake object:
import pdfMake from "https://esm.sh/pdfmake"
pdfMake.fonts = {
Roboto: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
},
Merriweather: {
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Regular.ttf',
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Medium.ttf',
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-Italic.ttf',
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Merriweather/Merriweather-MediumItalic.ttf'
},
}
Current version of Vaadin is 7.3.6
Here some my code:
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.ui.NativeSelect;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
private NativeSelect currencySelector;
private void initCurrencySelector(String providerId) {
currencySelector = new NativeSelect();
List<String> selectCurrencyList;
currencySelector.removeAllItems();
}
And this code success compile.
But after I try to upgrade to Vaadin 8.12.0 then this code not compile.
error in this lines:
import com.vaadin.data.Property;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.event.FieldEvents.TextChangeEvent;
import com.vaadin.event.FieldEvents.TextChangeListener;
and in this line:
currencySelector.removeAllItems();
the new imports should be
import com.vaadin.data.HasValue.ValueChangeEvent;
import com.vaadin.event.FieldsEvent
TextChangeEvent and TextChangeListener probably were replaced by HasValue.ValueChangeEvent and HasValue.ValueChangeListener
currencySelector.removeAllItems(); should be
currencySelector.setDataProvider(new ListDataProvider(new ArrayList()));
a list of incompatible changes can be found here https://vaadin.com/download/prerelease/8.0/8.0.0/8.0.0.beta1/release-notes.html#incompatible
In my Angular 5 project I want to implement google autocomplete geolocation.
I got some reference of npm modules:-
https://www.npmjs.com/package/ng4-geoautocomplete
https://www.npmjs.com/package/ngx-google-places-autocomplete
According to their guidance when I am going to install that module I am facing some warning:
Installation command:-
npm install --save ng4-geoautocomplete
Warnings:-
***npm WARN ngx-slideshow#0.1.0 requires a peer of #angular/core#^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-slideshow#0.1.0 requires a peer of #angular/common#^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ng4-geoautocomplete#0.1.0 requires a peer of #angular/core#>=2.0.0 <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ ng4-geoautocomplete#0.1.0
added 68 packages in 96.971s***
My project version:-
Angular CLI: 1.7.4
Node: 8.9.3
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
#angular/cli: 1.7.4
#angular-devkit/build-optimizer: 0.3.2
#angular-devkit/core: 0.3.2
#angular-devkit/schematics: 0.3.2
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.10.2
#schematics/angular: 0.3.2
#schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0
Why I am facing this problem and what will be the solution?
Is there any other way to implement google autocomplete geolocation?
Yes.
npm install #agm/core --save-dev
npm install #types/googlemaps --save-dev
app.module.ts
import {AgmCoreModule} from '#agm/core'
.
.
.
imports: [
.
.
.
AgmCoreModule.forRoot({
apiKey: 'your api key',
libraries: ['places']
}),
.
.
.
]
in your html
<div>
<input type="text" placeholder="Search for location" autocorrect="off" name="" spellcheck="off" #autoSearch/>
</div>
component.ts file
import {Component, ViewChild, ElementRef, NgZone, OnInit} from '#angular/core'
import { MapsAPILoader } from '#agm/core';
import {} from #types/googlepmaps;
.
.
.
export class YourComponent implements OnInit {
#ViewChild('autoSearch') public searchElement: ElementRef;
consturctor (private mapsAPILoader: MapsAPILoader , private ngZone : NgZone )
{}
ngOnInit() {
this.mapsAPILoader.load().then(
() => {
let autocomplete = new
google.maps.places.Autocomplete(this.searchElement.nativeElement,
{types:["address"]});
autocomplete.addListener("place_changed", ()=> {
this.ngZone.run(()=>{
let place: google.maps.places.PlaceResult =
autocomplete.getPlace();
if(place.geometry === undefined || place.geometry === null) {
return;
}
})
})
}
);
}
}
I rather use the AGM library rather than just the autocomplete that you are using because the autocomplete only gives you autcomplete fucntionalty whether the AGM can be use to render the google maps with the markers.
Now,
to install dependencies yourself to fix your warnings you can reference to this stackoverflow question: How to install npm peer dependencies automatically?
I'm getting this error in my vuejs webApp, hope some one tell me how to solve it:
./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?
type=script&index=0!./src/components/Envio.vue
Module not found: Error: Can't resolve './firebase' in
'C:\Users\#####\Desktop\#####\src\components'
# ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?
type=script&index=0!./src/components/Envio.vue 17:0-32
# ./src/components/Envio.vue
# ./src/routes.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-
server ./src/main.js
this is the script in my vue file:
<script>
import { db } from './firebase'
export default {
data: {
mensaje: null,
... }
}
</script>
I assume you have installed firebase via a node package manager using npm command. If so, the following import statement should fix the problem.
import { db } from 'firebase'