v3 beta build issues

[CrocoDillon]

I'm getting the following build error when using react-intl@3.0.0-beta.18:

ERROR in main.js from UglifyJs
Unexpected token: operator (>) [main.js:2913,57]

Which is

function utils_escape(str) {
    return ('' + str).replace(UNSAFE_CHARS_REGEX, match => utils_ESCAPED_CHARS[match.charCodeAt(0)]);
}

In addition, starting from react-intl@3.0.0-beta.16 I'm getting this error when running tests (Jest + Enzyme):

    C:\...\node_modules\intl-messageformat\core.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './lib/core';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token export

It's not directly coming from react-intl but at least it's coming from a dependency which is upgraded in react-intl@3.0.0-beta.16.

If these are known issues I'm sorry for creating this bug report.

[leoyli]

Essentially, the intl-messageformat is written in ESM and we need to let Jest to know it need to be transformed for Node. But so far I have no good way to make it work by using transformIgnorePatterns...

[leoyli]

FYI, I finally find what's wrong with my tests:

To fix my tests, I need to do:

• Add the following lines into you jest.config.js:

  const esModules = ['intl-messageformat', 'intl-messageformat-parser'];
  
  module.exports = {
    ...
    // caveat: you node_module path could be hoisted if you got monorepo
    transformIgnorePatterns: [`/node_modules/(?!${esModules.join('|')}).+\\.js$`],
    ...
  };

---

If you are working on monorepo and have .babelrc file like me, you need to do the following extra:

• Rename .bablerc to babel.config.js. (here is why).
  Note. Make sure you have wrap your config around module.exports = { /** your babel configs object **/}.

---

@redonkulus, @DragonRaider5, @longlho,

Maybe we want to mention this in our upgrade guide, I'm pretty sure many people will start to complain on this once v3 come out... I will try to submit a PR once my company's project get fixed.

[CrocoDillon]

Thanks, at least that solved the 2nd issue running tests. I actually tried transformIgnorePatterns before but it didn't work without renaming .babelrc.js to babel.config.js so that's all good now.

But I still have the first issue running a build which makes sense because I set up webpack to not use the babel loader for node_modules. What is the recommended setup here? Strangely enough running a local development server works since the error comes from UglifyJsPlugin specifically. I know that plugin is outdated but don't want to update webpack in the same PR as updating react-intl because the PR is already getting kinda big for a proper review... unless there is no other way of course.

tl;dr webpack.UglifyJsPlugin has issues with arrow functions in react-intl

edit

Solved for now (but if I'm doing it wrong please let me know) by adding react-intl to the webpack rule that uses the babel-loader:

include: [
  path.join(__dirname, "src"),
  path.join(__dirname, "node_modules/react-intl"),
],

[emmenko]

I opened a PR to fix the compilation of core.js to be commonjs. I tested this locally with 3.0.0-beta.18 and it fixes the problem.

#118

[brikou]

By the time you can use this resolution in package.json (assuming you are using yarn):

    "resolutions": {
        "intl-messageformat": "5.0.0"
    }

[emmenko]

Can't react-intl pin the dependency of intl-messageformat to v5.0.0 in the meantime? 🤔

[longlho]

Thanks for submitting the issue. I'll update the Upgrade Guide to account for the ESM module exports. In general ESM/CJS interop is very troublesome (webpack/rollup/parcel/build toolchain do things differently, esp for namespace import) and we're leaning towards exporting ESM only.

[axross]

This problem is not only on module bundlers. This component can be used even on the server as SSR.

[mc-suchecki]

I also encountered similar problem while running Jest + Enzyme tests in my React application. I am using CRA and did not eject, therefore I needed to modify the test script like the following:
"test": "react-scripts test --transformIgnorePatterns \"/node_modules/(?!intl-messageformat|intl-messageformat-parser).+\\.js$\""

CRA does not support to provide this parameter via package.json directly. Package supporters are hesitating to add this support: facebook/create-react-app#2943 (comment)

Are there any plans to fix this to work out of the box?

[mc-suchecki]

Looks like the modification above is not necessary in react-intl@3.1.11, thanks! 👍