I'm trying to import the twitter-text package into a React/ES6 environment, and I'm not able to figure out what exactly is exported and keep getting ...is not exported from 'twitter-text'. compile errors.
Doc states that the twttr.txt namespace is exported, but all the examples I can find are for node and use require(). It installed fine via npm install twitter-text and it's finding refs, for example import { parseTweet } from 'twitter-text'; is grabbing actual function and class refs from the package, but still the no export error when it compiles.
I also tried to get the global twttr.txt using just import 'twitter-text'; but I'm getting the same error.
The library is default-exporting an object unfortunately, which means that you need to use
import twttr from 'twitter-text'
twttr.parseTweet(…)
Named exports do not seem to be available.
Related
Im trying to use Svg.filter.js in a project using webpack (Vaadin) and typescript, but I stumpled upon a weird import issue.
I need to use the constructor Filter out of svg.filter.js , but this constructor is in the module svg.js.
Now, my import looks like this:
import "#svgdotjs/svg.filter.js";
import {SVG,Filter} from "#svgdotjs/svg.js";
When running this, i get the following error:
_svgdotjs_svg_js__WEBPACK_IMPORTED_MODULE_2__.Filter is not a constructor
So my question is:
How do I handle this error in webpack. Since im using methods recommended by examples i think its an webpack issue.
I am trying to use import instead of require for all modules in my project, but some older npm modules only have instructions for require.
In the case of 'isomorphic-fetch' I can't find the proper way to use import:
works
require('isomorphic-fetch')
fails
import 'isomporphic-fetch'
import Something from 'isomorphic-fetch'
// error Can't resolve 'isomporphic-fetch' from Project/src/js/
Converting to import does work with the es6-promise module.
works
require('es6-promise').polyfill()
works
import Something from 'es6-promise'
Something.polyfill()
Since import does work with other modules, and require('isomorphic-fetch') works, it's probably a named export problem.
Try import * as Something from 'isomorphic-fetch'
If that works, it's because isomorphic-fetch does not do export deafult so you have to pull in the imports by name, or use the notation I wrote above. Take a look at the MDN link I put on top.
I am pretty new to JavaScript and have been struggling with imports recently. There has been one thing I cannot wrap my head around.
In older node modules (mostly those which came to see the light prior to ES6), which may be installed using the npm, such as express, usually no default export is defined.
My IDE (WebStorm) marks the following line with the Default export is not declared in the imported module notification.
import express from 'express';
This message may be circumvented by trying to import the whole module as an alias using
import * as express from 'express';
implicitly telling my IDE to just import everything and name it express, however doing so then leads to an express is not a function error when trying to instantiate the application on the following line.
const app = express();
Peculiarly the original import (without the alias) works.
What exactly is imported using the import statement without the alias, when no default export is defined? I would think it is the whole module, but it does not seems so.
What does import Module from 'module' import when no default export is defined?
Nothing. In fact, instantiating the module will throw a SyntaxError when something is imported that is not exported or exported multiple times from the imported module.
Why is it different from import * as Module?
Because import * just imports a module namespace object that has the exports as properties. If you don't export anything, it'll be an empty object.
In older, pre-ES6 node modules usually no default export is defined.
Which means that you cannot import them as an ES6 module. Your IDE seems to expect that though and puts up the warning.
So what happens if you refer to them in an import declaration? Your module loader might do anything with it, and HostResolveImportedModule will return a module record that is not an source text "ES6 module" record - i.e. it might do anything implementation-dependent with CommonJS modules.
I really don't know how to do this and not sure how to google either.
Right now I have this
let source = require('vinyl-source-stream');
I would like to change to be import but this doesn't work
import {'vinyl-source-stream' as source} from 'vinyl-source-stream';
If that module even supports the ES6 import/export system, then what you want is this:
import source from 'vinyl-source-stream';
Your version is attempting to import an exported value named vinyl-source-stream from the module; instead, you just want the module itself to be imported (into an object named source in this case).
If you want everything in the module imported, instead of just the default exports, use this instead:
import * as source from 'vinyl-source-stream';
But neither of those will work if the module isn't actually written to use the new system.
This library doesn't use the ES2015 module system. It doesn't export at all, so you can't import it or from it.
This library uses the CommonJS module pattern (as can be seen in the source) and is meant to be requireed.
You could import the library with:
import form 'vinyl-source-stream';
which will cause the code to be executed, but that will be useless in this case since nothing (useful) will happen - in fact, you'll probably get a runtime exception due to undefined module.
I'm doing this in TypeScript, but tried it in vanilla JS as well with the same error. I've pulled down two modules: express and hbs. I'm trying to use the ES6 import syntax like this:
import * as http from 'http';
import * as express from 'express';
import hbs from 'hbs';
The last line gives me an error saying it can't find module hbs. I'm looking right at it... I can see it just fine. However when I replace the line with the older CommonJS syntax:
var hbs = require('hbs');
It works fine... what gives? Still on the learning curve with ES6...
Observation 1... as you have in your other exports, you should either import the whole module with an alias:
import * as hbs from 'hbs';
Or you can choose to import specific exports:
import {thing} from 'hbs';
Observation 2... is hbs a TypeScript module, or a JavaScript one? If it is a JavaScript one (as I believe it may be) you will need to pair it with a definition file, for example hbs.d.ts that describes the JavaScript file. TypeScript won't recognise a plain JavaScript module without the definition.
I was experiecing a similar problem. The syntax is correct ES6 indeed.
Good news is that the problem seems to have been fixed already in the development version of the typescript compiler 0.8: try 'npm install typescript#next -g' and then running the compiler again.
you should use default as the imported module name .
import {default as hbs} from "hbs";
this works same as
var hbs = require('hbs');
because require("hbs") imports default module exported by hbs.