'Plugin/Preset files are not allowed to export objects, only functions' when importing JS files

[danielkcz]

Is this a bug report?

Yes.

Environment

1. npm ls react-scripts-ts (if you haven’t ejected): 2.16.0
2. node -v: 10.4.1
3. npm -v: 6.1.0
4. yarn --version (if you use Yarn): 1.7.0

Then, specify:

1. Operating system: Windows 10 x64

Steps to Reproduce

Here is the repo with reproduction: https://github.com/FredyC/lingui-typescript-cra

Install with Yarn and yarn start. It's not ejected.

Expected Behavior

Importing JS files should work. I am assuming this is something in this fork since original CRA works with JS files just fine.

Actual Behavior

I am using Lingui project for a localization of the app. The output of that project is compiled JS files. When I try to import these files into the app, it fails with the error.

./src/locale/en/messages.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\workspace\github\lingui-typescript-cra\node_modules\babel-preset-react-app\index.js
    at Array.map (<anonymous>)

That file is indeed exporting object, but there is no reason why it would consider that as a plugin/preset file. The same thing happens when I create a simple JS file like this. It's exporting a function and yet it's wrong.

module.exports = function() {
  console.log(arguments)
}

[DorianGrey]

This sounds weird, indeed, though the error is correct - the currently referenced version of babel-preset-react-app (3.1.2, from the master branch) does not work properly with babel 7. There is already a fixed version on the next branch of CRA, yet this one is not yet released.
Simplified, the problem occurs since mixed major versions of babel are in use.

See:
https://github.com/facebook/create-react-app/blob/next/packages/babel-preset-react-app/index.js
vs.
https://github.com/facebook/create-react-app/blob/master/packages/babel-preset-react-app/index.js

You can get rid of this error using "babel-core": "6.26.3" instead (for now).
In addition, you will need to pin @types/react at 16.3.14, since @types/lingui__core (somehow) forcefully depends on it. This will make your app at least compile and start, but will leave you with a blank page, but two warnings in the console:

Message catalog for locale "cs" not loaded.

@lingui/babel-preset-react is probably missing in babel config, but you are using <Trans> component in a way which requires it. Either don't use children in <Trans> component or configure babel to load @lingui/babel-preset-react preset. See tutorial for more info: https://l.lingui.io/tutorial-i18n-react

Their docs mention that they for using the library with typescript, you'll need to chain typescript and babel (or use the typescript transform, but that is only available on babel 7) so that the latter processes the jsx markup. Unfortunately, neither is configured or at least configurable in CRA or CRA-TS. So it might be a better option to eject, or use a custom setup.

[danielkcz]

Thanks, you for the response. I was so happy when I left Babel world, it's so complicated (unnecessarily imo). However, Typescript is still lacking on the field of making plugins so it's kinda inevitable :/ At this point, I think I will rename those generated JS files to TS and exclude them from typescript rather than fiddling with a configuration that's already working for me.

[DorianGrey]

Just a note: Typescript supports custom transformers, but only via using its API, not via configuration file. It's just that aren't that much transformers available, since using babel for that purpose was already widely adopted before that feature was added.

Besides, babel allows are more fine-grained transformation of the code by default (e.g. via the preset-env plugin), while typescript only allows to target particular ES versions (or your custom transformer has to take of the details). I've seen quite a lot of projects where typescript and babel have been chained via webpack, especially when trying to provide a modern build mode. Those cases might reduce with the typescript-preset available for babel v7, though.