I'm trying out a new way to integrate react-intl with NextJS. I've had a lot of problems with the example from the official repo. Basic translations work. But whenever I navigate to a page with a german translation I see this error:
Error: [#formatjs/intl Error MISSING_DATA] Missing locale data for locale: "de" in Intl.DateTimeFormat. Using default locale: "en" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details
at new MissingDataError (/Users/**s/Code/hr-tool/hr-nextjs/node_modules/#formatjs/intl/src/error.js:45:23)
at Object.createIntl (/Users/**/Code/hr-tool/hr-nextjs/node_modules/#formatjs/intl/src/create-intl.js:39:17)
at Object.createIntl (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-intl/src/components/provider.js:59:27)
at new IntlProvider (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-intl/src/components/provider.js:79:27)
at processChild (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3305:14)
at resolve (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
at renderToString (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
at Object.renderPage (/Users/**/Code/hr-tool/hr-nextjs/node_modules/next/dist/next-server/server/render.js:52:851) {
code: 'MISSING_DATA'
The solution is to add polyfill for the language data as described here. But I'm having problems installing the polyfill. The error message won't disappear. The next docs say to apply polyfills as a top-level import in the app.js file. This did not work. I also tried loading the polyfills asynchronously from getInitialProps (also did not work). I'm quite stuck. Maybe you can help.
Related
Goal: To learn how to add an import to a Swift package.
Modus Operandi: Use an Apple-supplied Example as base. Add another import (i.e., Alamofire)
Result: Alamofire does import; but its module "can't be found".
The Package:
The Sources:
Question:
Why is this happening?
What am I missing?
Check the target DeckOfPlayingCards, select the General tab, check Framework, Libraries, and Embedded Contents, make sure Alamofire is on the list
Inside the .target section in your targets section in package.swift file, add your dependencies as like array objects 👇🏻
.target(
name: "DeckOfPlayingCards",
dependencies: ["PlayingCard", "Alamofire"]),
This solved my problem. I was also having the same issue showing No such module "Alamofire". Not only Alamofire but also every other. I forgot to put my dependencies there.
I hope this will help someone sometime.
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');
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. :(
I am working on a website with React.js and asp.net mvc 4, I am planning to use Flux as my front-end architecture, but I met some problems and was very confused about the use of Flux:
In the beginning,I thought Flux would be a perfect front-end architecture in my website,but after I read a lot of articles about Flux, I find that they are nearly all with NodeJs,even the demos from facebook team,that means they all do the rendering stuffs of React.js/Flux code in server side,right? but How can I use Flux in the client side ,I mean in the user's browser?
I am very confused,am I wrong if I treat react.js/flux as a client side solution?If I am not wrong, but why they all use them with NodeJs and ES6(like facebook Dispatcher.js), That's ok in server side,but what about client side ? most of user broswers don't support ES6. I tried using Babel to convert Dispatcher.js from ES6 to ES5,but the es5 version had some errors and didn't work.
And I also found some implements of Flux that claim to support client side,like fluxxor,but I don't have a chance to try it before I write this post,because I am too confused.
I hope someone can help me to figure out these problems.
ps. Sorry for my english,if you don't understand my words,pls let me know , I will explain it.
I think you want :
$ bower install flux
Then you could do something like this (if using require.js):
require(
['bower_components/flux/dist/Flux'],
function(
Flux )
{
var dispatcher = new Flux.Dispatcher();
dispatcher.register(function(payload) {
if (payload.actionType='test') {
console.log('i got a ', payload);
}
});
dispatcher.dispatch({
actionType: 'test',
otherData: { foo: 'bar' }
});
});
(This answer uses : https://bower.io/, https://libraries.io/bower/flux, http://requirejs.org/)
React is a client side library. You can serve a React App with virtual any backend language. The reason a lot of examples are with node is because it is easy and fast to set up.
You should try this tutorial:
https://facebook.github.io/react/docs/getting-started.html
It is pretty straight forward and doesn't require node.
Also maybe you should try starting to serve the React app statically at the beginning to better understand React itself.
ES6 works in Browsers thanks to Babel. If you believe you have any trouble with Babel, you might want to first play around with it's REPL to get a feeling for it: https://babeljs.io/repl/
The idea is that the code can run on the client and server (universal js, used to be called isomorphic javascript (though it goes a little further then that with serverside rendering etc..),
There are many flux implementations reflux is the most promising at this point , im using martyjs (but they stopped the development, it will be taken over by alt) but even for the flux architecture, u just get the dispatcher / event emitter and some ideas :D,
Shorty said u can install the npm packages (flux, react , babel) etc, but u need something like http://browserify.org/(with reactify) or Webpack, to run them in the browser. U don't need to run them on a node js "after its bundled", webpack/browserify will bundle the code so it can used within the browser independently
https://github.com/christianalfoni/flux-react-boilerplate/ <-- ther are some boilerplate, that provide some nice guide on how to bundle the code.
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"
});