I've created Vue.js 3 project, using Vite.js (no typescript).
My main.js file contains following contents:
import { createApp } from 'vue';
import App from './App.vue';
import * as BABYLON from 'babylonjs';
const app = createApp(App);
app.config.globalProperties.$BABYLON = BABYLON;
app.mount('#app');
My question is: how can I force VSCode to show me available babylon.js methods when I start writing this.$BABYLON. ?
I've already tried adding /// <reference path="../node_modules/babylonjs/babylon.module.d.ts" /> on top of the file, putting babylon.d.js in the root of the project (but as I understand that won't work until I use typescript?) and also tried with installing #types/babylon package via npm.
I would like to keep the project non-typescript and enable this autocomplete feature - unfortunately I've also couldn't find any plugin for vscode that would solve this issue.
I unintentionally updated a good junk of npm packages listed in my package.json file and now I'm experiencing issues importing the FullCalendar package.
Here's what I know:
When I import the Fullcalendar module or any any plugins from the package (e.g. import dayGridPlugin from '#fullcalendar/daygrid), the exported script does not execute. I have not had issues importing other npm packages in other js files. All of my other scripts have not experienced this issue.
JS File:
import * as utils from './utils.js';
import { Calendar } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: .... Nothing happens.
However, If I do not import from #fullcalendar the script behaves as expected.
JS file:
import * as utils from './utils.js';
// import { Calendar } from '#fullcalendar/core';
// import dayGridPlugin from '#fullcalendar/daygrid';
console.log("show me something");
console: show me something
Troubleshooting:
Webpack successfully updates the file after changes via npm run watch
I have confirmed the updated file is loading in the browser
I have tried reverting packages to previous version (e.g. #fullcalendar#4.4.2 - previous version that was working)... same result
Downgraded from webpack 5 -> webpack#4.46.0 ... same result
Checked documentation to ensure I was using fullcalendar v5 correctly after upgrading from v4 - https://fullcalendar.io/docs/initialize-es6
Relevant Version Nunbers
#fullcalendar/core#5.6.0
#fullcalendar/daygrid#5.6.0
#fullcalendar/list#5.6.0
#fullcalendar/timegrid#5.6.0
webpack#4.46.0
I'm really stumped on this one. I'm sure it's due to my limited knowledge of ES6 modules. I appreciate any insight that you can provide. Thanks!
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';
I was using Material UI with React in my project, and I had some troubles when it came to import the material icons. My code is copied from the Material UI (version:"material-ui": "^1.0.0-beta.41",
"material-ui-icons": "^1.0.0-beta.36",)
docs ,just like this:
import SkipPreviousIcon from '#material-ui/icons/SkipPrevious';
import PlayArrowIcon from '#material-ui/icons/PlayArrow';
import SkipNextIcon from '#material-ui/icons/SkipNext';
And I have also run npm install material-icons.
The error in my Chrome console is:
./src/index/musicCard.js Module not found: Can't resolve
'#material-ui/icons/PlayArrow' in
'C:\Users\wenji\Desktop\myblog\src\index'
And I tried this one:
import SkipPreviousIcon from 'material-ui/icons/SkipPrevious';
And this one:
import SkipPreviousIcon from '#material-ui-icons/SkipPrevious';
But it does not make any difference. How can I fix it?
Icons are not part of material-ui/core, so it must be installed using two commands.
If you are using npm:
npm install #material-ui/core
npm install #material-ui/icons
If you are using Yarn:
yarn add #material-ui/core
yarn add #material-ui/icons
The icons module should be added to dependencies.
Use npm
npm install #material-ui/icons
Or use Yarn
yarn add #material-ui/icons
For the latest versions you need
npm install #mui/icons-material
Since Material-UI is now MUI.
And if we need a specific icon, we can get like,
import SkipPreviousIcon from '#mui/icons-material/SkipPrevious';
And here are all available icons.
I just solved a strange (but not so strange after I found out why) issue.
On Mac, it worked, but when I deployed to Linux, it failed and could not find the icon.
This was because on Mac it was not case sensitive and on Linux was.
So
import DeleteForEver from '#material-ui/icons/DeleteForEver'
works on Mac, but it fails on Linux.
The file is actually named like "DeleteForever".
So the correct way to import is:
import DeleteForever from '#material-ui/icons/DeleteForever'
Change the import path from #mui/icons-material/ to #material-ui/icons/
This is not a 100% working solution, as there have been icons I have yet to be able to import (e.g. ConnectWithoutContact)
Regardless, this change has saved me several times so here is an example:
// Initial
import PermContactCalendarIcon from '#mui/icons-material/PermContactCalendar';
// Fixed
import PermContactCalendarIcon from '#material-ui/icons/PermContactCalendar';
Material UI doesn't provide icons from "#material-ui/icons" any more. Instead, you need to import icons from "#mui/icons-material". So, if you are using the latest version and running your project with npm, you need to execute the following command:
npm install #mui/icons-material
If you use Yarn, then run the following:
yarn add #material-ui/icons
Now you are all set to use your Material icon ExampleMaterialIcon like this:
import ExampleMaterialIcon from '#mui/icons-material/ExampleMaterialIcon';
Dependencies:
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "4.11.3",
Example:
import FavoriteIcon from "#material-ui/icons/Favorite";
import ShareIcon from "#material-ui/icons/Share";
<FavoriteIcon
fontSize="large"
style={{ fill: "red", stroke: "red" }}
/>
<ShareIcon fontSize="large" />
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.