Getting the following exception with 2.2.
Was working with previous version.
Did "tns info" and all is updated to 2.2
JS: Error: Uncaught (in promise): EXCEPTION: Error in pages/listview/listview.html:12:2
JS: ORIGINAL EXCEPTION: TypeError: _this.cssClasses(...).set is not a function
JS: ORIGINAL STACKTRACE:
JS: TypeError: _this.cssClasses(...).set is not a function
JS: at /data/data/org.nativescript.test1/files/app/tns_modules/nativescript-angular/view-util.js:254:78
JS: at Array.forEach (native)
JS: at ViewUtil.setClasses (/data/data/org.nativescript.test1/files/app/tns_modules/nativescript-angular/view-util.js:254:17)
JS: at ViewUtil.setPropertyInternal (/data/data/org.nativescript.test1/files/app/tns_modules/nativescript-angular/view-util.js:189:18)
JS: at ViewUtil.setProperty (/data/data/org.nativescript.test1/files/app/tns_modules/nativescript-angular/view-util.js:181:18)
JS: at NativeScriptRenderer.setElementProperty (/data/data/org.nativescript.test1/files/app/tns_modules/nativescript-angular/renderer.js:141:23)
JS: at NativeScriptRenderer.setElementAttribute (/data/data/org.nativescript.test1/files/app/tns_modules/nativescript-angular/renderer.js:145:21)
JS: at DebugAppView._View_ListviewPage0.createInternal (ListviewPage.template.js:58:17)
JS: at DebugAppView.AppView.create (/data/data/org.nativescript.test1/files/app/tns_modules/#angular/core/src/linker/view.js:87:21)
JS: at DebugAppView.create (/data/data/org.nativescript.test1/files/app/tns_modules/#angular/core/src/linker/view.js:299:44)
JS: ERROR CONTEXT:
JS: [object Object]
I tested this scenario with latest tns-core-modules and nativescript-angular and everything works as expected. As #Panayot.Cankov suggested you should upgrade to tns-core-modules#2.2.0 and nativescript-angular#0.3.0. You could do that using following commands:
tns plugin remove tns-core-modules
tns plugin add tns-core-modules#2.2.0
tns plugin remove nativescript-angular
tns plugin add nativescript-angular#0.3.0
Upgrade both the tns-core-modules#2.2.0 and nativescript-angular#0.3.0.
After some refactoring we introduced the cssClasses Set on the View classes in the tns-core-modules but by unhappy coincidence the nativescript-angular was extending by monkey-patching its own cssClasses Array property on the View class. It has been resolved, but new versions of the tns-core-modules will not be compatible with old versions of the nativescript-angular.
Make sure you upgrade your angular dependencies too, i was receiving the same error until i bumped to rc4. the below dependencies work for me now.
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/http": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/platform-server": "2.0.0-rc.4",
"#angular/router-deprecated": "2.0.0-rc.2",
"nativescript-angular": "^0.3.0",
"nativescript-drop-down": "^1.3.2",
"rxjs": "5.0.0-beta.6",
"tns-core-modules": "^2.2.1",
"zone.js": "^0.6.12"
Related
When I use Scss in rollup, and When I build project then there is a error:
[!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
components/styles/index.scss (3:0)
1: #import 'variables';
I tried some methods but not success, such as rollup-plugin-postcss or rollup-plugin-scss. And I changed sass to node-sass, but another problem appear because I used a syntax like $spacer / 2.
This is my package.json
"devDependencies": {
"#babel/core": "^7.18.6",
"#babel/preset-env": "^7.18.6",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#rollup/plugin-babel": "^5.3.1",
"#rollup/plugin-commonjs": "^22.0.1",
"#rollup/plugin-json": "^4.1.0",
"#rollup/plugin-node-resolve": "^13.3.0",
"#rollup/plugin-replace": "^4.0.0",
"#types/classnames": "^2.3.1",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"#types/react-transition-group": "^4.4.4",
"cross-env": "^7.0.3",
"node-sass": "6.0.1",
"postcss": "^8.4.14",
"react": "^17.0.2",
"react-dom": "17.0.2",
"rollup": "^2.76.0",
"rollup-plugin-css-porter": "^1.0.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-postcss-retain-sass-data": "^2.0.3",
"rollup-plugin-scss": "^3.0.0",
"rollup-plugin-styles": "^4.0.0",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.32.1",
"sass": "^1.53.0",
"typescript": "^4.7.4"
}
This is index.scss
#import 'variables';
// layout
#import 'normalize';
// mixin
#import './mixins';
// animation
#import './animation';
// alert
#import '../Alert/style';
Is there some methods to solve this problem?
I was having the same issue with importing css file, the error was [!] Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript). as rollup is suggesting to install the required plugin, I installed rollup-plugin-import-css and now it's working fine.
In your case which your file is sass you can try rollup-plugin-sass
In a fresh Laravel 9 installation, the URL processing from Laravel Mix does not work anymore.
npm outputs the following:
✖ Mix
Compiled with some errors in 2.62s
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve './fonts/Inter-Regular.woff' in '/mnt/c/projects/test-project/resources/css'
at finishWithoutResolve (/mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:304:18)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:381:15
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at eval (eval at create (/mnt/c/projects/test-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /mnt/c/projects/test-project/node_modules/enhanced-resolve/lib/Resolver.js:430:5
at processResult (/mnt/c/projects/test-project/node_modules/webpack/lib/NormalModule.js:753:19)
at /mnt/c/projects/test-project/node_modules/webpack/lib/NormalModule.js:855:5
at /mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:399:11
at /mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:251:18
at context.callback (/mnt/c/projects/test-project/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (/mnt/c/projects/test-project/node_modules/css-loader/dist/index.js:155:5)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
The font file is just one of many. My app.css looks like this:
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
#import 'primevue/resources/primevue.css';
#import 'primevue/resources/themes/lara-light-indigo/theme.css';
#import 'primeflex/primeflex.css';
#import 'primeicons/primeicons.css';
The package.json contains the following dependencies/versions:
"devDependencies": {
"#inertiajs/inertia": "^0.10.0",
"#inertiajs/inertia-vue3": "^0.5.1",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.4.0",
"#vue/compiler-sfc": "^3.0.5",
"autoprefixer": "^10.2.4",
"axios": "^0.25",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.2.13",
"postcss-import": "^14.0.1",
"tailwindcss": "^3.0.0",
"vue": "^3.0.5",
"vue-loader": "^16.1.2"
},
"dependencies": {
"primeflex": "^3.1.2",
"primeicons": "^5.0.0",
"primevue": "^3.11.1",
"vue-i18n": "^9.1.9"
}
The webpack.mix.js is default:
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
])
.webpackConfig(require('./webpack.config'));
Is there something I haven't seen?
Actually moving the css imports into resources/js/app.js solves this problem. However, this results in the imported css to be included in the public/js/app.js, not the public/css/app.css.
The problem occured because of your resources/css/app.css can't render #tailwind import
Try to clear resources/css/app.css or chnage the version of installed tailwind and retry, it will work well
Into my laravel 8 app with tailwindcss2/inertiajs I try to apply tailwindcss2 styles which have a lot of icons like :
<i data-feather="chevron-down"></i></div>
I do not see any icons, though I applyed all css files from source templates.
It does not look like package
"#fortawesome/fontawesome-free": "^5.15.4",
which I use in my laravel apps
Which packages/fonts have I to add to my app to see these icons?
In package.json I have :
"devDependencies": {
"#inertiajs/inertia": "^0.10.0",
"#inertiajs/inertia-vue3": "^0.5.1",
"#inertiajs/progress": "^0.2.6",
"#tailwindcss/forms": "^0.2.1",
"#tailwindcss/typography": "^0.3.0",
"#vue/compiler-sfc": "^3.0.5",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"postcss-import": "^12.0.1",
"tailwindcss": "^2.0.1",
"vue": "^3.0.5",
"vue-loader": "^16.1.2"
},
"dependencies": {
"moment-timezone": "^0.5.34"
}
Thanks!
Using Font-Awesome works well on standard <i> HTML with classes.
Perhaps give this a try:
<i class="chevron-down"></i>
If you are looking for the feather icon JS, you may be crossing the streams here, that may be a separate package of SVG icons (unpkg.com) that needs to be loaded as a script.
E.g.
<script src="https://unpkg.com/feather-icons"></script>
Maybe you havn't initialized feather icons by:
feather.replace()
// init feather icons
feather.replace()
<script src="https://unpkg.com/feather-icons#4.28.0/dist/feather.min.js"></script>
<!-- example icons -->
<i data-feather="eye"></i>
<i data-feather="heart"></i>
<i data-feather="feather"></i>
BTW. fontAwesome uses different icon class names. So you should't encounter any conflicts.
I have a project built with Laravel and Vue.JS (Using Bootstrap-Vue also). Everything works as it should on all browsers including Edge. But as you guessed it, not in IE11.
I have tried various configurations of using babel/polyfills.
In my webpack.mix.js I have the following code:
let mix = require('laravel-mix');
require('laravel-mix-polyfill');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.polyfill({
enabled: true,
useBuiltIns: "entry",
targets: { "firefox": "50", "ie": 11 }
});
I have the following dependencies in my package.json file:
"devDependencies": {
"#babel/polyfill": "^7.8.3",
"axios": "^0.18.1",
"bootstrap": "^4.3.1",
"cross-env": "^5.1",
"laravel-mix": "^4.0.7",
"laravel-mix-polyfill": "^1.1.1",
"lodash": "^4.17.5",
"mutationobserver-shim": "^0.3.3",
"node-sass": "^4.13.1",
"popper.js": "^1.12",
"portal-vue": "^2.1.4",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"#chenfengyuan/vue-qrcode": "^1.0.1",
"bootstrap-vue": "^2.2.0",
"current-device": "^0.9.1",
"intersection-observer": "^0.7.0",
"lottie-vuejs": "0.3.6",
"moment": "^2.24.0",
"v-mask": "^2.0.2",
"vue-autosuggest": "1.8.3",
"vue-js-toggle-button": "^1.3.3",
"vue-recaptcha": "^1.2.0",
"vue-social-sharing": "^2.4.7",
"vue2-flip-countdown": "^0.9.3",
"vuelidate": "^0.7.4"
}
And my app.js file has this at the top as recommended by Bootstrap-Vue documentation:
import '#babel/polyfill'
import 'intersection-observer' // Optional
I have also tried adding the script tag from polyfill.io in the head section of my website.
All result in a blank screen with a SCRIPT1002 Syntax Error and a SCRIPT5007 Object expected error. I'm not sure where I am going wrong, and I really need to get this to work for IE11 unfortunately. None of my Vue components are self-closing in the blade files as answered in a similar question here. And I'm not using Vue CLI.
So I decided to remove all components and plugins, to see if Vue and Bootstrap-Vue worked on their own in IE11. It worked fine and I was receiving the usual Vue dev message in the console.
I then added in each module one by one until the website no longer rendered in IE11. This only happened when lottie-vuejs was enabled, and upon inspecting the console a syntax error is shown (expecting a '}''.
So the reason my project was not working was due to this plugin.
Angular Material Library being consumed as a module in my project.
I use other couple of angular material components as well but this seems to be the issue with autocomplete options and select component options.
Material module:
import { NgModule } from '#angular/core';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatStepperModule,
} from '#angular/material';
import { MatNativeDateModule, MatRippleModule } from '#angular/material';
import { CdkTableModule } from '#angular/cdk/table';
import { A11yModule } from '#angular/cdk/a11y';
import { OverlayModule } from '#angular/cdk/overlay';
import { PlatformModule } from '#angular/cdk/platform';
import { ObserversModule } from '#angular/cdk/observers';
import { PortalModule } from '#angular/cdk/portal';
#NgModule({
exports: [
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatTableModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatNativeDateModule,
CdkTableModule,
A11yModule,
ObserversModule,
OverlayModule,
PlatformModule,
PortalModule,
]
})
export class MaterialModule { }
Package.json:
"dependencies": {
"#angular/animations": "5.0.4",
"#angular/cdk": "5.0.0-rc.2",
"#angular/common": "5.0.4",
"#angular/compiler": "5.0.4",
"#angular/core": "5.0.4",
"#angular/forms": "5.0.4",
"#angular/http": "5.0.4",
"#angular/material": "5.0.0-rc.2",
"#angular/platform-browser": "5.0.4",
"#angular/platform-browser-dynamic": "5.0.4",
"#angular/router": "5.0.4",
"#swimlane/ngx-charts": "7.0.1",
"angular2-csv": "^0.2.5",
"classlist.js": "^1.1.20150312",
"core-js": "^2.4.1",
"d3": "4.9.1",
"dom-to-image": "2.5.2",
"intl": "^1.2.5",
"enhanced-resolve": "3.3.0",
"moment": "2.13.0",
"ngx-bootstrap": "2.0.0-beta.9",
"ngx-uploader": "4.2.1",
"pdfjs-dist": "2.0.129",
"rxjs": "5.5.2",
"tinymce": "4.7.1",
"web-animations-js": "^2.3.1",
"zone.js": "^0.8.12"
},
Html File
<mat-form-field class="w-100">
<mat-select name="chart-type" (change)="onChangeChartType()" placeholder="Select Type"
[(ngModel)]="openedCellConfig.type" style="font-size: 14px;" required="true">
<mat-option *ngFor="let opt of chartOptions" [value]="opt.key">{{opt.value}}</mat-option>
</mat-select>
</mat-form-field>
When I hit enter on mat-select it opens up but the key up and down arrow keys are not working.
Can anybody help on this as what I am missing to include?
It sounds like a library conflict. I do not know if this is will resolve your issue but a big problem my development team had when using Angular Material is that the mat-select keyboard navigation suddenly did not work. Our problem we found was actually in the angular-cli.json file.
We had referenced scripts for bootstrap.js to be loaded which apparently had some type of conflict with the material libraries. There was no error logged of this anywhere, but removing it from the scripts restored the keyboard nav functionality for the material selects in our case. We also had jquery as well which we didnt need lol So I would try looking there and see if there is something there that doesn't make sense. Maybe posting your angular-cli.json file could help us identify the issue as well.
The code snippet below is what caused our issue:
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
I was facing the issue with my mat-select when using with bootstrap js.
I was using bootstrap js v3.3.2 and I updated it to v4.1.2 which resolved the issue of up/ down arrow keys with mat-select. After updating you might gonna need to fix few css for modal or even you can update the bootstrap.css as well.
Hope this may help you!
I had the same problem as above. I upgrade to bootstrap 4.1.3 and still nothing worked. What was causing this for me was this style put on the mat-select.
.mat-select {
display: contents !important;
}
Removed all instance of it in my css files and everything worked as expected.