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!
Related
Using lit 2.5.0 in combination with vite I run into an issue using the lit build-in directives.
Following the docs I added an import to my lit js component like:
import { when } from 'lit/directives/when';
But when I view the resulting site in the browser I always get a missing package error:
Missing "./directives/when" export in "lit" package
Any suggestions on how to fix this import issue?
You need to include the .js extension as well.
import { when } from 'lit/directives/when.js';
This is needed because that's how it's listed in the "exports" of the package which you can see in the package.json file. https://unpkg.com/lit#2.5.0/package.json
"./directives/when.js": {
"types": "./development/directives/when.d.ts",
"default": "./directives/when.js"
},
Rationale for this is to encourage usage of file extensions in import specifiers so as to not require bloated import maps in the browser to support extensionless imports. Described more in detail https://lit.dev/docs/tools/publishing/#include-file-extensions-in-import-specifiers and https://github.com/WICG/import-maps#extension-less-imports.
I Just created a react app. The npm start seems to work fine but npm run build is constantly failing. I need to run npm run build to deploy it on some website.
Already gone through all posts related to this on stackoverflow.com. But didn't found any working solution.
import './App.css';
import 'https://kit.fontawesome.com/a076d05399.js'
import Navbar from './components/navbar';
import Homepage from './components/homepage';
import Skills from './components/Skills';
import Project from './components/project';
import Contact from './components/contact';
Error Message
Failed to compile.
The target environment doesn't support dynamic import() syntax so it's not possible to use external type 'module' within a script
The problem here was the import statement of an external js file.
import 'https://kit.fontawesome.com/a076d05399.js';
You can add the file in index.html & run build.
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
And yes there's no problem with import statement in css.
#import url("https://cdn.jsdelivr.net/npm/remixicon#2.5.0/fonts/remixicon.css");
In my case, it was failing because using external styles
import "https://unpkg.com/leaflet#1.6.0/dist/leaflet.css";
Fixed with using via npm:
npm i leaflet
import 'leaflet/dist/leaflet.css';
Official docs
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.
CRA works fine on every other browser but displaying blank screen on IE. I have tried installing react-app-polyfill 2.0 and 1.0.6, putting
import "react-app-polyfill/ie11"
import "react-app-polyfill/stable" at the top of src/index.js file. As well as putting "ie 11" in the browserList for dev and prod env. I also removed the .cache file in node_modules and still same error pops up. Here is my code:
package.json file dependencies
paackage.json file browserList
Polyfill imports
Here are the error messages I am getting:
Whole error
'WebSocket'is undefined points to this
'Promise' is undefined error points to this
As we can see that you had already added the react-app-polyfill and added the "ie 11" in the browser list.
I suggest you keep those settings and refer to the steps below.
If this is a newly created app and not working with IE 11 then I suggest you install core-JS using the command npm install core-js and add import 'core-js/stable' on the first line in the index.js file.
The starting of the index.js file should look like below.
import 'core-js/stable';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';
After that delete the .cache folder under node_modules and again try to run the project. It may help you to run it in IE 11.
If your React app was working with IE 11 and you got this issue after adding some code then I suggest you try to provide detailed information about it. It can help us to understand the issue properly.
Thanks for your understanding.
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