Encountered the same problem when loading commonjs package via webpack

from formatjs.

It should be fixed with the refactor that we are working on, should be ready in a couple of days.

from formatjs.

Closing this now that we merged in the refactor: #6

from formatjs.

Excited about the refactor but there still seems to be an error. Now when testing the code above I receive:
Uncaught ReferenceError: React is not defined - mixin.js:14

What are the assumptions about how React will be loaded?

from formatjs.

@judholliday in Node.js or in the browser?

Using this package in the browser will require you to first load React onto the page, because it's expecting React to be a global; i.e. window.React.

from formatjs.

@ericf In the browser. The hope was to be able to user requirejs to include react-intl with react as a dependency.

require.config({
  baseUrl: '/dist',
  paths: {
    "react": "/components/react/react",
    "react-intl": "/components/react-intl/dist/react-intl"
  },
  shim: {
    "react-intl": {
      deps: ["react"],
      exports: "ReactIntlMixin"
    }
  }
});

Sounds like that is not an options though.

from formatjs.

@judholliday that is correct, the browser bundle of this library defines a global variable, and it assumes React to be global. You can probably tweak the shim to get a handle of React and set it global as window.React, and that will work.

from formatjs.

1. Is there a package that could be required in both client and server contexts?
2. I am also using a Webpack-based development environment, and it seems to be working so far, at least in Chrome & Firefox. In Safari, I get this mess:

Here's what I’m using to import React & React-Intl:

React = require 'react'
# Assign react to Window so the Chrome React Dev Tools will work.
window.React = React

# Include Format.JS for React
Intl = require 'react-intl'
window.Intl = Intl

from formatjs.

And, obviously, this is because I am lacking a polyfill for Intl, which every current browser but Safari (as of late 2014) has.

from formatjs.

@alanhogan You should be able to do the following:

var ReactIntlMixin = require('react-intl/lib/mixin').default;

This will give you access to the mixin without automatically adding in the locale data for all locales. I'm not sure if that's what you're asking… if not, please open a new issue on this.

As for adding the polyfill to the runtime, see: http://formatjs.io/guide/#patch-runtime

from formatjs.

You can probably tweak the shim to get a handle of React and set it global as window.React, and that will work.

@caridy, no, I believe you cannot. React is an AMD compatible module, which means it invokes define(). Any module that invokes define is in principle not non-AMD-compatible and RequireJS will not invoke any configured init method in its shim (source).

This seems to makes it incredibly tedious to use React & ReactIntl with RequireJS.

from formatjs.

I solved the issue by creating a small utility that simply populates the global variable with the loaded module, by accessing the internals of RequireJS (using a solution suggested on StackOverflow).

requirejs.config({
  shim: {
    "react-globalizer": {
      deps: ["react"]
    },

    "react-intl": {
      deps: ["react-globalizer"],
      exports: "ReactIntl"
    }
});

// react-globalizer.js
(function (window) {
  var r;

  if (typeof requirejs !== "undefined") {
    r = requirejs;
  } else if (typeof require !== "undefined") {
    r = require;
  } else {
    throw "RequireJS is not loaded!";
  }

  window.React = r.s.contexts["_"].defined.react;
})(this);

from formatjs.

thanks for sharing the solution @badeball, we will eventually revisit this to make easier for people to use it with requirejs.

from formatjs.

Struggling with the same here.....@badeball thanks for your tips, did you have to do anything special to get this working with the require.js optimizer? We're on React 0.13.

from formatjs.

@xjamundx, I have unfortunately not tried using it with the require.js optimizer. I'm sure I will eventually though, and may get back to you at that point.

from formatjs.

Okay, I'm sure I'll get it (eventually) and post how I got it to work. Frankly, React could just also solve this by creating a special AMD build that also posted a global

from formatjs.

Okay, I'm sure I'll get it (eventually) and post how I got it to work. Frankly, React could just also solve this by creating a special AMD build that also posted a global

Ideally React offers up ES6 modules and CommonJS for back compat. That way the ES6 modules could be bundled into any format including AMD.

from formatjs.

r.s.contexts["_"].defined is populated asynchronously (there's some setTimeout(fn, 4) type stuff in there, so basically if react-intl is not being fetched over the network your fix won't work. I'm just going to fork react-intl (localy) and add AMD support. If it works well enough I'll post it to github.

r.js solution

Yeah just rename react-intl to react-intl.amd.js and put this at the top:
define(['react'], function(React) {

and change .call(this) to .call(window)

and add return to this line this['ReactIntl'] = src$main$$default; and the line (function() {

from formatjs.

That seems very brittle 😢

from formatjs.

@xjamundx locally adding AMD support is what's working at the moment.

from formatjs.

@adibsaad Yeah it works, but it's lame. I really vote for a properly supported AMD build.

from formatjs.

I really vote for a properly supported AMD build.

The source is ES6 so an AMD build can be derived. Instead of shipping an AMD dist, we'll likely contribute to tools to make sure you can create one. This is the same approach we took for Bowserify/Webpack.

from formatjs.