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
Related
1- I am trying to import a node module into my worker. I could not find a way to get it done in a straightforward manner. Many people were suggesting using things like webpack or external libraries. Why can't I simply import the node module like a regular js module import like so?
import blazeface from '#tensorflow-models/blazeface';
meanwhile, I can import other modules I created like
import getDetectedFace from "./detectFace.js";
When this error occurs I do not see any output to the console that an error has occurred. I can only tell because my worker does nothing when I try this type of import. Is this normal?
I am trying to use SystemJS to import a module that lives on an external server. Having problems just getting started with importing systemjs so that I can use it in code.
import System from 'systemjs';
OR
import * as System from 'systemjs';
// System not found, error on line above trying to import systemjs as module.
System.import('https://test.com/modules/somemodule.js').then(module => {
// got the module
});
Neither work. This is all assuming its possible to use System.import(...) in code to import a module. Reading through the docs not really sure how to import systemjs.
Error:
Module not found: Error: Can't resolve 'systemjs'
We are using React and TypeScript in our current project and I come across below behavior.
import React, { Component } from 'react';
I replace the above line with the one below since it seems to be using Component import only.
import { Component } from 'react';
And I was thrown below error
Error: 'React' refers to a UMD global but the current file is a module. Consider adding an import instead.
I tried looking it up on Stack and GitHub, found few articles and discussion but still unclear about why it's happening.
Would be more interested in whether React or Typescript is throwing it and WHY ? Not the ways to fix it.
Also some light around UMD, why it's used here ?
Are you rendering any jsx in the file? If so, you do need to import React, since those jsx tags compile into calls to React.createElement(). Without the import, the references to React are trying to reference a global variable, which then results in that error.
If you're using eslint, i'd recommend using eslint-plugin-react and turning on the rule react-in-jsx-scope, which will catch this case.
The way JSX syntax is transpiled depends on compiler options, jsxFactory option defaults to React.createComponent. This means that <p/> is transpiled to React.createComponent('p'), and React is expected to exist in the scope of a module.
If there's no React import, it's expected that React global should exist.
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'
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