So, I am trying to follow a number of the file pond example and each of them include some form of CSS import (I get it, there is a lot that comes with beauty). However, no matter what I try, Filepond or Pintura (formerly Doka), I get this error in some form:
Compiled with problems:
ERROR in ./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
- options should be an object:
object { injectType?, attributes?, insert?, base?, esModule?, modules? }
at validate (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:105:11)
at Object.loader (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/dist/index.js:25:29)
ERROR in ./node_modules/filepond/dist/filepond.min.css
Module build failed (from ./node_modules/style-loader/dist/cjs.js):
ValidationError: Invalid options object. Style Loader has been initialized using an options object that does not match the API schema.
- options should be an object:
object { injectType?, attributes?, insert?, base?, esModule?, modules? }
at validate (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/node_modules/schema-utils/dist/validate.js:105:11)
at Object.loader (/Users/ryanolson/github/realkinkmen/node_modules/style-loader/dist/index.js:25:29)
I have NO IDEA how to fix this as I am not experienced enough with what would be going on. I am guessing it has to do with Webpack and build but no idea what I need to do to fix it. Any help?
I also want to mention this is a Laravel/VueJS/Tailwind stack
The solution is to add the CSS files to the app.css file under /resources/css/app.css
#import 'filepond/dist/filepond.min.css';
#import "filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css";
Related
I have an npm library which imports Angular FullCalendar v5 and everything works fine there. When i try to import my project library to another project and try access the full calendar frontend I got a warning and a message error in my browser console:
- Warning: main.js:7358 Unknown option 'default'
- Error: core.mjs:6476 ERROR TypeError: Language ID should be string or object.
at new DateTimeFormat (<anonymous>)
at buildNativeFormattingFunc (main.js:1218)
at NativeFormatter.buildFormattingFunc (main.js:1211)
at NativeFormatter.buildFormattingFunc (main.js:1009)
at NativeFormatter.format (main.js:1154)
at NativeFormatter.formatRange (main.js:1169)
at DateEnv.formatRange (main.js:3984)
at CalendarDataManager.buildTitle (main.js:6909)
at CalendarDataManager.buildTitle (main.js:1009)
at CalendarDataManager.updateData (main.js:7113)
I can't figure it out why but i know it's in this line of code at main.js (#fullcalendar/common/main.js)
Line 1218 -> var normalFormat = new Intl.DateTimeFormat(context.locale.codes, standardDateProps); The error is that the variable context.locale.codes is undefined.
Can anyone help?
I've just had the same error. Not that I was importing a project library of my own but I was importing the Fullcalendar library (from node_modules). I had enabled localization using the locale property of the calendar options but I always got this error Language ID should be string or object.
Two things was wrong:
I was importing the locale code incorrectly which resulted in this error. The current version of Fullcalendar (6.0.0) has all its locale code under #fullcalendar/core/locales.
I was using dynamic import like this: import("#fullcalendar/core/locales/da") and it worked fine but I had to access the default property of the exported object. Using async/await syntax it becomes:
const localeModule = await import("#fullcalendar/core/locales/da");
const calendar = new Calendar(someElement, {
(...),
locale: localeModule.default
});
Not directly answering your question but it sounds like you're using locale, too, and your other project is importing your project library in a way that makes the default property of the module containing the locale code undefined.
I am creating a Qt6 QML module with qt_add_qml_module.
qt_add_qml_module(SQUtils_Logger_Qml
URI SQUtilsLogger.Qml
VERSION 1.0
SOURCES
LoggerQml.cpp
QML_FILES
Log.js
Logm.mjs
LoggerQml.qml
)
But the generated qmldir contains only the information about the qml file: the js and mjs files are missing.
module SQUtils.Logger.Qml
linktarget SQUtils_Logger_Qmlplugin
optional plugin SQUtils_Logger_Qmlplugin
classname SQUtils_Logger_QmlPlugin
typeinfo SQUtils_Logger_Qml.qmltypes
prefer :/SQUtils/Logger/Qml/
LoggerQml 1.0 LoggerQml.qml
It is a problem because when I run ninja all_qmllint, the compiler/linter complains that Log is not defined:
// View.qml
import SQUtils_Logger_Qml
//import "qrc:/SQUtils/Logger/Qml/Log.js" as Log
ApplicationWindow {
Component.onCompleted: {
Log.debug("QML main application complete")
}
}
Warning: View.qml:120:13: Unqualified access
Log.debug("QML main application complete)
If I append Log 1.0 Log.js to the qmldir file, then the linting works.
What I am doing wrong? Is this a bug? The qt documentation for qt_add_qml_module quotes:
QML_FILES lists the .qml, .js and .mjs files for the module. [...]
The files will also be used to populate type information in the generated qmldir file.
Thank you for your help!
Note: I can manage to run my code by uncommenting import "qrc:/SQUtils/Logger/Qml/Log.js" as Log, but the lint still does not work.
It was indeed a Qt bug, corrected two days ago. It will be corrected in versions greater than 6.2.2:
https://bugreports.qt.io/browse/QTBUG-100326
I have been trying to use publicRuntimeConfig / privateRuntimeConfig
On nuxt 2.4.1, I have defined my runtime config as follows on nuxt.config.js
publicRuntimeConfig: {
DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL,
},
privateRuntimeConfig: {
AUTH_APP_CLIENT_SECRET: process.env.VUE_APP_AUTH_APP_CLIENT_SECRET,
},
and calling it as follows on my login.vue
asyncData( ctx ) {
console.log(ctx.$config.DATA_API_HOST_URL)
//some activity
}
The keys are showing up on $config inside asyncData. I debugged on chrome dev tools. But value is not read from process.env.VUE_APP_DATA_API_HOST_URL. The value is showing up as undefined. However, process.env.VUE_APP_DATA_API_HOST_URL is showing the value OK. The whole point is to move away from process.env.
this.$config.DATA_API_HOST_URL also does not access the values.
'${DATA_API_HOST_URL}' is shown in examples but I believe it is only for explicit param declarations at asyncData like asyncData( { $config : {DATA_API_HOST_URL}).
When I pass values as it is using DATA_API_HOST_URL: process.env.VUE_APP_DATA_API_HOST_URL || 'https://test.api.com', it seems to copy the value fine using ctx.$config.DATA_API_HOST_URL!
Looking to me like copying process.env to *RuntimeConfig has a problem!
What is the recommended way of importing and using runtime configurations?
As per documentation in the Nuxt blog post you marked, the feature your are trying to use is released in 2.13 (you´re using 2.4 if i not misunderstood). That could be the reason behind the behaviour you're seeing.
I'd recommend update your project dependencies or trying another approach.
I think you should use Docker to set dynamic runtime config like link below:
https://dev.to/frontendfoxes/dockerise-your-nuxt-ssr-app-like-a-boss-a-true-vue-vixens-story-4mm6
Is it possible to use "dojo/text!" in an Intern functional test?
I am able to setup my test page as a JSON string, but ideally I'd like to externalise the string in a file for ease of editing. I'm just getting started with Intern at the moment so I'm just experimenting with what's possible, but here is the start of my test code).
This works with the commented "testData" variable used, but is currently failing when I try to provide the same String by the dojo/text! statement.
Code:
define([
'intern!object',
'intern/chai!assert',
'dojo/text!./firstTestPageConfig.json',
'require'
], function (registerSuite, assert, PageConfig, require) {
registerSuite({
name: 'firstTest',
'greeting form': function () {
var testData = PageConfig;
// var testData = '{"widgets":[{"name":"alfresco/menus/AlfMenuBar","config":{"widgets":[{"name":"alfresco/menus/AlfMenuBarPopup","config":{"id":"DD1","label":"Drop-Down","iconClass":"alf-configure-icon","widgets":[{"name":"alfresco/menus/AlfMenuGroup","config":{"label":"Group 1","widgets":[{"name":"alfresco/menus/AlfMenuItem","config":{"label":"Item 1","iconClass":"alf-user-icon"}},{"name":"alfresco/menus/AlfMenuItem","config":{"label":"Item 2","iconClass":"alf-password-icon"}}]}},{"name":"alfresco/menus/AlfMenuGroup","config":{"label":"Group 2","widgets":[{"name":"alfresco/menus/AlfMenuItem","config":{"label":"Item 3","iconClass":"alf-help-icon"}}]}}]}}]}}]}';
var testPage = 'http://localhost:8081/share/page/tp/ws/unittest?testdata=';
return this.remote
.get(testPage + testData)
.waitForElementByCssSelector('.alfresco-core-Page.allWidgetsProcessed', 5000)
.elementById('DD1')
.clickElement()
.end()
}
});
});
The error I'm getting is this:
/home/dave/ScratchPad/ShareInternTests/node_modules/intern/node_modules/dojo/dojo.js:742
throw new Error('Failed to load module ' + module.mid + ' from ' + url +
^
Error: Failed to load module dojo/text from /home/dave/ScratchPad/ShareInternTests/dojo/text.js (parent: dojo/text!17!*)
at /home/dave/ScratchPad/ShareInternTests/node_modules/intern/node_modules/dojo/dojo.js:742:12
at fs.js:207:20
at Object.oncomplete (fs.js:107:15)
I've tried playing around with the loader/package/map configuration but without any success. It's not clear (to me at least) from the error message whether or not it can't find the file I'm passing to dojo/text (but I've tried full as well as relative paths) or the Dojo module itself ?
I'd just like to confirm that what I'm attempting is possible, before I spend any more time with this... but obviously any solution or example would be greatly appreciated!!
Many thanks,
Dave
To your specific error: You need to install Dojo for your own project if you want to use it. You are trying to load a module that does not exist. You may also try using the copy that comes with Intern, by loading modules from intern/dojo, but this isn’t recommended if you don’t understand the potential caveats of loading this internal library.
To using dojo/text in a functional test, generally: This is not currently possible unless you use the Geezer branch or explicitly use the Dojo 1 loader, because that module relies on functionality that is only exposed by the Dojo 1 loader when running in Node.js. A different text loader module that is fully generic would work, or you could load intern/dojo/node!fs and load the text yourself. This will be addressed in the future.
I just came across the same issue and for me this worked:
define([
"dojo/_base/declare",
"intern/dojo/text!/[PathToText]"
], function (declare, base) {
Seems as if Sitepen has included this in the meantime...
I am writing a Play Framework module in order to share some common logic among multiple Play apps. One of the things I would like my module to do is provide some frequently-used functionality by way of 3rd-party modules, for example the excellent Markdown module.
First of all, is it possible to do this? I want all the apps that include my module to be able to use the .markdown().raw() String extension without needing to explicitly declare the Markdown module as a dependency. The Play Framework Cookbook chapter 5 seems to imply that it is possible, unless I am reading it wrong.
Secondly, if it is possible, how does it work? I have created the following vanilla example case, but I'm still getting errors.
I created a new, empty application "myapp", and a new, empty module "mymod", both in the same parent directory. I then modified mymod/conf/dependencies.yml to:
self: mymod -> mymod 0.1
require:
- play
- play -> markdown [1.5,)
I ran play deps on mymod and it successfully downloaded and installed the Markdown module. Running play build-module also worked fine with no errors.
Then, I modified myapp/conf/dependencies.yml to:
# Application dependencies
require:
- play
- mymod -> mymod 0.1
repositories:
- Local Modules:
type: local
artifact: ${application.path}/../[module]
contains:
- mymod
I ran play deps on myapp and it successfully found mymod, and generated the myapp/modules/mymod file, containing the absolute path to mymod.
I ran myapp using play run and was able to see the welcome page on http://localhost:9000/. So far so good.
Next, I modified myapp/app/views/Application/index.html to:
#{extends 'main.html' /}
#{set title:'Home' /}
${"This is _MarkDown_, by [John Gruber](http://daringfireball.net/projects/markdown/).".markdown().raw()}
I restarted myapp, and now I get the following error.
09:03:23,425 ERROR ~
#6a6eppo46
Internal Server Error (500) for request GET /
Template execution error (In /app/views/Application/index.html around line 4)
Execution error occured in template /app/views/Application/index.html. Exception raised was MissingMethodException : No signature of method: java.lang.String.markdown() is applicable for argument types: () values: [].
play.exceptions.TemplateExecutionException: No signature of method: java.lang.String.markdown() is applicable for argument types: () values: []
at play.templates.BaseTemplate.throwException(BaseTemplate.java:86)
at play.templates.GroovyTemplate.internalRender(GroovyTemplate.java:257)
at play.templates.Template.render(Template.java:26)
at play.templates.GroovyTemplate.render(GroovyTemplate.java:187)
at play.mvc.results.RenderTemplate.<init>(RenderTemplate.java:24)
at play.mvc.Controller.renderTemplate(Controller.java:660)
at play.mvc.Controller.renderTemplate(Controller.java:640)
at play.mvc.Controller.render(Controller.java:695)
at controllers.Application.index(Application.java:13)
at play.mvc.ActionInvoker.invokeWithContinuation(ActionInvoker.java:548)
at play.mvc.ActionInvoker.invoke(ActionInvoker.java:502)
at play.mvc.ActionInvoker.invokeControllerMethod(ActionInvoker.java:478)
at play.mvc.ActionInvoker.invokeControllerMethod(ActionInvoker.java:473)
at play.mvc.ActionInvoker.invoke(ActionInvoker.java:161)
at Invocation.HTTP Request(Play!)
Caused by: groovy.lang.MissingMethodException: No signature of method: java.lang.String.markdown() is applicable for argument types: () values: []
at /app/views/Application/index.html.(line:4)
at play.templates.GroovyTemplate.internalRender(GroovyTemplate.java:232)
... 13 more
And just to confirm I'm not crazy, I tried adding the play -> markdown [1.5,) line to myapp/conf/dependencies.yml and restarted the app, and confirmed that it works.
I feel like I'm missing something obvious. Many thanks in advance to anyone who can help! :)
Yes I had the same problem, it seems that transitive dependencies through custom home made modules does not work