I'm trying to add the jquery module select2 to my react project which has been created by create-react-app.
I'm running
npm install --save select2
and can see that the dependency is correctly added to my package.json.
Then I add this to a global javascript-file outside my react-code:
$(function () {
$('select').select2();
});
This does not work as the select2 script is not included.
What am I doing wrong? Should I somehow run the jquery code inside my react code? Should I do something specific to include the select2 library?
This might be a very basic problem, but I'm confused how scripts are actually included when running under the framework of create-react-app.
After som more research I realize that I can do the following:
Run 'npm install --save jquery'. This will add jquery to package.json
Add this import statement to my component: 'import $ from 'jquery';'
Any comments or more correct solutions will still be appreciated.
Related
I was running ionic serve in local computer and got following error
compilation error
It was working fine earlier, also I didn't make any changes to code whatsoever. I don't understand what is causing this error.
I tried following
Freshly clone project from git repo
Re-install npm dependencies
Un-install and re-install ionic globally
None of the above methods worked.
Looking at the error log, which say:
You may need an appropriate loader to handle this file type.
You need to add vue-loader to your webpack configuration. You can find an example of such an integration here:
https://github.com/vuejs-templates/webpack-simple
Someone said here "You may need an appropiate loader to handle this file type" webpack and vue that he solved the problem by downgrading vue-loader using:
npm install vue-loader#14 --save-dev.
Apparently v15 has some issues.
I suggest you to look in this posts:
Error: "You may need an additional loader to handle the result of these loaders."
"You may need an appropiate loader to handle this file type" webpack and vue
Vue Render HTML - You may need an additional loader to handle the result of these loaders
Vue - You may need an additional loader to handle the result of these loaders
Solved this bug,
One of the components contained lang typescript where as ionic system is using javascript.
SignIn Component:
<script lang="ts">
//logic
</script>
I just removed lang and ionic compiled files properly.
Earlier versions didn't track this error.I recently upgraded ionic version to 6.17.1.
I installed vuetify using the command vue add vuetify, but an error as below occurred because I didn't create the project using vue create <project>, instead, I used vue init <template> <project>.
Then, my project cannot run anymore. When I issued npm start, tons of errors occurred. The screenshot below is one of them:
Could someone teach me how to recover from these errors? Can I remove this plugin?
Or did it just destroy my project and I have to create a new one and start from scratch again?
Thanks
You can try
npm uninstall vue-cli-plugin-vuetify
removes veutify as a dependency
Cross verify in `package.json' file
I have this really simple webpack projects in with I now want to also use bulma a css framework.
I installed the package via npm i bulma and tried to include it inside my app.js-file using the following snipped unsuccessfully:
import bulma from '~bulma/bulma.sass';
I also tried using a specific sass part, which also did not work:
import bulma from '~bulma/sass/base/_all';
Can you help me get this working or maybe point me in the right direction?
You need to update your webpack config file so the sass loader also processes sass files, not only scss files.
Change this line:
test: /\.scss$/, to test: /\.(sass|scss)$/
I have vuejs installed and would like to use vue admin (https://github.com/vue-bulma/vue-admin) with it, however the documentation does not mention how to use it.
For example, if I wanted to use a component from vue-admin then what are the steps?
You'll need to git clone the vue-admin project repository:
git clone https://github.com/vue-bulma/vue-admin.git my-vue-admin
Then:
cd my-vue-admin
Next, install all the dependencies:
npm install
Once all the dependencies are installed, run:
npm run dev
Wait for the compilation to finish then go to http://localhost:8080 in your browser and it should be working.
Using individual components only
If you would like to use some components only, for example: a modal component. Then find its npm package name and install it in your project.
You can either look for the name in package.json or look at the source code of the page using that component in vue-admin. For example, a modal is used here.
Vue-admin is using vue-bulma-modal component. Here is its page which can provide you with more information.
vue-admin is more of a project template, so you'd make a copy of the whole project and make changes as needed. If you want to use individual components, just install them as needed and refer to vue-admin as example
I'm new to Aurelia, so I'm not really sure how this should work. I created a new Aurelia project and also installed bootstrap simply by doing jspm install bootstrap. I saw in console that this also pulled in jquery 3.0.0.
Now my question is, how do I use bootstrap.css, bootstrap.js and jquery.js in my project?
First attempt:
In app.html I tried to do thhe following:
<require from="bootstrap"></require>
I tried that because I have the following line in my config.js:
map: {
...
"bootstrap": "github:twbs/bootstrap#3.3.6",
...
}
This sort of works in the sense that it loads bootstrap.js, but then gives an error in browser that it's missing jquery.js. So it's not automatically loading jquery for me. Is this normal?
Second attempt:
I changed my require to this in app.html:
<require from="jquery/dist/jquery.js"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="bootstrap/js/bootstrap.js"></require>
I'm not sure how it knows where to look for the bootstrap.js and bootstrap.css file, since they are located in: jspm_packages/github/twbs/bootstrap#3.3.6/css/bootstrap.css etc. But it knows how to find the bootstrap files. But not the jquery file.
I have this in my config.js for jquery:
map: {
...
"github:twbs/bootstrap#3.3.6": {
"jquery": "npm:jquery#3.0.0"
},
....
}
So basically my question is, how should this work? Should require autoload all the necessary files when I <require from="bootstrap">. Or should I still load them as individual files? If so, how do I then load jquery in this case?
The require element is for pulling in Aurelia components, html templates (which are Aurelia components), or css files. It isn't for loading javascript files.
The Aurelia skeleton shows how to load Bootstrap in its main.js file:
import 'bootstrap';
is the first line in the file. This will initialize Bootstrap's javascript code.
In app.html a require element is used to load Bootstrap's css:
<require from="bootstrap/css/bootstrap.css"></require>
Importing jQuery in to a file is pretty simple as well:
import $ from 'jquery';
Then you can use the $ function however you would like.
I had this problem then installed latest node and npm, and then from the tutorial page on the aurelia site:-
To get Bootstrap setup, we begin by installing the library itself with NPM. Execute the following on the command line to do this:
npm install bootstrap --save
Next, because Bootstrap uses jQuery, we want to install jQuery as well, like this:
npm install jquery#^2.2.4 --save
then restarted the app as packages were updated and ran it again ... FIXED!
after adding
import 'bootstrap';
in main.js, you may need to stop the app (Ctrl + c) and run it again with
au run --watch
to make it work.