The Create React App community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

How configure react-scripts + jest + TypeScript + ES6?

July 25, 2019 at 8:27am

I have an app created with create-react-app (with --typescript) - let's name it: main-app. This app has a dependency to the package (let's name it: depend-pckg) which was implemented with TypeScript transpiled to JS with target: "es5" and module: "esnext". I;m trying to write a test in main-app that depends on something from depend-pckg, but I'm getting an error like this:

Jest encountered an unexpected token
    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
[...]
Details:
    ...\node_modules\depend-pckg\dist\index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from "./utils/SomethingExported";
                                                                                             ^^^^^^
    SyntaxError: Unexpected token export
    > 1 | import { something} from 'depend-pckg';

I was trying with this:

Put transformIgnorePatterns in jest config in package.json => react-scripts doesn't allow this.
Put transformIgnorePatterns as command line argument to react-scripts => same error.
Put some babel.config.js file in a root => same error.

Does anyone succeeded with configuring this setup?

July 25, 2019 at 9:22am

Brody McKee@mrmckeb

Team

9:22am

@robert-skarzycki

, so the issue you're facing is due to the package not including a CommonJS export. That's the quickest fix here. Is it possible to ask the author to update the package?

The good news here is that Webpack would still use the ES export, and Jest would use CommonJS.

The transformIgnorePatterns option is now allowed in react-scripts, and will be available in the next release (very soon). https://github.com/facebook/create-react-app/commit/e2f43a06a60646f2db00ff0558acb6d2a3355a36#diff-40a56a7d41499eab85303b5e977f9742

July 25, 2019 at 4:00pm

Robert Skarżycki@robert-skarzycki

4:00pm

@mrmckeb

- thanks, it helped! I am an author of this so called depend-pckg, so I was able to switch this to be exported as Common JS. P.S. And good news about transformIgnorePatterns! :)

July 26, 2019 at 8:11am

Brody McKee@mrmckeb

Team

8:11am

No problem! It's a common issue, so while we want to educate the community about the right fix, we also added this in to our Jest config so that people aren't blocked by it - you can't always look in the mirror to meet the repo author ;)

August 8, 2019 at 9:28pm

Deleted

9:28pm

I have a very similar issue but instead of trying to run the tests I'm just trying to run the app itself. The only difference is my dependency does not do any library type exports. What I am thinking is that the dependency is a simple .jsx file that exports a very simple item:

import React from 'react'
export default () => {
  return <div>Hi there from dependency</div>
}

I then import this dependency import Thing from '

@thing

/stuff/index.jsx'. But when I attempt to use it I get the "You may need an appropriate loader to handle this file type" and it points to the return <div line. Locally the same file works fine and I thought that maybe dependencies were compiled in CRA now with one of the PRs.

August 9, 2019 at 12:34pm

Brody McKee@mrmckeb

Team

12:34pm

@kikketer

, when you say that your dependency doesn't export anything - that may be the problem. Can you share a test repository?

August 12, 2019 at 2:45pm

Deleted

2:45pm

Thanks for responding

@mrmckeb

. I discovered that my dependency was exporting esnext which means that the "compiled" dependency was actually still jsx. From what I understand, CRA only compiles dependencies that are at ES5 level. So the output was a difference of return <div> Hi there from depenendency </div> and worked when it was more of the React.createElement style output.

July 2, 2020 at 2:25pm

sunnyofhell@sunnyofhell

2:25pm

How is that switch made exactly ? Does it mean changing module: "esnext" >>> module: "commonJs" in the config file.