I just started experimenting with Nativescript and am using the Playground to test things and see how it works.
What I wanted to do: add the moment.js module for formatting date/time
What I tried:
1. added the moment package. This appears to have worked because Playground now shows the moment folder along with files (package.json, ender.js, moment.js, etc) and subfolders.
2. In my code I used this snippet to require "moment"
var Moment = require("moment");
This failed though because I get an error of
Error: Could not find module 'moment'. Computed path '/var/mobile/Containers/Data/Application/xxxx/Documents/Playground/LiveSync/app/tns_modules/moment'
Any suggestions on what I need to change to get it to find 'moment'? I checked in package.json and it has the name as "moment".
The default require statement will search for the module form the tns_modules directory that was packed with the app during build time. So with Playground you could use relative path.
For example, if you want to use it on app.js which is in the root level,
var Moment = require('./moment');
Related
I had a perfectly working Next.js version 11 site, which used Babel/webpack to get modern "ES Module" syntax: the only require/CommonJS syntax in my whole app was in next.config.js and babel.config.js.
I updated it to Next 12 and it worked great, so I figured I'd try to get rid of those remaining requires, and make my project fully ESM, by adding "type": "module" to my package.json.
That gave me an error about how next.config.js had to use ESM syntax, so I updated it to ESM syntax ... but now I get an error about how Next is (evidently?) using Common JS to import the babel.config.js?
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:
/home/me/project/client/babel.config.js require() of ES modules is not
supported. require() of /home/me/project/client/babel.config.js from
/home/me/project/client/node_modules/next/dist/build/babel/loader/get-config.js
is an ES module file as it is a .js file whose nearest parent
package.json contains "type": "module" which defines all .js files in
that package scope as ES modules. Instead rename babel.config.js to
end in .cjs, change the requiring code to use import(), or remove
"type": "module" from /home/me/project/client/package.json.
Since I'm not in control of Next I don't know how to fix this (and shouldn't Next 12 be importing with ESM by default?) Also my syntax in babel.config.js doesn't seem to even matter: whether I use ESM or Common JS, I get that same error.
Any help would be greatly appreciated.
You're importing Next.js itself as an ES Module which is not supported yet.
See: https://github.com/vercel/next.js/discussions/27876#discussioncomment-1163394
The following code works to load a local, static JSON file:
var stories = require('../stories/stories.json');
Now I want to load a file based on a variable, e.g. do something like this:
var storiesPath = '../stories/stories.json';
var stories = require(storiesPath);
But this triggers an error:
Error: Cannot find module '../stories/stories.json'
at require (packages/modules-runtime.js:123:19)
at meteorInstall.server.main.js (server/main.js:7:15)
Is there any way to get this working? I assume that I could load my file via the Meteor http package instead but I'd rather not add another package if I can avoid it.
Thanks for your hints
Like I said in the comment, you can easily use a variable in a require, e.g.,
> var x = 'fs';
> require(x).readFile
[Function]
So that's not the problem you are dealing with. Are you sure your first case indeed works? It would be surprising. I think you might be running into project file layout issues, due to the use of a relative path. I would stay away from that. And fortunately you can quite easily by using an asset! You can put your json file in private/ in your project folder and then use:
const stories = JSON.parse(Assets.getText('stories.json'));
You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(
Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.
Here is what I have done in my current effort (the latest of many, starting fresh each time):
1) Added to the package.json file: "primeng": "4.1.0-rc.2"
2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.
3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.
Then I hit F5 to run the project, and I got this error:
Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->
So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):
import { FileUploadModule } from 'primeng/primeng';
But got the same exact error.
What am I missing???
Any help would be most appreciated.
I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
rather than like this:
import { FileUploadModule } from 'primeng/primeng';
The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341
This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you #pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(
Some modules just seem to be invisible to Flow. For example I have react-native-overlay installed via npm into my node_modules directory but I get a whole bunch of errors like this from Flow:
[js/components/DatePickerOverlay.js:18
18: let Overlay = require('react-native-overlay');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ react-native-overlay. Required module not found
This module doesn't have types so it would be fine if I could just get Flow to ignore it entirely.
Here's my .flowconfig (based on React Native's one):
https://gist.github.com/almost/20c6caf6d18d0e5c689f
As you can see I'm on flow 0.20.1 and I have module.system=haste (as required by React Native)
I tried adding a //$FlowIgnore comment to the import lines but then Flow complains about an unneeded ignore comment! I also tried creating a react-native-flow.js.flow file with a dummy export which seemed to work at first but then after a flow restart stopped working.
Any ideas for how to either help Flow find this module or make it ignore the import line completely?
Looks like you're ignoring it here: https://gist.github.com/almost/20c6caf6d18d0e5c689f#file-flowconfig-L42-L50
If you don't mind manually typing it up, add a react-native-overlay.js to your interfaces and type up a couple signatures.
This is happening because the library doesn't exist in flow-typed.
A simple fix could be creating the following entry in the .flowconfig file:
[ignore]
<PROJECT_ROOT>/libdefs.js
[libs]
./libdefs.js
If using flowtype < 0.60.0 add in libdefs.js
// #flow
declare module "react-native-overlay" {
declare var exports: any;
}
Or if using flowtype > 0.60.0
declare module 'react-native-overlay' {
declare module.exports: any;
}
Note: any is an unsafe type so you can always take advantage of improve the definition of the library
Hope that helps,
I am having a problem getting iron-router to correctly store and access routes. It appears that Iron.Router is adding an extra slash (/) before the route names, not ignoring case for template names, and not creating a default route.
I am adding Iron.Router to a simple testing app I have that I have split up for separate pages, but I cannot get any page to work as documented either with the map() or route() functions. I have spent hours trying options and searching and I seem to be the only one who ever had this problem. So I set up a minimum project to test. I created a new meteor project, removed the files, then copied basic.js and basic.html from https://github.com/EventedMind/iron-router/tree/devel/examples. All this example does is show three pages when you click between them. I then…
vagrant#precise32:/vagrant/test$ meteor add iron:router
vagrant#precise32:/vagrant/test$ meteor update
This project is already at Meteor 0.9.3.1, the latest release.
Your packages are at their latest compatible versions.
vagrant#precise32:/vagrant/test$ npm version
{ http_parser: '1.0',
node: '0.10.32',
v8: '3.14.5.9',
ares: '1.9.0-DEV',
uv: '0.10.28',
zlib: '1.2.3',
modules: '11',
openssl: '1.0.1i',
npm: '2.1.2' }
vagrant#precise32:/vagrant/test$ ls
basic.html basic.js.
vagrant#precise32:/vagrant/test$ meteor
It started successfully, but threw a JS error on in Chrome (or FF). Exception from Tracker recompute function: Error: Couldn't find a template named "/" or "". Are you sure you defined it? Well yes, I did. Giving the route a blank name generates no error and no home page. So next I tried adding “/one” on the URL. I then get the JS error Error: Oh no! No route found for path: "/one". Next I changed the parameter in my route() call from “/one” to “one” and got this error: Error: Couldn't find a template named “one” or “one”. Are you sure you defined it? I then tried adding explicit code for route “one”: “function() { this.render(“Home”)} to reference the template “Home” using the same case. I got the exact same error message as without the explicit code. The only way I could get page one to display was to changed the name from “One” to “one” in the HTML. I couldn't get the default page to display at all.
When poking around (using Chrome’s console) in some internal variables, I found Router.routes, which has this highly suspicious content:
>Router.routes.forEach( function(v) {console.info("name = '%s', originalPath = '%s', re = '%s'",v.name,v.originalPath,v.re)})
2014-10-04 16:10:07.756 name = '/', originalPath = '//', re = '/^//?$/i'
2014-10-04 16:10:07.757 name = '/one', originalPath = '//one', re = '/^//one/?$/i'
2014-10-04 16:10:07.758 name = '/two', originalPath = '//two', re = '/^//two/?$/i'
(If I name the path "one", then the route will show 'one' as the name, and '/one' as the originalPath.
Details: This is a brand new folder with only these two files in it (and the hidden .meteor folder). The only package added was “iron:router”. I did a meteor update just before my last round of testing (one hour ago). I have set no environment variables. I have the latest version of Chrome & FireFox. I am using VirtualBox via Vagrant from Window 8 with 12G memory. Every other Meteor project I’ve done so far works, (well except for some trying to use jQuery).
If this was a bug in Iron:router, someone else would have noticed, but there are no more settings I can find anywhere that could be adding or subtracting the extra “/” in Iron-Router. Anyone have any ideas of what I need to look for for making a vanilla Iron-Router work with a vanilla Meteor project on my machine?
You are really out of luck because your problem is very simple : you are running examples which are intended to work with the LATEST iron:router#1.0.0-pre3, but your iron:router version is most likely 0.9.4.
Try this :
meteor remove iron:router
meteor add iron:router#1.0.0-pre3
If you want a little more insight, routes used to be declared with name first and path as an option, this is now the contrary.
0.9.4
Router.map(function(){
this.route("home",{
path:"/"
});
});
1.0.0-pre3
Router.route("/",{
name:"home"
});