I'm very new to NPM, bundlers and ES6.
I'm trying to use Tweakpane in a project, thus I did install it with NPM.
Then I import it with:
import { Tweakpane } from "./node_modules/tweakpane/dist/tweakpane.js";
But I get the following error:
Uncaught SyntaxError: The requested module './node_modules/tweakpane/dist/tweakpane.js' does not provide an export named 'Tweakpane'
I find it hard to believe that Tweakpane doesn't have a ES6 export functionnality.
What do I miss here?
I assume the import cannot be destructured. Try to import it directly:
import Tweakpane from "tweakpane";
Also, there is no need to specify the complete path into the node_modules folder.
Related
I have already installed the library https://github.com/jerosoler/Drawflow by npm from the repository and it is installed
npm i drawflow
but I try to import it to my component in DrawNode.vue and it gives me an error:
import Drawflow from '../../node_modules/drawflow/dist/drawflow.js';
or in this way but it does not find the packages
import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'
but this way it doesn't find the package in node_modules
I tried to import in main.js but I don't know how to get the data to my component.
repository of my code https://github.com/RobinCC95/drawFlow.git
I am using vue.js 2 - I add some mdi-icons in my App.vue this generate a new error in my project
When I was trying to serve my Project but I got the error as it given as below
I apply also some commands on it but it not solved my error.
Can anyone help me to solve it
Make sure to have the .css extension, otherwise the import will fail.
As a reminder:
Install #fortawesome/fontawesome-free (with npm or yarn depending on what package manager your project uses).
Then in your main.js you can just import all.css as per the example below
import Vue from 'vue'
import App from './App.vue'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
This will allow you to use the fa classes in regular HTML tags.
I also recommend taking a look at the Vue supported library for FontAwesome here if you want to have more granularity with your imports.
https://github.com/FortAwesome/vue-fontawesome
If you are using yarn then put this command
yarn add #fortawesome/fontawesome-free
or
If you are using npm then put this command
npm install #fortawesome/fontawesome-free
and add
#import '#fortawesome/fontawesome-free/css/all.css'; this in app.scss file
or add import '#fortawesome/fontawesome-free/css/all.css'; in app.js file
I simply solve the error by uninstall the googlefonts then again reinstall the google fonts by using following command.In my case I am using yarn so I use
yarn add #fortawesome/fontawesome-free
But in case of user that are using npm they should use following command
npm install --save #fortawesome/fontawesome-free
Also the following link is helpful google solve links for Npm and Yarn
: https://www.google.com/search?q=font%20awesome%20add%20by%20yaRN&oq=font%20awesome%20add%20by%20yaRN&aqs=chrome..69i57j33i10i160.11903j0j7&sourceid=chrome&ie=UTF-8
This one worked for me, I Downgraded #fortawesome/fontawesome-free version to ^5.15.4 in the package.json
I'm trying to add a dependency in a Vue.js Component's script tag.
import AuthenticationService from '#/services/AuthenticationService.js'
The error I get is -
This dependency was not found:
* #services/Api in ./src/services/AuthenticationService.js
To install it, you can run: npm install --save #services/Api
My path structure is client->src->services.
My AuthenticationService.js file
import Api from '#services/Api'
export default {
register(credentials) {
return Api.post()('register', credentials)
}
}
You should use #/services/Api (see the /?) in the AuthenticationService. Otherwise the bundler assumes that #services/x is an installed package in node_modules (and obviously isn't able to find it).
What is the proper way to import VueJs into my javascript file using NPM? I am getting a Vue is not defined error.
First, install the package:
$ npm install vue
And then import it in whatever file you want to use Vue:
import Vue from 'vue'
I've got an app and I'm trying to import MomentJS to use with ValueConverting. I've gone to my package.json file and added the following to my jspm dependencies:
"moment": "npm:moment#^2.14.1"
But when I try to import it from my file, it doesn't find the module:
import moment from '../moment';
I'm trying to import it in a file that's 1 directory deep from the src folder. So, this file is in a src/folder/file.ts
How do I import moment?
The only thing we should have to do to import another package is add
it to the dependencies on the package.json file and run a build,
correct?
You shouldn't be manually editing your package.json file like that unless absolutely necessary. You should use jspm install moment to get moment installed. Just adding lines to your package.json file doesn't actually accomplish anything.
But you've added the line to your package.json, and the line you added is correct, so now you need to run jspm install so that the code for moment can actually be pulled down and put in your project.
Next, to import moment, you'll need to do this:
import moment from 'moment';
Now you'll have the moment() function ready to use in your code.
Follow these steps
npm install moment --save
typings install dt~moment --global --save
Add the following to the dependencies section of the aurelia.json file
{ "name": "moment", "path": "../node_modules/moment", "main": "moment" }
Reference it in your .ts files with this
import * as moment from 'moment';
we had the same issues using Moment in TypeScript with Aurelia.
For some reason, Moment.js installed from JSPM does not include the type definition.
Here is how I fixed it:
In config.js you must use
"moment": "npm:moment#2.11.2",
(I had issues with 2.14.1)
Then you need to find the type definition that works and add it to your typings.json:
"github:typed-typings/npm-moment#a4075cd50e63efbedd850f654594f293ab81a385" did the trick.
{
"name": "my-cool-app-name",
"dependencies": {
....
"moment": "github:typed-typings/npm-moment#a4075cd50e63efbedd850f654594f293ab81a385"
},
"globalDevDependencies": {
........
}
}
Then I would type in the cli jspm install and then typings install (jspm and typings must both be installed globally, type npm install jspm -g and npm install typings -g if that is not the case). You should now be able to import moment in your files, like so:
import * as moment from 'moment';
Hope this helps.