Ask Questions and Find Answers
Important:
Ask is now read-only. You can review any existing questions and answers, but not add anything new.
But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:
discuss.liferay.com
RE: How to develop portlets with JavaScript frameworks like Vue.js?
Hello,
i have found the liferay-js-toolkit to be useful when developing Vue.js Portlet: https://github.com/liferay/liferay-js-toolkit/wiki/How-to-use-liferay-npm-bundler
However, i would like to use @vue/cli generated projects to be compiled into liferay-bundles.
It's doesn't work, when i copy the vue-cli generated project
liferay-amd-loader |
A require() call has failed but no failure handler was provided.
Note that even if the call stack of this error trace looks like coming from the Liferay AMD Loader, it is not an error in the Loader what has caused it, but an error caused by the require() call.
The reason why the Loader is in the stack trace is because it is printing the error so that it doesn't get lost.
However, we recommend providing a failure handler in all require() calls to be able to recover from errors better and to avoid the appearance of this message.
Some information about the require() call follows:
· Require call id: 1
· Required modules: ["lrsp-first@1.0.0"]
· Missing modules: (n/a)
· Stack trace of the require() call:
Error
at e.value (http://localhost:8080/combo?browserId=other&minifierType=js&languageId=de_DE&b=7300&t=1580982646829&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/aui/aui/aui.js&/o/frontend-js-web/aui/aui-base-html5-shiv/aui-base-html5-shiv.js&/o/frontend-js-web/liferay/browser_selectors.js&/o/frontend-js-web/liferay/modules.js&/o/frontend-js-web/liferay/aui_sandbox.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/aui/arraylist-add/arraylist-add.js&/o/frontend-js-web/aui/arraylist-filter/arraylist-filter.js&/o/frontend-js-web/aui/arraylist/arraylist.js&/o/frontend-js-web/aui/array-extras/array-extras.js&/o/frontend-js-web/aui/array-invoke/array-invoke.js&/o/frontend-js-web/aui/attribute-base/attribute-base.js&/o/frontend-js-web/aui/attribute-complex/attribute-complex.js&/o/frontend-js-web/aui/attribute-core/attribute-core.js&/o/frontend-js-web/aui/attribute-observable/attribute-observable.js&/o/frontend-js-web/aui/attribute-extras/attribute-extras.js&/o/frontend-js-web/aui/base-base/base-base.js&/o/frontend-js-web/aui/base-pluginhost/base-pluginhost.js&/o/frontend-js-web/aui/classnamemanager/classnamemanager.js&/o/frontend-js-web/aui/datatype-xml-format/datatype-xml-format.js&/o/frontend-js-web/aui/datatype-xml-parse/datatype-xml-parse.js&/o/frontend-js-web/aui/dom-base/dom-base.js&/o/frontend-js-web/aui/dom-core/dom-core.js&/o/frontend-js-web/aui/dom-screen/dom-screen.js&/o/frontend-js-web/aui/dom-style/dom-style.js&/o/frontend-js-web/aui/event-base/event-base.js&/o/frontend-js-web/aui/event-custom-base/event-custom-base.js&/o/frontend-js-web/aui/event-custom-complex/event-custom-complex.js&/o/frontend-js-web/aui/event-delegate/event-delegate.js&/o/frontend-js-web/aui/event-focus/event-focus.js&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js:41:5898)
at http://localhost:8080/web/guest:2454:17
Error: The following problems where detected while resolving modules:
· Missing dependency ':ERROR:Missing version constraints for lrsp-first$App.vue in package.json of lrsp-first@1.0.0' of 'lrsp-first@1.0.0/index'
· Missing dependency ':ERROR:Missing version constraints for lrsp-first$router in package.json of lrsp-first@1.0.0/index' of 'lrsp-first@1.0.0/index'
at e.value (combo?browserId=other&minifierType=js&languageId=de_DE&b=7300&t=1580982646829&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/aui/aui/aui.js&/o/frontend-js-web/aui/aui-base-html5-shiv/aui-base-html5-shiv.js&/o/frontend-js-web/liferay/browser_selectors.js&/o/frontend-js-web/liferay/modules.js&/o/frontend-js-web/liferay/aui_sandbox.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/aui/arraylist-add/arraylist-add.js&/o/frontend-js-web/aui/arraylist-filter/arraylist-filter.js&/o/frontend-js-web/aui/arraylist/arraylist.js&/o/frontend-js-web/aui/array-extras/array-extras.js&/o/frontend-js-web/aui/array-invoke/array-invoke.js&/o/frontend-js-web/aui/attribute-base/attribute-base.js&/o/frontend-js-web/aui/attribute-complex/attribute-complex.js&/o/frontend-js-web/aui/attribute-core/attribute-core.js&/o/frontend-js-web/aui/attribute-observable/attribute-observable.js&/o/frontend-js-web/aui/attribute-extras/attribute-extras.js&/o/frontend-js-web/aui/base-base/base-base.js&/o/frontend-js-web/aui/base-pluginhost/base-pluginhost.js&/o/frontend-js-web/aui/classnamemanager/classnamemanager.js&/o/frontend-js-web/aui/datatype-xml-format/datatype-xml-format.js&/o/frontend-js-web/aui/datatype-xml-parse/datatype-xml-parse.js&/o/frontend-js-web/aui/dom-base/dom-base.js&/o/frontend-js-web/aui/dom-core/dom-core.js&/o/frontend-js-web/aui/dom-screen/dom-screen.js&/o/frontend-js-web/aui/dom-style/dom-style.js&/o/frontend-js-web/aui/event-base/event-base.js&/o/frontend-js-web/aui/event-custom-base/event-custom-base.js&/o/frontend-js-web/aui/event-custom-complex/event-custom-complex.js&/o/frontend-js-web/aui/event-delegate/event-delegate.js&/o/frontend-js-web/aui/event-focus/event-focus.js&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js:41)
at combo?browserId=other&minifierType=js&languageId=de_DE&b=7300&t=1580982646829&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/aui/aui/aui.js&/o/frontend-js-web/aui/aui-base-html5-shiv/aui-base-html5-shiv.js&/o/frontend-js-web/liferay/browser_selectors.js&/o/frontend-js-web/liferay/modules.js&/o/frontend-js-web/liferay/aui_sandbox.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/aui/arraylist-add/arraylist-add.js&/o/frontend-js-web/aui/arraylist-filter/arraylist-filter.js&/o/frontend-js-web/aui/arraylist/arraylist.js&/o/frontend-js-web/aui/array-extras/array-extras.js&/o/frontend-js-web/aui/array-invoke/array-invoke.js&/o/frontend-js-web/aui/attribute-base/attribute-base.js&/o/frontend-js-web/aui/attribute-complex/attribute-complex.js&/o/frontend-js-web/aui/attribute-core/attribute-core.js&/o/frontend-js-web/aui/attribute-observable/attribute-observable.js&/o/frontend-js-web/aui/attribute-extras/attribute-extras.js&/o/frontend-js-web/aui/base-base/base-base.js&/o/frontend-js-web/aui/base-pluginhost/base-pluginhost.js&/o/frontend-js-web/aui/classnamemanager/classnamemanager.js&/o/frontend-js-web/aui/datatype-xml-format/datatype-xml-format.js&/o/frontend-js-web/aui/datatype-xml-parse/datatype-xml-parse.js&/o/frontend-js-web/aui/dom-base/dom-base.js&/o/frontend-js-web/aui/dom-core/dom-core.js&/o/frontend-js-web/aui/dom-screen/dom-screen.js&/o/frontend-js-web/aui/dom-style/dom-style.js&/o/frontend-js-web/aui/event-base/event-base.js&/o/frontend-js-web/aui/event-custom-base/event-custom-base.js&/o/frontend-js-web/aui/event-custom-complex/event-custom-complex.js&/o/frontend-js-web/aui/event-delegate/event-delegate.js&/o/frontend-js-web/aui/event-focus/event-focus.js&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js:41
Does anyone have experience? Is there any possibility to use @vue/cli generated projects along with liferay?
i have found the liferay-js-toolkit to be useful when developing Vue.js Portlet: https://github.com/liferay/liferay-js-toolkit/wiki/How-to-use-liferay-npm-bundler
However, i would like to use @vue/cli generated projects to be compiled into liferay-bundles.
It's doesn't work, when i copy the vue-cli generated project
liferay-amd-loader |
A require() call has failed but no failure handler was provided.
Note that even if the call stack of this error trace looks like coming from the Liferay AMD Loader, it is not an error in the Loader what has caused it, but an error caused by the require() call.
The reason why the Loader is in the stack trace is because it is printing the error so that it doesn't get lost.
However, we recommend providing a failure handler in all require() calls to be able to recover from errors better and to avoid the appearance of this message.
Some information about the require() call follows:
· Require call id: 1
· Required modules: ["lrsp-first@1.0.0"]
· Missing modules: (n/a)
· Stack trace of the require() call:
Error
at e.value (http://localhost:8080/combo?browserId=other&minifierType=js&languageId=de_DE&b=7300&t=1580982646829&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/aui/aui/aui.js&/o/frontend-js-web/aui/aui-base-html5-shiv/aui-base-html5-shiv.js&/o/frontend-js-web/liferay/browser_selectors.js&/o/frontend-js-web/liferay/modules.js&/o/frontend-js-web/liferay/aui_sandbox.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/aui/arraylist-add/arraylist-add.js&/o/frontend-js-web/aui/arraylist-filter/arraylist-filter.js&/o/frontend-js-web/aui/arraylist/arraylist.js&/o/frontend-js-web/aui/array-extras/array-extras.js&/o/frontend-js-web/aui/array-invoke/array-invoke.js&/o/frontend-js-web/aui/attribute-base/attribute-base.js&/o/frontend-js-web/aui/attribute-complex/attribute-complex.js&/o/frontend-js-web/aui/attribute-core/attribute-core.js&/o/frontend-js-web/aui/attribute-observable/attribute-observable.js&/o/frontend-js-web/aui/attribute-extras/attribute-extras.js&/o/frontend-js-web/aui/base-base/base-base.js&/o/frontend-js-web/aui/base-pluginhost/base-pluginhost.js&/o/frontend-js-web/aui/classnamemanager/classnamemanager.js&/o/frontend-js-web/aui/datatype-xml-format/datatype-xml-format.js&/o/frontend-js-web/aui/datatype-xml-parse/datatype-xml-parse.js&/o/frontend-js-web/aui/dom-base/dom-base.js&/o/frontend-js-web/aui/dom-core/dom-core.js&/o/frontend-js-web/aui/dom-screen/dom-screen.js&/o/frontend-js-web/aui/dom-style/dom-style.js&/o/frontend-js-web/aui/event-base/event-base.js&/o/frontend-js-web/aui/event-custom-base/event-custom-base.js&/o/frontend-js-web/aui/event-custom-complex/event-custom-complex.js&/o/frontend-js-web/aui/event-delegate/event-delegate.js&/o/frontend-js-web/aui/event-focus/event-focus.js&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js:41:5898)
at http://localhost:8080/web/guest:2454:17
Error: The following problems where detected while resolving modules:
· Missing dependency ':ERROR:Missing version constraints for lrsp-first$App.vue in package.json of lrsp-first@1.0.0' of 'lrsp-first@1.0.0/index'
· Missing dependency ':ERROR:Missing version constraints for lrsp-first$router in package.json of lrsp-first@1.0.0/index' of 'lrsp-first@1.0.0/index'
at e.value (combo?browserId=other&minifierType=js&languageId=de_DE&b=7300&t=1580982646829&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/aui/aui/aui.js&/o/frontend-js-web/aui/aui-base-html5-shiv/aui-base-html5-shiv.js&/o/frontend-js-web/liferay/browser_selectors.js&/o/frontend-js-web/liferay/modules.js&/o/frontend-js-web/liferay/aui_sandbox.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/aui/arraylist-add/arraylist-add.js&/o/frontend-js-web/aui/arraylist-filter/arraylist-filter.js&/o/frontend-js-web/aui/arraylist/arraylist.js&/o/frontend-js-web/aui/array-extras/array-extras.js&/o/frontend-js-web/aui/array-invoke/array-invoke.js&/o/frontend-js-web/aui/attribute-base/attribute-base.js&/o/frontend-js-web/aui/attribute-complex/attribute-complex.js&/o/frontend-js-web/aui/attribute-core/attribute-core.js&/o/frontend-js-web/aui/attribute-observable/attribute-observable.js&/o/frontend-js-web/aui/attribute-extras/attribute-extras.js&/o/frontend-js-web/aui/base-base/base-base.js&/o/frontend-js-web/aui/base-pluginhost/base-pluginhost.js&/o/frontend-js-web/aui/classnamemanager/classnamemanager.js&/o/frontend-js-web/aui/datatype-xml-format/datatype-xml-format.js&/o/frontend-js-web/aui/datatype-xml-parse/datatype-xml-parse.js&/o/frontend-js-web/aui/dom-base/dom-base.js&/o/frontend-js-web/aui/dom-core/dom-core.js&/o/frontend-js-web/aui/dom-screen/dom-screen.js&/o/frontend-js-web/aui/dom-style/dom-style.js&/o/frontend-js-web/aui/event-base/event-base.js&/o/frontend-js-web/aui/event-custom-base/event-custom-base.js&/o/frontend-js-web/aui/event-custom-complex/event-custom-complex.js&/o/frontend-js-web/aui/event-delegate/event-delegate.js&/o/frontend-js-web/aui/event-focus/event-focus.js&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js:41)
at combo?browserId=other&minifierType=js&languageId=de_DE&b=7300&t=1580982646829&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/aui/aui/aui.js&/o/frontend-js-web/aui/aui-base-html5-shiv/aui-base-html5-shiv.js&/o/frontend-js-web/liferay/browser_selectors.js&/o/frontend-js-web/liferay/modules.js&/o/frontend-js-web/liferay/aui_sandbox.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/aui/arraylist-add/arraylist-add.js&/o/frontend-js-web/aui/arraylist-filter/arraylist-filter.js&/o/frontend-js-web/aui/arraylist/arraylist.js&/o/frontend-js-web/aui/array-extras/array-extras.js&/o/frontend-js-web/aui/array-invoke/array-invoke.js&/o/frontend-js-web/aui/attribute-base/attribute-base.js&/o/frontend-js-web/aui/attribute-complex/attribute-complex.js&/o/frontend-js-web/aui/attribute-core/attribute-core.js&/o/frontend-js-web/aui/attribute-observable/attribute-observable.js&/o/frontend-js-web/aui/attribute-extras/attribute-extras.js&/o/frontend-js-web/aui/base-base/base-base.js&/o/frontend-js-web/aui/base-pluginhost/base-pluginhost.js&/o/frontend-js-web/aui/classnamemanager/classnamemanager.js&/o/frontend-js-web/aui/datatype-xml-format/datatype-xml-format.js&/o/frontend-js-web/aui/datatype-xml-parse/datatype-xml-parse.js&/o/frontend-js-web/aui/dom-base/dom-base.js&/o/frontend-js-web/aui/dom-core/dom-core.js&/o/frontend-js-web/aui/dom-screen/dom-screen.js&/o/frontend-js-web/aui/dom-style/dom-style.js&/o/frontend-js-web/aui/event-base/event-base.js&/o/frontend-js-web/aui/event-custom-base/event-custom-base.js&/o/frontend-js-web/aui/event-custom-complex/event-custom-complex.js&/o/frontend-js-web/aui/event-delegate/event-delegate.js&/o/frontend-js-web/aui/event-focus/event-focus.js&/o/frontend-js-web/aui/event-hover/event-hover.js&/o/frontend-js-web/aui/event-key/event-key.js&/o/frontend-js-web/aui/event-mouseenter/event-mouseenter.js&/o/frontend-js-web/aui/event-mousewheel/event-mousewheel.js:41
Does anyone have experience? Is there any possibility to use @vue/cli generated projects along with liferay?
Hey, have you seen this examples?
https://portal.liferay.dev/docs/7-1/reference/-/knowledge_base/r/vue-js-npm-portlet
I haven't looked into them, but may be that is of help..
Also have a look at this preset for the npm-bundler: https://www.npmjs.com/package/liferay-npm-bundler-preset-vue-cli
And finally the error you see says that your export module could not be found. Usually it is something like this:
https://portal.liferay.dev/docs/7-1/reference/-/knowledge_base/r/vue-js-npm-portlet
I haven't looked into them, but may be that is of help..
Also have a look at this preset for the npm-bundler: https://www.npmjs.com/package/liferay-npm-bundler-preset-vue-cli
And finally the error you see says that your export module could not be found. Usually it is something like this:
Liferay.Loader.require('lrsp-first@1.0.0/[myJsFile]', function(module) {
}
Hey Ivan, I have successfully created a Vue portlet using the LR JS Generator BUT I didn't use Vue CLI (at least not inside LR). What I had to do is follow all the instructions mentioned here and change everything by hand (basically integrate your Vue application dependencies, etc with the LR ones).
Thanks for the replies! Actually i am working on Liferay 7.3 . I have found two ways for developing Vue.JS Portlets. In Developer Studio
File-> New -> Liferay Module Project choose as Project Template Name npm-vuejs-portlet
but this doesn't work for 7.3, because the dependencies are wrong, so i needed to create the project using
blade create -t npm-vuejs-portlet -v 7.3 -p com.liferay.npm.vuejs -c MyNpmVuejsPortlet my-npm-vuejs-portlet
This creates the right dependencies for 7.3
compileOnly group: "com.liferay", name: "com.liferay.frontend.js.loader.modules.extender.api", version: "4.0.1"
compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "5.4.0"
compileOnly group: "com.liferay.portal", name: "com.liferay.util.taglib", version: "5.0.3"
However, i would like to create my VueApp with the npm Package @vue/cli by using
vue create vue-cli-demo4
Thanks to the replies in this thread and https://github.com/liferay/liferay-js-toolkit/wiki/How-to-adapt-most-popular-frameworks-projects i found the following way to adapt a @vue/cli-created portlet:
npm install -g yo generator-liferay
cd vue-cli-demo4
npm install --save-dev liferay-npm-bundler-preset-vue-cli
yo liferay-js:adapt
npm run deploy:liferay
I was able to deploy and add the portlet to the page, but I got 404 errors for the js files in my browser which I could fix by using the hints from https://github.com/vuejs/vue-cli/issues/1649 and removing fileNameHashes in vue.config.js
liferay-amd-loader
A require() call has failed but no failure handler was provided.
Note that even if the call stack of this error trace looks like coming from the Liferay AMD Loader, it is not an error in the Loader what has caused it, but an error caused by the require() call.
The reason why the Loader is in the stack trace is because it is printing the error so that it doesn't get lost.
However, we recommend providing a failure handler in all require() calls to be able to recover from errors better and to avoid the appearance of this message.
Some information about the require() call follows:
· Require call id: 61
· Required modules: ["vue-cli-demo4@0.1.0"]
· Missing modules: (n/a)
· Stack trace of the require() call:
Error
at e.value (http://localhost:8080/combo?browserId=other&minifierType=js&languageId=de_DE&b=7302&t=1592476882731&/o/frontend-js-aui-web/aui/widget-stack/widget-stack.js&/o/frontend-js-aui-web/aui/widget-stdmod/widget-stdmod.js&/o/frontend-js-aui-web/aui/aui-aria/aui-aria.js&/o/frontend-js-aui-web/aui/aui-io-plugin-deprecated/aui-io-plugin-deprecated.js&/o/frontend-js-aui-web/aui/aui-io-request/aui-io-request.js&/o/frontend-js-aui-web/aui/aui-loading-mask-deprecated/aui-loading-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-base-deprecated/aui-overlay-base-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-context-deprecated/aui-overlay-context-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-manager-deprecated/aui-overlay-manager-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-mask-deprecated/aui-overlay-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-parse-content/aui-parse-content.js&/o/frontend-js-aui-web/liferay/session.js&/o/frontend-js-aui-web/liferay/deprecated.js&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/liferay/dom_task_runner.js&/o/frontend-js-web/liferay/events.js&/o/frontend-js-web/liferay/lazy_load.js&/o/frontend-js-web/liferay/liferay.js&/o/frontend-js-web/liferay/global.bundle.js&/o/frontend-js-web/liferay/portlet.js&/o/frontend-js-web/liferay/workflow.js:6256:5898)
at <anonymous>:2:17
at runNextScript (http://localhost:8080/combo/?browserId=other&minifierType=&languageId=de_DE&b=7302&t=1592476882731&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/thunks/updateRowColumns.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/utils/getResponsiveConfig.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/RowConfigurationCheckboxField.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/RowConfigurationSelectField.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/RowConfigurationPanel.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/config/constants/editableFloatingToolbarButtons.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/config/constants/floatingToolbarConfigurations.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/FloatingToolbar.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/Frame.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/UnsafeHTML.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/getEditableUniqueId.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/FragmentContentFloatingToolbar.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/getEditableElement.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/getEditableElementId.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/FragmentContentInteractionsFilter.js:1424:42)
Error: The following problems where detected while resolving modules:
· Missing dependency 'vue-cli-demo4@0.1.0/js/chunk-vendors' of 'vue-cli-demo4@0.1.0/index'
· Missing dependency 'vue-cli-demo4@0.1.0/js/app' of 'vue-cli-demo4@0.1.0/index'
at e.value (combo?browserId=other&minifierType=js&languageId=de_DE&b=7302&t=1592476882731&/o/frontend-js-aui-web/aui/widget-stack/widget-stack.js&/o/frontend-js-aui-web/aui/widget-stdmod/widget-stdmod.js&/o/frontend-js-aui-web/aui/aui-aria/aui-aria.js&/o/frontend-js-aui-web/aui/aui-io-plugin-deprecated/aui-io-plugin-deprecated.js&/o/frontend-js-aui-web/aui/aui-io-request/aui-io-request.js&/o/frontend-js-aui-web/aui/aui-loading-mask-deprecated/aui-loading-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-base-deprecated/aui-overlay-base-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-context-deprecated/aui-overlay-context-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-manager-deprecated/aui-overlay-manager-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-mask-deprecated/aui-overlay-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-parse-content/aui-parse-content.js&/o/frontend-js-aui-web/liferay/session.js&/o/frontend-js-aui-web/liferay/deprecated.js&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/liferay/dom_task_runner.js&/o/frontend-js-web/liferay/events.js&/o/frontend-js-web/liferay/lazy_load.js&/o/frontend-js-web/liferay/liferay.js&/o/frontend-js-web/liferay/global.bundle.js&/o/frontend-js-web/liferay/portlet.js&/o/frontend-js-web/liferay/workflow.js:6256)
at combo?browserId=other&minifierType=js&languageId=de_DE&b=7302&t=1592476882731&/o/frontend-js-aui-web/aui/widget-stack/widget-stack.js&/o/frontend-js-aui-web/aui/widget-stdmod/widget-stdmod.js&/o/frontend-js-aui-web/aui/aui-aria/aui-aria.js&/o/frontend-js-aui-web/aui/aui-io-plugin-deprecated/aui-io-plugin-deprecated.js&/o/frontend-js-aui-web/aui/aui-io-request/aui-io-request.js&/o/frontend-js-aui-web/aui/aui-loading-mask-deprecated/aui-loading-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-base-deprecated/aui-overlay-base-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-context-deprecated/aui-overlay-context-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-manager-deprecated/aui-overlay-manager-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-mask-deprecated/aui-overlay-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-parse-content/aui-parse-content.js&/o/frontend-js-aui-web/liferay/session.js&/o/frontend-js-aui-web/liferay/deprecated.js&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/liferay/dom_task_runner.js&/o/frontend-js-web/liferay/events.js&/o/frontend-js-web/liferay/lazy_load.js&/o/frontend-js-web/liferay/liferay.js&/o/frontend-js-web/liferay/global.bundle.js&/o/frontend-js-web/liferay/portlet.js&/o/frontend-js-web/liferay/workflow.js:6256
I would be very grateful for ANY hints! And is there a way to develop @vue/cli like Apps using Liferay Developer Studio? Best regards.
File-> New -> Liferay Module Project choose as Project Template Name npm-vuejs-portlet
but this doesn't work for 7.3, because the dependencies are wrong, so i needed to create the project using
blade create -t npm-vuejs-portlet -v 7.3 -p com.liferay.npm.vuejs -c MyNpmVuejsPortlet my-npm-vuejs-portlet
This creates the right dependencies for 7.3
compileOnly group: "com.liferay", name: "com.liferay.frontend.js.loader.modules.extender.api", version: "4.0.1"
compileOnly group: "com.liferay.portal", name: "com.liferay.portal.kernel", version: "5.4.0"
compileOnly group: "com.liferay.portal", name: "com.liferay.util.taglib", version: "5.0.3"
However, i would like to create my VueApp with the npm Package @vue/cli by using
vue create vue-cli-demo4
Thanks to the replies in this thread and https://github.com/liferay/liferay-js-toolkit/wiki/How-to-adapt-most-popular-frameworks-projects i found the following way to adapt a @vue/cli-created portlet:
npm install -g yo generator-liferay
cd vue-cli-demo4
npm install --save-dev liferay-npm-bundler-preset-vue-cli
yo liferay-js:adapt
npm run deploy:liferay
I was able to deploy and add the portlet to the page, but I got 404 errors for the js files in my browser which I could fix by using the hints from https://github.com/vuejs/vue-cli/issues/1649 and removing fileNameHashes in vue.config.js
[code]module.exports = {
configureWebpack: config => {
config.output.filename = '[name].js'
config.output.chunkFilename = '[name].js'
},
css: {
extract: {
filename: '[name].css',
},
},
}liferay-amd-loader
A require() call has failed but no failure handler was provided.
Note that even if the call stack of this error trace looks like coming from the Liferay AMD Loader, it is not an error in the Loader what has caused it, but an error caused by the require() call.
The reason why the Loader is in the stack trace is because it is printing the error so that it doesn't get lost.
However, we recommend providing a failure handler in all require() calls to be able to recover from errors better and to avoid the appearance of this message.
Some information about the require() call follows:
· Require call id: 61
· Required modules: ["vue-cli-demo4@0.1.0"]
· Missing modules: (n/a)
· Stack trace of the require() call:
Error
at e.value (http://localhost:8080/combo?browserId=other&minifierType=js&languageId=de_DE&b=7302&t=1592476882731&/o/frontend-js-aui-web/aui/widget-stack/widget-stack.js&/o/frontend-js-aui-web/aui/widget-stdmod/widget-stdmod.js&/o/frontend-js-aui-web/aui/aui-aria/aui-aria.js&/o/frontend-js-aui-web/aui/aui-io-plugin-deprecated/aui-io-plugin-deprecated.js&/o/frontend-js-aui-web/aui/aui-io-request/aui-io-request.js&/o/frontend-js-aui-web/aui/aui-loading-mask-deprecated/aui-loading-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-base-deprecated/aui-overlay-base-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-context-deprecated/aui-overlay-context-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-manager-deprecated/aui-overlay-manager-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-mask-deprecated/aui-overlay-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-parse-content/aui-parse-content.js&/o/frontend-js-aui-web/liferay/session.js&/o/frontend-js-aui-web/liferay/deprecated.js&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/liferay/dom_task_runner.js&/o/frontend-js-web/liferay/events.js&/o/frontend-js-web/liferay/lazy_load.js&/o/frontend-js-web/liferay/liferay.js&/o/frontend-js-web/liferay/global.bundle.js&/o/frontend-js-web/liferay/portlet.js&/o/frontend-js-web/liferay/workflow.js:6256:5898)
at <anonymous>:2:17
at runNextScript (http://localhost:8080/combo/?browserId=other&minifierType=&languageId=de_DE&b=7302&t=1592476882731&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/thunks/updateRowColumns.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/utils/getResponsiveConfig.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/RowConfigurationCheckboxField.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/RowConfigurationSelectField.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/RowConfigurationPanel.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/config/constants/editableFloatingToolbarButtons.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/config/constants/floatingToolbarConfigurations.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/floating-toolbar/FloatingToolbar.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/Frame.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/UnsafeHTML.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/getEditableUniqueId.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/FragmentContentFloatingToolbar.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/getEditableElement.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/getEditableElementId.js&/o/js/resolved-module/layout-content-page-editor-web@2.0.32/page_editor/app/components/fragment-content/FragmentContentInteractionsFilter.js:1424:42)
Error: The following problems where detected while resolving modules:
· Missing dependency 'vue-cli-demo4@0.1.0/js/chunk-vendors' of 'vue-cli-demo4@0.1.0/index'
· Missing dependency 'vue-cli-demo4@0.1.0/js/app' of 'vue-cli-demo4@0.1.0/index'
at e.value (combo?browserId=other&minifierType=js&languageId=de_DE&b=7302&t=1592476882731&/o/frontend-js-aui-web/aui/widget-stack/widget-stack.js&/o/frontend-js-aui-web/aui/widget-stdmod/widget-stdmod.js&/o/frontend-js-aui-web/aui/aui-aria/aui-aria.js&/o/frontend-js-aui-web/aui/aui-io-plugin-deprecated/aui-io-plugin-deprecated.js&/o/frontend-js-aui-web/aui/aui-io-request/aui-io-request.js&/o/frontend-js-aui-web/aui/aui-loading-mask-deprecated/aui-loading-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-base-deprecated/aui-overlay-base-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-context-deprecated/aui-overlay-context-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-manager-deprecated/aui-overlay-manager-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-mask-deprecated/aui-overlay-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-parse-content/aui-parse-content.js&/o/frontend-js-aui-web/liferay/session.js&/o/frontend-js-aui-web/liferay/deprecated.js&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/liferay/dom_task_runner.js&/o/frontend-js-web/liferay/events.js&/o/frontend-js-web/liferay/lazy_load.js&/o/frontend-js-web/liferay/liferay.js&/o/frontend-js-web/liferay/global.bundle.js&/o/frontend-js-web/liferay/portlet.js&/o/frontend-js-web/liferay/workflow.js:6256)
at combo?browserId=other&minifierType=js&languageId=de_DE&b=7302&t=1592476882731&/o/frontend-js-aui-web/aui/widget-stack/widget-stack.js&/o/frontend-js-aui-web/aui/widget-stdmod/widget-stdmod.js&/o/frontend-js-aui-web/aui/aui-aria/aui-aria.js&/o/frontend-js-aui-web/aui/aui-io-plugin-deprecated/aui-io-plugin-deprecated.js&/o/frontend-js-aui-web/aui/aui-io-request/aui-io-request.js&/o/frontend-js-aui-web/aui/aui-loading-mask-deprecated/aui-loading-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-base-deprecated/aui-overlay-base-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-context-deprecated/aui-overlay-context-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-manager-deprecated/aui-overlay-manager-deprecated.js&/o/frontend-js-aui-web/aui/aui-overlay-mask-deprecated/aui-overlay-mask-deprecated.js&/o/frontend-js-aui-web/aui/aui-parse-content/aui-parse-content.js&/o/frontend-js-aui-web/liferay/session.js&/o/frontend-js-aui-web/liferay/deprecated.js&/o/frontend-js-web/loader/config.js&/o/frontend-js-web/loader/loader.js&/o/frontend-js-web/misc/svg4everybody.js&/o/frontend-js-web/liferay/dom_task_runner.js&/o/frontend-js-web/liferay/events.js&/o/frontend-js-web/liferay/lazy_load.js&/o/frontend-js-web/liferay/liferay.js&/o/frontend-js-web/liferay/global.bundle.js&/o/frontend-js-web/liferay/portlet.js&/o/frontend-js-web/liferay/workflow.js:6256
Hello again,
i have found this adaptaion plan working for @vue/cli created projects. This works great and I can use e.g. Vue router, scss, and probably even Vuex!
However, i am still not at the end of my journey. My aim is to kind of replace AUI completely so that I can
1. get Java-Portlets inside the project so that
2. i can work with URLS in JavaScript just as I would using <portlet:actionURL> etc.
I guess I should somehow combine blade created projects (which have Java-Portlets) with the latter @vue/cli-adapted project. I have no idea how to do it and whether it is necessary at all. Maybe it is sufficient to just create the Portlet Project using Liferay Dev Studio and in VS Code create the Portlet URL using Liferay JS Library from my Forntend Portlet, so that I can call Portlet methods from my Frontend Portlet. I haven't found the documentation for Liferay JS Library. Any hints or ideas? The alternative would be to call JWT secured REST-Services from my frontend, but I would really like to do it via Portlet-Security / Portlet Bridge for VueJS portlets. Any experiences?
Best regards,
Rome
i have found this adaptaion plan working for @vue/cli created projects. This works great and I can use e.g. Vue router, scss, and probably even Vuex!
However, i am still not at the end of my journey. My aim is to kind of replace AUI completely so that I can
1. get Java-Portlets inside the project so that
2. i can work with URLS in JavaScript just as I would using <portlet:actionURL> etc.
I guess I should somehow combine blade created projects (which have Java-Portlets) with the latter @vue/cli-adapted project. I have no idea how to do it and whether it is necessary at all. Maybe it is sufficient to just create the Portlet Project using Liferay Dev Studio and in VS Code create the Portlet URL using Liferay JS Library from my Forntend Portlet, so that I can call Portlet methods from my Frontend Portlet. I haven't found the documentation for Liferay JS Library. Any hints or ideas? The alternative would be to call JWT secured REST-Services from my frontend, but I would really like to do it via Portlet-Security / Portlet Bridge for VueJS portlets. Any experiences?
Best regards,
Rome