"Can't find variable: n" error on react native production build

[marknelissen]

Description

When using the 4.2.1 version of the library in a react native project, the app crashes on launch with the production build, giving the error "Can't find variable: n". This only happens with the production build, not the development build.

Steps to Reproduce

1. Create react native app with typescript support
2. Add dependency on typesafe-actions 4.2.1
3. Add a reducer making use of getType
4. Execute the production build of the Android application

Expected behavior

The app starts without crashing.

Suggested solution(s)

The error does not occur with the 4.2.0 version, so it is probably the change related to stlib that causes it.

Project Dependencies

• Typesafe-Actions Version: 4.2.1
• TypeScript Version: 3.4.5
• tsconfig.json:

  {
  "compilerOptions": {
  "allowSyntheticDefaultImports": true,
  "esModuleInterop": true,
  "jsx": "react",
  "module": "es6",
  "moduleResolution": "node",
  "noEmit": true,
  "noImplicitAny": true,
  "target": "es6"
  },
  "exclude": ["node_modules"]
  }

Environment (optional)

• React Native: 0.57.8
• OS: Android
• Node Version:
• Package Manager and Version: standard one for react native

[piotrwitek]

Hey @marknelissen First I would need a log with a full call stack.

[piotrwitek]

Or providing a repo with minimal reproduction boilerplate would be the best.

[marknelissen]

Since this happens on the production build, the closest to the call stack I can give you is this extract from the Bugsnag report:

When googling around of the issue, I did stumble upon mentions of similar problems with Babel, when using variable declaration in for loops. I don't exclude that it's a transpiling problem, since somehow the stack stops at the interpretation of getType (in the original source code) and doesn't go deeper.

[piotrwitek]

@marknelissen please show the declaration of actions.storeAnswer with type constant

[marknelissen]

enum StepType { Question = 'QUESTION', Value = 'VALUE' }
interface StepAnswer<T extends StepType> {
...
}

export interface QuestionAnswer extends StepAnswer<StepType.Question> {
...
}

export interface ValueAnswer extends StepAnswer<StepType.Value> {
...
}

type Answer = QuestionAnswer | ValueAnswer;

export const storeAnswer = createAction('data/answer/store', resolve => (
    (answer: Answer) => resolve(answer)
))

As you can see, nothing special.

I'm trying to create a blank repo, but since it only happens on the production build, the application needs to be signed. So I'd have to accord with you for you to be able to do this.

[piotrwitek]

Thanks, yeah that looks fine.

Let's try with minimal repo, let me know how to run the production build in there.

Also could you try with more recent RN version? maybe it's some bug with a build workflow

[marknelissen]

Unfortunately, since we have to support Windows, we cannot upgrade further at this moment with the react native version.

However, the delta is to be searched between the 4.2.0 and 4.2.1, since with the 4.2.0 of typesafe-actions, everything works correctly. Only when upgrading to 4.2.1 does the problem appear.

[marknelissen]

https://github.com/gemsotec/typesafe-action-issue-151

You will have to create yourself a react native environment (if you don't already have one), with all the tooling: https://facebook.github.io/react-native/docs/getting-started.html (follow the steps for react native cli)

I solved the signing config, you can just test with 'npm start'. You first have to start your emulator or connect your android device though.

[piotrwitek]

Sure, thanks a lot!

[gabrielbull]

I also had this issue when upgrading from 4.2.0 to 4.3.0.

[robertying]

Things begun to break on 4.2.1 and only in production bundle. I guess this could be something with Babel.

[piotrwitek]

I'm trying to track it down, I have android dev env setup on my mac but I still need to generate a signing key for a prod build to run it

[piotrwitek]

For more context in 4.2.1 version, I changed a compile target from es5 to es6 in typescript, but I wasn't really expecting much difference. I need to compare diff on the generated output

[piotrwitek]

Ok I guess the reason is the change in tsconfig, I have some troubles with typescript transpilation to es5 because of weird __assign helper not translating to Object.assign, I'm thinking about migrating to rollup-plugin-babel for transpilation any suggestions if that would be a good choice?

[piotrwitek]

Hey @marknelissen, I have just released a new version 4.4.0 which is using babel for code transformation to es5. I believe it should fix your issue, could you please confirm?

[robertying]

@piotrwitek I can confirm the new version works great on Release configuration. Thank you for the effort!

[piotrwitek]

No problem, thanks for confirmation @robertying 👍

[marknelissen]

Sorry for the late replay, I could only test it now. I confirm that it fixes the problem. Good work.