How to resolve moment-timezone import issue with meteor npm - javascript

I am trying to use the moment-timezone npm package in my meteor app to no avail. If I use the atmosphere package, everything runs just fine. However I would like to get the npm package running as the atmosphere one is no longer being maintained. I have removed the atmosphere package completely from the app before trying to get it running via npm.
When I run meteor npm list --tree, towards the bottom the moment-timezone package and its dependency appear:
└─┬ moment-timezone#0.5.23
└── moment#2.22.2
and meteor npm install gives:
audited 107 packages in 1.913s
found 0 vulnerabilities
In the file where I'm using moment-timezone I have
import moment from 'moment-timezone';
But the javascript console shows it is failing on the import of both moment and moment-timezone:
SyntaxError: Unexpected identifier 'moment'. import call expects
exactly one argument.
Following the console error, these two lines in two separate files are highlighted in red
import moment from 'moment';
import moment from 'moment-timezone';
So it looks to me that it isn't able to resolve the packages, but it appears as if they have been installed correctly and meteor npm install has worked fine.
The app is meteor 1.8
I'm out of ideas - any help would be greatly appreciated!
Cheers

In ES6 use like below
import moment from 'moment';
import 'moment-timezone';
here is you can see Timezone Support

The error 'Unexpected identifier' implies that the import lines haven't been transpiled and your browser doesn't understand them. Have you added the ecmascript atmosphere package to your project?
Once you've added it, the only import you should need is:
import moment from 'moment-timezone';

Related

Error when importing react-native community picker

I'm new to react-native, since I'm using Expo and I had to install react-native community picker, I used the following command to install:
npm install #react-native-community/picker --save
After that I import it like this:
import {Picker} from '#react-native-community/picker';
But I get the following error:
While trying to resolve module `#react-native-community/picker` from file `C:\xampp\htdocs\secondtry\screens\HomeScreen3.js`, the package `C:\xampp\htdocs\secondtry\node_modules\#react-native-community\picker\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\xampp\htdocs\secondtry\node_modules\#react-native-community\picker\js\index.js`. Indeed, none of these files exist:
You need to use expo command for installing:
expo install #react-native-community/picker
Here is doc
The Author renamed the library to #react-native-picker/picker. Please try to use it.
For details see this link.

Error importing component from forked npm package

So, I'm making a small chat tool using react-chat-elements as UI library for chat components. I'd like to modify certain CSS values to match what I want to build without being tied to that specific library the way it is now (it hasn't been updated since 5 months ago).
So what I tried is fork it to my Github account, created the NPM package from it (react-chat-elements-av) without making any changes first to make sure it worked the same way as with the original. However, when I import a specific component from the NPM package I created, say import { MessageBox, SystemMessage } from "react-chat-elements-av";, I get an error saying Attempted import error: 'MessageBox' is not exported from 'react-chat-elements-av'., being the attempted import location: /node_modules/react-chat-elements-av/index.
Now, if I import those two components from the original NPM package, import { MessageBox, SystemMessage } from "react-chat-elements";, everything works and the import location is a bit different: /node_modules/react-chat-elements/dist/main.
Is there something I'm missing on the creation of that dist directory when doing npm install react-chat-elements-av? I literally forked the original repo, and created the NPM package with it, no changes made to any webpack config or so.
Any idea what could be happening here?
Thanks in advance!
The dist repository is for production grade code after it has been built. It's the distribution file. try seeing how they have built their library by running npm run build once you've downloaded it.

Why I get import declarations issues with yeoman and knockout generator?

SyntaxError: import declarations may only appear at top level of a module with Yeoman.
I installed Yeoman and generator-ko for knockoutjs. I must say I never used Yeoman before but I heard it's a magic wand for frontend developments.
Steps I did:
sudo npm i -g yo bower http-server
sudo npm i -g generator-ko
mkdir testing && cd testing && npm init
yo ko
http-server src
In the browser's console I get:
SyntaxError: import declarations may only appear at top level of a module
From a file called startup.js which looks like:
import 'jquery';
import 'bootstrap';
import ko from 'knockout';
import 'knockout-projections'
import * as router from './router';
The package generator-ko looks a bit outdated (2 years old) would that be the issue here? If so, which package should I use then to start using knockoutjs?
EDIT: I tried with classical-ko which is more recent (~6 months) and I get the same error :/ ARG)
Now I feel stupid, in the demo I watched the guy was calling http-server but I had to actually call gulp serve:dist or gulp serve:src.
Sorry for wasted time.

How to install office-ui-fabric-react into an existing MVC project?

We've started to build an application and came to decide we want to integrate it with office-ui-fabric-react. I know how to install packages using npm ..., I just have no idea where to install both NodeJs & gulp.
I have a repository called Relationize, in that repository I have a folder to my Api and to my web application(here is also my package-lock.json located).
In here I don't know if it should either be in the root where my project file is or in my wwwroot (as said it should be in your root). But when I ran all 3 commands: npm i -S nodejs, npm install --global gulp-cli and eventually npm --save install office-ui-fabric-react to install the office package.
When I try to add a component in a seperate javascript file to just test if it works(just copied the code from #Microsoft:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
const MyPage = () => (<Fabric><DefaultButton>I am a button.</DefaultButton></Fabric>);
ReactDOM.render(<MyPage />, document.body.firstChild);
It gives an error:
Uncaught SyntaxError: Unexpected token import
Does anyone have an understandable guide on how to implement this in an existing project or someone who wants to spend some time helping me to implement it?
Thanks in advance!
Perhaps you are missing the ecosystem of build tools to transform your js file into something that is understood by your browser e.g. babel, webpack and the like? It's possible that your browser understands the latest module syntax though...
There is a good example program at: https://medium.com/#gmonne/simple-app-layout-with-office-ui-fabric-react-2eac6361e1b4. There are other examples.

How to use redux-undo module in meteor

I'm using meteor. I'd like to use redux-undo to develope
I have installed like this
meteor npm install redux-undo
And use
import undoable, { ActionCreators } from 'redux-undo';
The meteor always shows this errors
Cannot find module 'redux-undo'
However, I install the redux module and import as above, it works well. :(
Some one help me, thanks so much!

Categories