I am a rookie and I was trying to learn about how to use Stimulus online and then suddenly
my console does not show output(in inspect element) when I use Stimulus in rails app
app/javascript/controllers/dropdown_controller.js
import { Controller } from "#hotwired/stimulus"
// Connects to data-controller="dropdown"
export default class extends Controller {
connect() {
console.log("Hello")
}
}
app/javascript/aplication.js
// Entry point for the build script in your package.json
import "#hotwired/turbo-rails"
import "./controllers"
app/views/orders/_form.html.erb
<div data-controller="dropdown">
<h3>Hello</h3>
</div>
(I didn't display the whole form because this is the main context in the form which is related to Stimulus) So what is the problem here? Why is it not showing output in the console(inspect element in chrome)
According to other Stackoverflow posts, we had to run rails assets:clobber in order to fix it but mine still does not work :(
Any Chance I am doing something dumb?
I have written a validation class and want to include it in my VueJS 3 project. Unfortunately I get the following error: SyntaxError: ambiguous indirect export: default
This is my code:
// ..classes/formValidationClass.js
export class FormValidator {
...
}
// some vue file with a form
import FormValidation from "..classes/formValidationClass"
export default {...}
Question:
What does this error mean and what do I have to do to correct the error?
Use brackets {} around your import Name
// ..classes/formValidatorClass.js // Comment: => suggestion change your file name to similar your class name
export class FormValidator {
...
}
// some vue file with a form
// import FormValidation from "..classes/formValidationClass"
import { FormValidator as FormValidation} from "../classes/formValidatorClass"; // Comment: => use brackets around your import name. if you want use FormValidation you can use also a alias (`originalName as newName`)
export default {...}
I found that none of the tsconfig, package.json fixes would never work for me. Hopefully the following helps someone in the future.
I was consistently getting this error when working with Vite projects and not Webpack projects. I would not be able to import anything, named or otherwise.
On one Svelte code base I ran the Svelte CLI sync command and it mentioned a type import was breaking the importsNotUsedAsValues or preserveValueImports and that I should explicitly mark the import as a type.
The import statement in question:
import { TUser } from '../models/Users/Users';
TUser exported as:
export type TUser = { ... }
Errors
Would cause the following errors:
Error: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'. (ts)
Error: 'TUser' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled. (ts)
Solution
Doing the following fixed the issue for me.
import type { TUser } from '../models/Users/Users';
My story: WebStorm generated .js files right next to .ts files (because I once enabled the Recompile on changes option), so my app tried to import from .js files instead of .ts one. That was the reason for the import problems.
This is the compiled code on the local dev server:
For the sake of helping anyone bumping into this error and arriving at this page, the word default in export default function myFunction() can cause this error. Or in other words: remove the word default may help.
In my case I had the curly braces where I shouldn't have. I had a JSON file and import { users } from ... where instead I should have no curly braces like so:
import users from './users.json';
console.log("users", users);
I'm building a sort of article editor, for this I'm using the Angular Integration for CKEditor5; following the documentation I can correctly use the ClassicEditor build with the ckeditor component.
These are my files:
import { Component, OnInit } from '#angular/core';
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
#Component({
selector: 'app-edit-article',
templateUrl: './edit-article.component.html',
styleUrls: ['./edit-article.component.scss']
})
export class EditArticleComponent implements OnInit {
constructor() { }
public Editor = ClassicEditor;
articleForm: FormGroup;
ngOnInit() {
}
}
Template
<div class="row">
<div class="col-12">
<label for="">Content</label>
<ckeditor [editor]="Editor" id="editor" class="blue-scroll--light" formControlName="content"></ckeditor>
</div>
</div>
Unfortunately, the ClassicEditor build referenced in that guide does not include many plugins, so I'm trying to add some of them, like text alignment, font color, font size, etc.
It seems that I need to create a custom build which includes all of the desired features and then reference that build instead of the ClassicEditor in my typescript file if I understand correctly, so I went ahead and used their online builder to create a build with all the plugins already included, but after that I'm not sure how to proceed and the documentation isn't really clear.
As far as I understand, I need to add the build folder inside my Angular App and then import the ckeditor.js file in my component, like this:
import * as Editor from '../../../../../core/libs/ckeditor5/build/ckeditor';
and change the declaration of the Editor to use that import instead of the ClassicEditor, so:
public Editor = Editor;
However as soon as I make that change I'm no longer able to even run the app, since I get the following error:
ERROR Error: Uncaught (in promise): CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
at Object.<anonymous> (ckeditor.js:5)
at Object.push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
at i (ckeditor.js:5)
at Module.<anonymous> (ckeditor.js:5)
at i (ckeditor.js:5)
at push../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
at ckeditor.js:5
at ckeditor.js:5
at Object../src/app/core/libs/ckeditor5/build/ckeditor.js (ckeditor.js:5)
at __webpack_require__ (bootstrap:84)
at resolvePromise (zone.js:852)
at resolvePromise (zone.js:809)
at zone.js:913
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:30885)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
Again, the docs say it is due to multiple imports being made but I don't understand how since I'm only using the ckeditor.js file that comes in the build I just generated, which works fine if referenced in a plain HTML file.
Can someone provide an example on how to successfully make a Custom Build work in a Angular App?
After a while, I found that the problem seems to be that I had another build imported in a different module of my application.
So I was only using the custom build inside my EditArticle component by importing and using that file, but I also had other components on other modules that were importing and using the ClassicEditor build that I installed through NPM, which looks like it was causing the error.
The fix was not to remove the ClassicEditor package nor removing the import ClassicEditor statement, but just making sure that that specific import was not being used anywhere else in the app, since I guess during compilation Angular removes all unused imports.
Once I did this, the application ran fine with my custom build.
Just to clear it up, I can have these two imports on the same file or multiple components
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
But I should only be using one of them on the entire app, so if I have an Editor on Component1 and on Component2, I can have both builds imported, but on the declaration of the Editor property I should only use one, and it should be the same one on every component the app uses, so:
This works
Component1
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
Component2
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
This WON'T work
Component1
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = Editor;
Component2
import * as ClassicEditor from '#ckeditor/ckeditor5-build-classic';
import * as Editor from 'src/app/core/libs/ckeditor5/build/ckeditor';
public Editor = ClassicEditor;
You can of course just remove the unused build from the imports altogether and that'll work too. Just again, make sure you use the same build on all the application
console.log(this.ckEditorClassic.builtinPlugins.map( plugin => plugin.pluginName ));
}
This will give you the list of plugins in the custom build.
My sample has :
["Alignment", "AutoImage", "Autoformat", "Autosave", "BlockQuote", "Bold", "CodeBlock", "Essentials", "ExportPdf", "ExportWord", "FontBackgroundColor", "FontColor", "FontFamily", "FontSize", "Heading", "Highlight", "HorizontalLine", "Image", "ImageCaption", "ImageInsert", "ImageResize", "ImageStyle", "ImageToolbar", "ImageUpload", "Indent", "IndentBlock", "Italic", "Link", "List", "Markdown", "MathType", "MediaEmbed", "MediaEmbedToolbar", "PageBreak", "Paragraph", "PasteFromOffice", "SpecialCharacters", undefined, undefined, undefined, undefined, undefined, "Strikethrough", "Subscript", "Superscript", "Table", "TextTransformation", "WordCount"]
take the displayed list within [] and replace xxxx with it.
<ckeditor [config]="{toolbar:[xxxx] }"
I have an Angular 4.1.1 app that is successfully pulling in leaflet.js to provide maps and map layers etc. I am trying to add a leaflet plugin called browserPrint
I import Leaflet into a Component like this:
import * as L from "leaflet";
import * as browserPrint from "../../../../assets/scripts/leaflet.browser.print.min";
The import statement for Leaflet works great and I can create and display a map.
The error occurs when I try and add the second line for browserPrint.
The angular-cli build throws an error:
ERROR in
/src/app/services/driverLists/driver-lists-map/driverLists.map.component.ts
(8,31): File '/src/assets/scripts/leaflet.browser.print.min.js' is not
a module.
What I have tried:
I added declare var browserPrint: any; to the typings.d.ts
I tried switching the import to:
import "../../../../assets/scripts/leaflet.browser.print.min";
but that just threw tons of errors and broke the maps all together
I tried switching the import to:
import * as BrowserPrint from "../../../../assets/scripts/leaflet.browser.print";
but the error changes to Cannot find module leaflet.browser.print
I have also tried changing the file paths to use the files from the leaflet.browser.print node modules folder. But the same errors are generated.
QUESTION
Can someone help me figure out how to add the leaflet browser print plugin to a leaflet map inside an Angular4+ app?
Thanks in advance.
I saw in the documentation for ngx-leaflet that we should create a ./src/typings.d.ts file and add the below code.
import * as L from 'leaflet';
declare module 'leaflet' {
namespace control {
function browserPrint(options?: any): Control.BrowserPrint;
}
namespace Control {
interface BrowserPrint {
addTo(map: L.Map): any;
}
}
}
It worked for me this way.
I think you want to include the file in the "scripts" array in your angular-cli.json. That should wrap it up in your webpack output, and you won't need to actually import it (as you've said above, that particular file doesn't export anything, so you can't import it anyway).
Documentation here:
https://github.com/angular/angular-cli/wiki/stories-global-scripts
I am trying to create a component called my-checklist, but I'm having issues running it.
I've declared the new module in app.ts as well as imported it, but it doesn't seem to be able to find my html file.
The error I get is:
zone.js:661 Unhandled Promise rejection: Failed to load checklist.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load checklist.component.html undefined
https://plnkr.co/edit/WZSc1X7whm658LEHidC4?p=preview
The problem is in your app.ts.
You try to open your component but you link to the app your module can't find your html cause you link it to your app.ts not to your component.ts.
In your app.ts you say
bootstrap: [ App ]
It should be
bootstrap: [ MyCheckList ]
Try and follow https://angular.io/tutorial if not get it there a demos you can checkout.
Had some time made a plunker: https://plnkr.co/edit/1v0cd9y8BZ0KTQUDlhik?p=preview also note that plunker need src/*.html for some reason. normal you use ./ for that.
When trying to load checklist.component.html the URL is relative to your index.html and that is why it is failing. Just change it to
#Component({
selector: 'my-checklist',
templateUrl: 'src/checklist.component.html'
})
This will make it work. But, I'll recommend that you find out a way to convert your templates in a variable and avoid the relative path issue. I don't know typescript, but I know Babel do it, maybe this would work.
import template from './checklist.component.html';
#Component({
template: template,
selector: 'my-checklist'
})
For example, if using Babel, after transpiled the import will look like this
var template = '<p>Test</p>';
Awesome, eh?
Check this other questions, probably will help
Is it possible to import an HTML file as a string with TypeScript?
How to import external HTML files into a TypeScript class