How do I make a library "importable" in ES6? - javascript

I think this is a general question about how to make a library usable with ES6's import:
I want to use DimpleJS (a JS library for charts) in my React app.
I ran npm install --save dimple-js
I added import * from 'dimple-js' to my React component
At this point I get a Syntax Error: Unexpected token (2:9) which is the space after my import *.
Why do I get this error? How should I correctly import this into my project?

Related

"Uncaught SyntaxError: Cannot use import statement outside a module" When Importing ReactJS

Today I decided to try to learn React, but whenever I try to import the two modules below:
import React from "react"
import ReactDOM from "react-dom"
I get the error:
Uncaught SyntaxError: Cannot use import statement outside a module
Here's the steps I've taken to try to create my React program:
Install NodeJS
Add NodeJS to environmental variables
Create new folder for my program
Create HTML, CSS, and JS files in my folder
Why am I getting this error, and how can I fix it?
I assume this is your first time working with React? I see that you have installed NodeJs, which is great!
I recommend that you get started with a complete React app such as Create React App.
https://create-react-app.dev/
I am also new to react and using visual studio2022 to write the react code in MVC project. I created login page exactly same as https://github.com/narendra315/yt-210911-react-login-page/blob/master/src/LoginComponent2.js
and was getting same error as
Uncaught SyntaxError: Cannot use import statement outside a module
fixed it by removing the import as well as export line at the end. I replaced the export line with
ReactDOM.render(<LoginComponent />, document.getElementById('content'));
where LoginComponent is my class and content is id of my Index.cshtml page
This fixed my issue.
You need to add this to your package.json and it should work. If you are going to use es6 import statements you need to tell node you are using modules inside of your package.json like this.
"type": "module",

Flow complains about untyped import

I'm starting out on a React Native project that uses react-native-geolocation-service to get the user's GPS location, but Flow is complaining that the library is untyped. The library has Typescript types, but doesn't seem to have Flow types, and VS Code gives me this error when I import the library.
Importing from an untyped module makes it any and is not safe! Did you mean to add // #flow to the top of react-native-geolocation-service? (untyped-import)Flow(LintError-untyped-import)
Can I convince Flow to stop complaining about this library, or should I switch to Typescript? I don't have any particular preference for Flow, it's just what react-native init set up for me.
I used this to create the project:
npx react-native init WarmerWalker
Then I added the library like this:
npm install react-native-geolocation-service
I import the library like this in my App.js:
import Geolocation from 'react-native-geolocation-service';
I tried adding the library to the untyped section in .flowconfig, but that didn't help. Neither did the ignore section.
The code seems to work, it's just making Flow complain.
Thanks to a comment from Alex, I learned about strict mode. The sample app that react-native created used #flow strict-local, so that was causing the problem. Removing strict-local made it stop complaining.
However, since the library I want to use has Typescript type definitions, I'm going to switch to Typescript. I regenerated the sample app with the Typescript template, like this:
npx react-native init MyApp --template react-native-template-typescript

Javascript ES6 modules name resolution

I'm absolutely sure, that I'm asking a silly question, but I really do not understand how this line of code works
import React from 'react';
My question: who and where searches for 'react' name?
For example, this site tells me, that for module-name I should use relative of absolute path, e.g
import React from './react';
or
import React from '/home/user/react';
I thought that 'react' is same as './react' but I've created ReactJS applcation via create-react-app command and didn't find any file named react.js in application folder.
So, obviously there is some tool or rule by which module name has been resolved to a proper file, but I cannot find proper documentation about this.
Import statements are importing packages by name from the node_modules directory in your app, which is where they're saved when you run an installation command such as npm install or yarn inside your app.
When you write:
import React from 'react';
As far as you're concerned, it's as if you'd written:
import React from './node_modules/react/index.js';
Importing by package name means you don't have to be aware of how a given package is structured or where your node_modules directory is relative to your javascript file.

Angular 7 project can't import node-vibrant

I'm trying to import node-vibrant into my Angular 7 project, and am running into some issues:
-I can import it using import * as Vibrant from 'node-vibrant';, but I get the following warning in VS Code:
Module '"/Users/xxxx/Documents/dev/x/node_modules/node-vibrant/lib/index"' resolves to a non-module entity and cannot be imported using this construct
The app live-reloads fine in development, but when I try to build it, the error above becomes fatal and it won't build.
-I can import it using import * as Vibrant from 'node-vibrant';, but I get the following warning (once again, it live-reloads fine in dev):
Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.
This error also becomes fatal when building.
I'm left being unable to build because there isn't any way I can import this file. Is there a decent workaround for this?
Requiring vibrant within a method or function appears to work for me on Angular 7.
const vibrant = require('node-vibrant');
However, now this issue arises: https://github.com/akfish/node-vibrant/issues/85

import poly fill in TypeScript

Working on my first TypeScript project and I am using the fetch api but I need to use a poly fill for the other browsers out there. I would like to use Whatwg-fetch from Github and I have installed the module with NPM and I have the typings file from Definitely Typed.
When the code in compiled fetch poly fill will not be included and I am not sure how to add it as any time I import Typescript errors.
I am using Grunt, Browserify, TypeScript and React.
I have tried to import with
import {fetch} from 'whatwg-fetch';
and
import fetch = require('whatwg-fetch');
The definitions are in my main tsd.d.ts file that is included on the page.
Thanks for any help or directions.

Categories

Resources