I have a small problem that took some time to find a solution. I'm trying to import this library to my project in Laravel.
https://www.adchsm.com/slidebars/help/usage/initializing-slidebars/
I have installed the library with NPM.
npm install slidebars --save-dev
Then I'm trying to import this library to my app.js file which has the following structure:
import jquery from 'jquery';
import popper from "popper.js";
try {
window.$ = window.jQuery = jquery;
window.Popper = popper.default;
require('bootstrap');
require('slidebars');
} catch (exception) {
console.log(exception);
}
$(document).ready(function () {
let constructor = new slidebars();
});
run npm run watch but then in my browser I get the following error in the console:
ReferenceError: slidebars is not defined
Please, if you could help me, I have searched in different places, but I can not find a solution for it. Thank you very much in advance.
Run...
npm install slidebars
+ slidebars#2.0.2
added 1 package and audited 16905 packages in 9.487s
found 0 vulnerabilities
In /resources/js/app.js add...
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
window.slidebars = require('slidebars');
require('bootstrap');
} catch (e) {}
Then compile the assets:
npm run prod
Related
I am new to browserify and npm so I could be doing something wrong but it seems like this should work. On a mac, running Big Sur, npm version 8.1.3:
mkdir test
cd test
npm init
npm install #aws-sdk/client-lex-runtime-v2
create index.js in that directory and add this content to it:
const { LexRuntimeV2Client, DeleteSessionCommand } = require("#aws-sdk/client-lex-runtime-v2");
console.log("test" + LexRuntimeV2Client)
If you run using node, it works fine:
$ node index.js
testclass LexRuntimeV2Client extends smithy_client_1.Client {
constructor(configuration) {
const _config_0 = runtimeConfig_1.getRuntimeConfig(configuration);
const _config_1 = config_resolver_1.resolveRegionConfig(_config_0);
const _config_2 = config_resolver_1.resolveEndpointsConfig(_config_1);
const _config_3 = middleware_retry_1.resolveRetryConfig(_config_2);
const _config_4 = middleware_host_header_1.resolveHostHeaderConfig(_config_3);
const _config_5 = middleware_signing_1.resolveAwsAuthConfig(_config_4);
const _config_6 = middleware_eventstream_1.resolveEventStreamConfig(_config_5);
const _config_7 = middleware_user_agent_1.resolveUserAgentConfig(_config_6);
const _config_8 = eventstream_serde_config_resolver_1.resolveEventStreamSerdeConfig(_config_7);
super(_config_8);
this.config = _config_8;
this.middlewareStack.use(middleware_retry_1.getRetryPlugin(this.config));
this.middlewareStack.use(middleware_content_length_1.getContentLengthPlugin(this.config));
this.middlewareStack.use(middleware_host_header_1.getHostHeaderPlugin(this.config));
this.middlewareStack.use(middleware_logger_1.getLoggerPlugin(this.config));
this.middlewareStack.use(middleware_signing_1.getAwsAuthPlugin(this.config));
this.middlewareStack.use(middleware_user_agent_1.getUserAgentPlugin(this.config));
}
destroy() {
super.destroy();
}
}
If you try to browserfy you get:
$ browserify index.js > indexBundle.js
Error: Can't walk dependency graph: ENOENT: no such file or directory, lstat '/Users/ericzinda/test/process'
required by /Users/ericzinda/test/node_modules/#aws-sdk/util-user-agent-node/dist-cjs/index.js
Am I doing something wrong here?
i am trying to work on an opensource software for NLP named doccano,i tried running only the frontend part where i ran the command npm install to get all needed dependencies then when i run npm run dev it starts compiling and then fails with this error
/home/nissow/Documents/doccano/doccano/frontend/components/project/FormDelete.vue
33:14 error PropType not found in 'vue' import/named
and when i checked the FormDelete.vue i did not notice any errors and no errors were detected on vscode either
<script lang="ts">
import Vue,{ PropType } from 'vue'
import BaseCard from '#/components/utils/BaseCard.vue'
import { ProjectDTO } from '~/services/application/project/projectData'
export default Vue.extend({
components: {
BaseCard
},
props: {
selected: {
type: Array as PropType<ProjectDTO[]>,
default: () => []
}
},
computed: {
nonDeletableProjects(): ProjectDTO[] {
return this.selected.filter(item => !item.current_users_role.is_project_admin)
},
hasNonDeletableProjects(): boolean {
return this.nonDeletableProjects.length > 0
}
}
})
</script>
here's package.json content :
and here's the second part
import type { PropType } from 'vue'
see detail https://github.com/nuxt-community/composition-api/issues/189
It was also a problem elsewhere.
Sounds like a known bug in eslint and typescript. It doesn't seem to cause an error depending on the version.
https://github.com/nuxt-community/composition-api/issues/189
i just made it work, by installing yarn and then running, yarn dev as it was suggested in the README.MD the first time i was doing it with npm run dev.
I am trying to install Jitsi-Meet plugin in my react-native project. I am trying to create a video/audio conference meetup feature in a website and I want to use react-native for the same purpose.
this is the plugin link.react-native-jitsi-meet - npmjs.org
The plugin gets successfully installed in the package.json
But when I am trying to import in my App.tsx file, it shows me module not found
How can I import the plugin successfully?
Thanks in advance.
1- Something is Missings
There is missing index.js file which is mendatory for npm packge. you can see in screenshot
-
2- You need to perform these steps to resolve this package
Step 1:
make index.js file at node_modules/react-native-jitsi-meet/index.js
Step 2:
and this add code in that index.js file
import { NativeModules, requireNativeComponent } from 'react-native';
export const JitsiMeetView = requireNativeComponent('RNJitsiMeetView');
export const JitsiMeetModule = NativeModules.RNJitsiMeetView;
const call = JitsiMeetModule.call;
const audioCall = JitsiMeetModule.audioCall;
JitsiMeetModule.call = (url, userInfo) => {
userInfo = userInfo || {};
call(url, userInfo);
}
JitsiMeetModule.audioCall = (url, userInfo) => {
userInfo = userInfo || {};
audioCall(url, userInfo);
}
export default JitsiMeetModule;
after these steps everything will be working
Node: you should automate these steps when we install any package by npm or yarn
we can use patch-package to automate these steps
I installed particles.js with: npm particles.js --save
Error: bundle.js:54 GET http://localhost:8080/particles.json 404 (Not Found)
I have tried different paths but it doesn't seem to work.
In the file app.js:
import 'particles.js/particles';
const particlesJS = window.particlesJS;
particlesJS.load('particles-js', 'particles.json', null);
Folderstructure:
- index.html
- src/js/app.js
- src/js/particles.json
try this:
import "particles.js";
particlesJS.load('container', 'particles.json', function () {
console.log('loaded');
});
I need to use the Sortable plugin from jQueryUI in my VueJS project, but I don't know how to include libraries on a VueJS 2 project.
This is what I have done so far:
1) Installed jQuery and jQueryUI this way
npm install --save jquery-ui
npm install --save jquery
2) I add these lines to main.js:
window.$ = window.jQuery = require('jquery');
window.$ = $.extend(require('jquery-ui'));
3) I use like this on my component:
<div class="height">
<app-component-component></app-component-component>
</div>
....
export default {
components: {
appComponentComponent: ComponentComponent
},
...
mounted() {
$('.height').sortable();
}
}
But I get this error:
[Vue warn]: Error in mounted hook: "TypeError: $(...).sortable is not a function"
Can you please tell me what I am doing wrong in order to import and use the library?
Thanks in advance
You can put your sortable plugin code in updated() method of vue lifecycle.
updated()
{
this.$nextTick(function () {
jQuery('.height').sortable();
})
}
You have to add this in main.js
global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
require('jquery-ui');
require('jquery-ui/ui/widgets/sortable');
And you can use it inside mounted as you are.