Not working with create-react-app

[tume]

trafficstars

Getting this when trying to create production build:

Failed to minify the code from this file: 
	./node_modules/react-with-async-fonts/dist/font-subscriber.js:3 

Also tried importing from /lib/ directory but then getting: Uncaught TypeError: hoist_non_react_statics_1.default is not a function

[sbekrin]

Hey @tume, thanks for bringing this up! 👋

I assume these are two separate problems:

1. CRA doesn't transpile harmony modules syntax, I'll check how other libraries handles that
2. lib/ version has corrupt reference to hoist-non-react-statics. This is most likely due to allowSyntheticDefaultImports set to true in tsconfig, not sure why this happens but it's definitely a major issue.

I'll take a look on weekend.

[Kronuz]

Did you figure anything about TypeError: hoist_non_react_statics_1.default is not a function ?

I tried removing allowSyntheticDefaultImports and setting it to false, but that didn't fix it...

[sbekrin]

Hey @Kronuz @tume, I'm sorry folks I had no time for this project for a bit of time. I've released v4.0.2 with deps updates, can you please check if issue persist with latest version?

[Kronuz]

The real problem came from here:

https://github.com/sergeybekrin/react-with-async-fonts/blob/8314de50d9726dd8f5726f48c98d5438e2045922/src/with-fonts.tsx#L3

Because hoist-non-react-statics didn't export a default symbol, in older versions it should have been:

import * as hoistStatics from 'hoist-non-react-statics'; 

In hoist-non-react-statics v2.5.5 this default export was fixed, and since that's what react-with-async-fonts v4.0.2 uses, it how should now be working by just upgrading to v4.0.2.

[sbekrin]

@Kronuz ah I see, thanks for digging into that! I'll consider this fixed, but feel free to re-open this issue if it doesn't work for you. Cheers 👍

[ejoo]

I'm getting same issue with Typescript 3.2.2

[sbekrin]

Hey @ejoo, thanks for reporting this one! Would you mind sharing your TS config to help me quickly reproduce that issue?

[ejoo]

@sbekrin I made a quick fix with following code:

import * as hoistStatics from "hoist-non-react-statics";
// quick fix for: https://github.com/sbekrin/react-with-async-fonts/issues/40
const hoistStaticsAny: any = hoistStatics;

Following is my tsconfig

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es6",
    "jsx": "react",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "lib": ["es2015", "es2017", "dom"],
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "components/*": ["src/components/*"],
      "containers/*": ["src/containers/*"],
      "models": ["src/models/index.ts"],
      "utils/*": ["src/utils/*"],
      "helpers/*": ["src/helpers"],
    },
    "typeRoots": ["./node_modules/@types"],
    "types": ["node", "webpack-env", "jest"]
  },
  "typeRoots": ["./node_modules/@types"],
  "types": ["node", "webpack-env", "jest"],
  "noEmit": true,

  "exclude": ["node_modules", "dist"]
}