After upgrading to RC.0, I encountered a build error related to moment.js, even though I had installed it using npm:
[13:44:16] Error: Cannot call a namespace ('moment')
I attempted to reference moment in two different ways:
import * as moment from 'moment';import moment from 'moment'Unfortunately, the error persisted.
Q) What is causing this issue? It was functioning correctly prior to RC.0.
Upon using the syntax
import * as Moment from 'moment';However, switching it to import Moment from 'moment'; successfully fixed the problem.
Make sure to thoroughly review all your project files to ensure that you've implemented the change correctly. It's possible that you may have overlooked one file.
Consider updating the moment-node.d.ts file from
export = moment; to export default moment;
This adjustment will help identify any omitted files. (Remember to revert it back afterward.)
To enable moment in TypeScript, you must include it in the types section of the tsconfig file.
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"typeRoots": [
"../node_modules/@types"
],
"types": [
"moment" <====== THIS
]
},
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
Additionally, don't forget to reference moment in commonjs within @ionic's rollup.config.js file.
var ngTemplate = require('../dist/plugins/ng-template').ngTemplate;
var nodeResolve = require('rollup-plugin-node-resolve');
var commonjs = require('rollup-plugin-commonjs');
// https://github.com/rollup/rollup/wiki/JavaScript-API
var rollupConfig = {
useStrict: false,
/**
* entry: The bundle's starting point. This file will
* be included, along with the minimum necessary code
* from its dependencies
*/
entry: './.tmp/app/main.dev.js',
/**
* sourceMap: If true, a separate sourcemap file will
* be created.
*/
sourceMap: true,
/**
* format: The format of the generated bundle
*/
format: 'iife',
/**
* dest: the output filename for the bundle in the buildDir
*/
dest: 'main.js',
/**
* plugins: Array of plugin objects, or a single plugin object.
* See https://github.com/rollup/rollup/wiki/Plugins for more info.
*/
plugins: [
ngTemplate(),
commonjs({
include: [
'node_modules/moment/**'
]
}),
nodeResolve({
module: true,
jsnext: true,
main: true,
browser: true,
extensions: ['.js']
})
]
};
if (process.env.IONIC_ENV == 'prod') {
// production mode
rollupConfig.entry = '.tmp/app/main.prod.js';
rollupConfig.sourceMap = false;
}
module.exports = rollupConfig;
Here's a technique I used to get moment working with typescript (at version 2.1.6) and rollup (version 0.41.4).
For importing moment, stick with the standard method:
import * as moment from 'moment';import moment from 'moment'; is not recommended for packages without default exports, as it may cause a runtime error:
moment_1.default is not a functionIn typescript, utilize moment by casting it as any and accessing the default function:
var momentFunc = (moment as any).default ? (moment as any).default : moment;
var newFormat = momentFunc(value).format(format);
Using moment(value).format(format) can lead to an error during rollup tree shaking:
Cannot call a namespace ('moment')I have been following this particular tutorial Check out the code snippet below HTML <li *ngFor="let hero of heroes" (click)="onSelect(hero.id)"> <span class="badge">{{hero.id}}</span> {{hero.name}} </li> TS file selectedHer ...
Aspiring to create applications using Ionic 2, I am currently utilizing AngularJS1 with Ionic1. Although I find AngularJs 1 to be more familiar, AngularJS 2 poses a challenge. Is there a method to integrate Ionic 2 with AngularJS 1 seamlessly? ...
Whenever I intentionally use postman to request a wrong product ID, the application crashes. Cause The error is not being caught by my error-handler middleware. Route /* retrieves a single product */ router.get("/:id", async (req: Request, res: Respons ...
I am attempting to launch a React Native project using Expo from this site npm install expo -g expo init AwesomeProject npm start However, when running npm start, I encounter the following error: npm ERR! code SELF_SIGNED_CERT_IN_CHAIN npm ERR! er ...
When I try to run sudo npm install, I encounter an error. Even though npm was previously installed on my server, I attempted to resolve the issue by deleting the package-lock.json file and running npm cache clean --force, but unfortunately, it did not solv ...
I'm encountering issues with my Laravel + Vite + Vue 3 project. I followed the installation instructions in the documentation and everything works fine when the project is separated from Laravel and Vite. However, I'm facing a problem where TypeS ...
Every time I attempt to run npm-install, I encounter the following error message: npm ERR! Windows_NT 6.3.9600 npm ERR! argv "C:\Program Files (x86)\nodejs\node.exe" "C:\Program Files (x8 6)\nodejs\node_modules\npm&b ...
Currently in the process of reorganizing my code and rewriting some TypeScript modules that are anticipated to be utilized by multiple microservices as packages. Encountering an issue with absolute imports enabled by baseUrl in relation to this package co ...
The Mantine accordion requires that its content be of type Accordion.Item, as indicated in the documentation for the children props. This means that even functions returning AccordionItem will not be recognized. Therefore, only AccordionItem(s) created in ...
Recently, I attempted to develop a React TypeScript component using tsdx for compilation and encountered a roadblock while debugging. The package appears to be successfully published and installed without any errors. However, when trying to use it, I consi ...
My goal is to establish a type alias in TypeScript that allows all values which are arrays of Domino pairs, where each pair connects like domino bricks: Pair<A,B> connects with Pair<C,D> only if B = C. For example: const chain1: DominoChain = ...
Seeking a more efficient solution to eliminate redundancy in my code. Currently, I am utilizing useState() for managing user data, which results in repetition due to numerous fields. Below is a snippet of my current code: const [lname, setLast] = useState& ...
Is there a way to replace TS enum with something else for my needs? I specifically require the use of bigint in my enum for bitwise operations. Here's an example of what I'm looking for: enum Perms { None = 0n, Basic = 1n, ... } Then, I want ...
Click here for image descriptionhttps://i.stack.imgur.com/MeyKJ.pngI'm not sure why I am doing this, but it seems like the node js doesn't match the npm version. ...
I have successfully installed Angular CLI 1.5 using the following command: C:\ANGULAR-WORKBENCH>npm install --global @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c6c9cce5948b908b95">[email protect ...
Q) Can someone help me troubleshoot the custom component below to make it resemble a plus sign, inheriting styling from the <ion-buttons> directive? In my navbar, I've included a custom component: <notifications-bell></notifications-be ...
Is there a way to avoid using ts-ignore when using object properties referenced as strings in TypeScript? For example, if I have something like: const myList = ['aaa', 'bbb', 'ccc']; const appContext = {}; for (let i=0; i< ...
Greetings everyone! I'm encountering an issue - the setState function is not functioning in my NextJS + TS application. I attempted using state with ReactHooks, switched the component to classes, but to no avail. Interestingly, when I tested ...
Can someone please guide me on how to sync the 'node_modules' with the current 'package.json' after switching branches in Git? ...
Currently, I am working on a project that involves Python (Flask) backend and React frontend. Here is what I have done so far: I have set NPM_USE_PRODUCTION to true on my AWS instance In the package.json file, I have included these lines: "scri ...