I am trying to use this plugin https://www.npmjs.com/package/mobius1-selectr
I did a npm install mobius1-selectr
and imported it in my main.js
import 'mobius1-selectr/dist/selectr.min.css';
import 'mobius1-selectr/dist/selectr.min.js';
but as soon I import I get this exception:
You must supply either a HTMLSelectElement or a CSS3 selector string.
which comes from the source of selectr.
Is the import not to be done this way in webpack / main.js?
What am I doing wrong? Any help is appreciated.
Yes your imports are incorrect. This library uses UMD to export Selectr constructor. You are using Webpack so default import in your case should work:
import Selectr from 'mobius1-selectr'
Related
I have a Svelte/Js/Vite app and need to import Papaparse. It's installed as npm install papaparse and is present in the package.json.
When I import it as import * as Papa from "papaparse";, methods are not visible in the IDE (i.e. parse()) and the following error is shown:
error loading dynamically imported module. This could be due to syntax errors or importing non-existent modules. (see errors above)
When I import it as import {Papa} from "papaparse";, methods are visible in the IDE, but there s a message
Cannot resolve symbol 'Papa'
and it anyway doesn't work in a browser with the same error.
What is the proper way to import and what is the reason for these problems.
I think you need to import it this way since it's a default exported member:
import Papa from "papaparse";
// the name does not really matter. You can name it whatever you want
// as you're basically saying:
// import { default as Papa } from "papaparse"
// So, you can do it like this too:
// import Mama from "papaparse";
If you'd like to learn more about why, I'd recommend reading this article:
https://www.digitalocean.com/community/tutorials/understanding-modules-and-import-and-export-statements-in-javascript
I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.
Already gone through all posts related to this on stackoverflow.com. But didn't found any working solution.
import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'
import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';
Error Message
Failed to compile.
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
The problem here was the import statement of an external js file.
import 'https://kit.fontawesome.com/a076d05399.js';
You can add the file in index.html & run build.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
And yes there's no problem with import statement in css.
#import url("https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css");
In my case, it was failing because using external styles
import "https://unpkg.com/leaflet#1.6.0/dist/leaflet.css";
Fixed with using via npm:
npm i leaflet
import 'leaflet/dist/leaflet.css';
Official docs
Environment
I'm using Typescript with react.
I've installed react-bootstrap-date-picker with yarn install react-bootstrap-date-picker.
The website does not tell how to import the component.
Question
From looking at the installed node module (within the node_modules folder), how do I figure out the import path of the component?
What I've tried
I tried import { DatePicker as BSDatePicker } from 'react-bootstrap-date-picker';, but it errors out Could not find a declaration file for module 'react-bootstrap-date-picker'.
Try default import:
import DatePicker from 'react-bootstrap-date-picker';
You are using curly braces which is not required. Try this
import DatePicker as BSDatePicker from 'react-bootstrap-date-picker';
Curly braces are used for normal imports (imports which are not default imports) while if we import something without curly braces, it means that it is default import.
Hope that this link will help you to understand further.
https://mindsers.blog/post/javascript-named-imports-vs-default-imports/
I am trying to figure out how to import JavaScript files ONLY to a specific component.
I put the following code directly into my component:
import "../../vendor/datatables/js/jquery.dataTables.min.js";
import "../../vendor/datatables-plugins/dataTables.bootstrap.min.js";
import "../../vendor/datatables-responsive/dataTables.responsive.js";
But it fires an error saying:
Module not found: Error: Can't resolve 'jquery' in...
Which makes me suspect that the files that depend on jQuery cannot find the jQuery library in this scope.
jQuery itself is put in the angular-cli.json file:
"scripts": [
"./vendor/jquery/jquery.min.js"
],
An alternative is to put all of those 3 external JS files into the angular-cli.json file as well, and it will work, showing the expected result from the user perspective.
But I would like to figure out how to avoid setting the JS globally for those that are used only in a few specific components.
Thanks, please advise.
For example, to import jQuery to your component, you should write:
import * as $ from 'jquery';
Which means "Import all and use as "$" from "jQuery"".
If you downloaded the library by yourself, without npm install, you can try the following (but I'm not sure that it will work):
import * as $ from 'path/to/jquery';
I have a TypeScript file into which I'm importing third-party libraries.
import * as _ from 'lodash'; // Works great!
import * as moment from 'moment'; // Works great!
import {vsprintf} from 'sprintf-js'; // Compiler error
As my comments explain, the first two imports work great, but the sprintf-js import does not. I get the following compiler error:
Error TS2307: Cannot find module 'sprintf-js'.
Without a doubt, I have sprintf-js inside of my node_modules folder. I'm not very knowledgeable about node modules. I'm guessing that the sprintf-js libarary does something different than lodash or moment and that TypeScript doesn't like it. How can I make this work?
You will need to add a typing definition for sprintf-js. Depending on your setup - if you have TSD installed and setup with your project, it would be a case of running:
tsd query sprintf-js --action save
otherwise, you can have a read here:
http://definitelytyped.org/
or simply download the typing definition and include it in the project root folder:
https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/sprintf-js/sprintf-js.d.ts