Develop Reference

Import no longer working after upgrading [chart.js]

I just upgraded from 3.9.1 to 4.0.1 and the import I had previously working no longer works:
import Chart from 'chart.js/dist/chart.min.js';
It looks like the chart.min.js file no longer exists in the node_module. I couldn't find any information about this breaking change on GitHub or in the docs.
Any more information would be helpful, thanks!
I tried changing the import to use a different file but the same error message persists:
Missing "./dist/chart.umd.js" export in "chart.js" package

The reason I was using this method is because I am using the web framework svelte-kit and in the previous version of chart.js import Chart from 'chart.js/auto'; was not working for me due to the build step. I tried it again after upgrading to v4 and it appears to be working now. Thanks!

How to properly import THREE js library?

I installed the three library via npm. In the node_modules directory there is the three folder. But when I wanted to import it using:
import * as THREE from 'three';
it gives the following error:
ReferenceError: regeneratorRuntime is not defined
But when I use;
import * as THREE from 'three/build/three.cjs';
it properly works. Also, the same problem occurs while importing external plugins:
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
How can I fix this?

Three.js uses ES6 async/await, you need to upgrade or configure your babel presets to support async/await.
This may help
Babel 6 regeneratorRuntime is not defined

Make sure that you reference the correct path where your three.module is.
I'd try the following for a script being in the rootForlder/src/theScriptWhereYourImportIs.js:
import * as THREE from '../node_modules/three/build/three.module.js';
If the script is at the same hierarchy level as your node_modules folder then the following should work:
import * as THREE from './node_modules/three/build/three.module.js';
As far as I remember I had to make some trials and figure this out as it was not very clear in the documentation. Any insight will be welcomed.

iView not defined error while trying to import it

I'm trying to import iView UI on my VueJS project with Webpack inside main.js.
import iView from 'iview'
Then:
Vue.use(iView)
And console shows up an error saying
Uncaught ReferenceError: iView is not defined
I added iview plugin by doing npm i iview -D on my project.
Why this isn't working? Any ideas? Maybe some package.json issues? whenever i run npm run dev it compiles everything fine, no errors, no warnings.

Okay, after some hours of attempts, I found out I had two ways of including this lib.
By either doing:
import iView from 'iview/dist/iview'
This one would throw a warning about types not defined for this, but if you do it like so:
const iView = require('iview')
It will work like a charm! Hope this helps to anyone who's under the same situation I was.

ES6 export of a script

I'm using D3 v5 in React and has a visualization that uses v3. I'm using npm modules for the v5 but for v3, I'm trying to import D3 to be used in that visualization.
In my component I have:
import * as d3 from './lib/d3/v3/d3';
and in the d3 folder's d3.js, the minified v3 d3 script:
const d3 = !function(){function n(n){return n&&(n.ownerDocument||n....
export default d3;
butI get the following error:
Failed to compile.
./src/components/d3/NetworkTopology/D3_NetworkTopology.js
Attempted import error: 'behavior' is not exported from './lib/d3/v3/d3' (imported as 'd3').
NetworkTopology.js:
...
const zoom = d3.behavior
.zoom()
"behavior" was removed in v4 so to me it looks like this is pulling the D3 V5 version instead of V3. How can I set this up to use both versions of D3?
I changed the import to:
import d3 from './lib/d3/v3/d3';
but got these compile errors:
Failed to compile.
./src/components/d3/NetworkTopology/lib/d3/v3/d3.js
Line 1: Expected an assignment or function call and instead saw an expression no-unused-expressions
and I get the same error with the original import * as d3 from './lib/d3/v3/d3'; combined with removing the const and export in the d3.js (just use the original minified file).

I don't think this has anything to do with the versions of d3. Your problem is that your script with the minified library has a single export default d3 (an export with the name default bound to a constant with the value of d3), while your component does a namespace import * as d3 which means that d3 will be a module object containing all exports - in your case, only the default one. So d3.default.behaviour could work. But you should just change your import to not use namespace objects but instead have the single value imported directly:
import d3 from './lib/d3/v3/d3';
// which is short for
import { default as d3 } from './lib/d3/v3/d3';

you should update
import d3 from './lib/d3/v3/d3';

While the previous answers got me around the original error in the top portion of my question, by using:
import d3 from './lib/d3/v3/d3
, I ended up getting ES-Lint errors, which I got around by adding
/* eslint-disable */
Howevever, I then got an error caused by Babel inserting "use strict" on the D3 minified code. Since Create React App doesn't allow modification of the Babel configuration without ejecting the application, I was stuck. I thought about putting in a script in the template or an AJAX call to get the D3 script from a CDN, but I'm not sure it would have worked with the two D3 versions in the same app.
What eventually worked was the following. I cloned the earlier version of D3 into a directory at my app's root, then I modified the name in its package.json to be 'd3-v3' and renamed the directory to 'd3-v3'. Scoped npm package naming would have been preferable for the package name.
Then I did a:
npm install file:./d3-v3
From my React component I used the following for D3 v3
import * as d3 from 'd3-v3';
and for v5 used:
import * as d3 from 'd3';

Angular 4 typed.js is not a constructor issue

I am trying to build my new portfolio with Angular 4 but came across few issues.
I first built it with normal html,css and js and worked fine.
I am using typed.js to create an animation at the beginning.
This are the steps that I followed:
1 - in node_modules created folder typed within typed.min.js
2 - angular-cli.json under scripts section "../node_modules/typed/typed.min.js"
3 - in typed component i imported as: import * as typed from
'../../../../node_modules/typed/typed.min.js'; (apparently not working today and the terminal is saying this ERROR in src/app/components/loading-section/loading-section.component.ts(2,24): error TS6143: Module '../../../../node_modules/typed/typed.min.js' was resolved to '/Users/matteosoresini/Development/Portfolio2017/node_modules/typed/typed.min.js', but '--allowJs' is not set. so if i change the path as the terminal says is working but doesn't really make sense but this is not the main issue.
4 - in ngInit i tried to implement the JS function and when run the project the terminal says typed is not a constructor, even if i move the function inside a script within the typed.component.html
can you please help me with this and clarify where to import external plugin?
Thanks

I was able to install typed.js via npm install typed.js --save.
I then tried to use import { Typed } from 'typed.js'; as shown in the typed.js documentation. That threw the not a constructor error.
I changed the import to import * as Typed from 'typed.js'; and it worked for me.

Types.js has no defined typescript types in DefinitelyTyped repo.
I not sure how it would behave with Angular since it does DOM changes outside angular. You can see and try https://github.com/kuflink/angular-typed but it is not production ready.