react-native@0.64 support

[vjpr]

Tracking pnpm react-native@0.64 support.

Reference

#3015

Upgrading

Useful resources:

• https://react-native-community.github.io/upgrade-helper
  • Built with: https://github.com/react-native-community/rn-diff-purge
  • Easier to view diffs.
• https://github.com/react-native-community/upgrade-support/issues

[vjpr]

1. Bootstrap

Run this command:

npx react-native init MyProject --template react-native-template-typescript

cd MyProject
rm -rf node_modules
pnpm i

Tip: After bootstrapping, build in XCode rather than from terminal

Open ios dir in XCode and build from there first. Makes it easier to see errors. Below is the best way to view all build errors:

You can also view only errors in sidebar if you click the small cross icon in the bottom right of sidebar.

Error: Can't find node

See: https://stackoverflow.com/a/50419734/130910

Error: Error: Cannot find module 'react-native-codegen/package.json'

PhaseScriptExecution [CP-User]\ Generate\ Specs /Users/Vaughan/Library/Developer/Xcode/DerivedData/MyProject-fvrfrhugmrdsnydoarmbbskisfez/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-5EA3672397F530DCF629B883B3CDF69B.sh (in target 'FBReactNativeSpec' from project 'Pods')
    cd /Users/Vaughan/dev/code/pnpm-react-native-example/packages/react-native-v0.64/ios/Pods

...

Error: Cannot find module 'react-native-codegen/package.json'
Require stack:
- /Users/Vaughan/dev/code/pnpm-react-native-example/packages/react-native-v0.64/ios/Pods/[eval]
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1020:15)
    at Function.resolve (internal/modules/cjs/helpers.js:78:19)
    at [eval]:1:45
    at Script.runInThisContext (vm.js:131:20)
    at Object.runInThisContext (vm.js:297:38)
    at Object.<anonymous> ([eval]-wrapper:10:26)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)
    at evalScript (internal/process/execution.js:94:25)
    at internal/main/eval_string.js:23:3 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/Vaughan/dev/code/pnpm-react-native-example/packages/react-native-v0.64/ios/Pods/[eval]'
  ]
}

Command PhaseScriptExecution failed with a nonzero exit code

So a classic bug expecting a flat node_modules structure. If we look at the script that is running...

cat /Users/Vaughan/Library/Developer/Xcode/DerivedData/MyProject-fvrfrhugmrdsnydoarmbbskisfez/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/FBReactNativeSpec.build/Script-5EA3672397F530DCF629B883B3CDF69B.sh
#!/bin/sh
set -o pipefail

bash -l -c 'SRCS_DIR=/Users/Vaughan/dev/code/pnpm-react-native-example/node_modules/.pnpm/react-native@0.64.0_react@17.0.1/node_modules/react-native/scripts/../Libraries CODEGEN_MODULES_OUTPUT_DIR=/Users/Vaughan/dev/code/pnpm-react-native-example/node_modules/.pnpm/react-native@0.64.0_react@17.0.1/node_modules/react-native/scripts/../React/FBReactNativeSpec/FBReactNativeSpec CODEGEN_MODULES_LIBRARY_NAME=FBReactNativeSpec /Users/Vaughan/dev/code/pnpm-react-native-example/node_modules/.pnpm/react-native@0.64.0_react@17.0.1/node_modules/react-native/scripts/generate-specs.sh' 2>&1 | tee "${SCRIPT_OUTPUT_FILE_0}"

...
  CODEGEN_PATH=$("$NODE_BINARY" -e "console.log(require('path').dirname(require.resolve('react-native-codegen/package.json')))")
...

It has been changed as of master already: https://github.com/facebook/react-native/blob/master/scripts/generate-specs.sh

So maybe it will fix itself in future versions...

Error: no member named 'jsi' in namespace 'facebook' and other messages related to FBReactNativeSpec.h

See: react-native-community/upgrade-support#148

Element type is invalid: expected a string

{
  type: 'client_log',
  level: 'error',
  data: [
    'Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.\n' +
      '\n' +
      'This error is located at:\n' +
      '    in RCTView (at View.js:34)\n' +
      '    in View (at AppContainer.js:107)\n' +
      '    in RCTView (at View.js:34)\n' +
      '    in View (at AppContainer.js:134)\n' +
      '    in AppContainer (at renderApplication.js:40)'
  ]
}

Cause

This seems to be caused by my custom resolver script. First, I was getting some SHA-1 error looking for App.json...which doesn't exist but app.json does. When I renamed App.tsx it worked.

Will need to investigate this further.

Update: I think its caused by enhanced-resolve from webpack. See: webpack/webpack#5543

@babel/types/lib/ast-types/generated/index.js:14 + error Unexpected identifier + #import "FBReactNativeSpec.h"

error Unexpected identifier.
/xxx/node_modules/.pnpm/@babel+types@7.13.14/node_modules/@babel/types/lib/ast-types/generated/index.js:14
#import "FBReactNativeSpec.h"
^^^^^^^

SyntaxError: Unexpected identifier
    at Object.compileFunction (vm.js:344:18)
    at wrapSafe (internal/modules/cjs/loader.js:1106:15)
    at Module._compile (internal/modules/cjs/loader.js:1140:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
    at Module.load (internal/modules/cjs/loader.js:1040:32)
    at Function.Module._load (internal/modules/cjs/loader.js:929:14)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/xxx/node_modules/.pnpm/@babel+types@7.13.14/node_modules/@babel/types/lib/index.js:629:19)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)

This is a weird error where the code generator script is overwriting @babel/types/lib/ast-types/generated/index.js. Very strange.

This file should normally be empty.

Happens on other files too.

/xxx/node_modules/.pnpm/@babel+core@7.13.8/node_modules/@babel/core/lib/config/cache-contexts.js

Maybe the cause is somewhere here:

Maybe we will find it here - this is some code that writes to the files.

/xxx/node_modules/.pnpm/react-native-codegen@0.0.7/node_modules/react-native-codegen/lib/generators/RNCodegen.js

function writeMapToFiles(map, outputDir) {
  let success = true;
  map.forEach((contents, fileName) => {
    try {
      const location = path.join(outputDir, fileName);
      const dirName = path.dirname(location);

      if (!fs.existsSync(dirName)) {
        fs.mkdirSync(dirName, {
          recursive: true,
        });
      }

      fs.writeFileSync(location, contents);
    } catch (error) {
      success = false;
      console.error(`Failed to write ${fileName} to ${outputDir}`, error);
    }
  });
  return success;
}

Investigating...

Error: EISDIR: illegal operation on a directory, read

Strange.

Transformer is not a constructor

Wrong worker path.

/xxx/.pnpm/metro@0.59.0/node_modules/metro/src/DeltaBundler/Transformer/getTransformCacheKey.js

const Transformer = require(transformerPath); // <-- check `transformerPath`

  const transformerInstance = new Transformer(
    opts.projectRoot,
    transformerConfig
  );

Set workerPath in config.

The "id" argument must be of type string. Received null

{
  error: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received null
      at validateString (internal/validators.js:121:11)
      at Module.require (internal/modules/cjs/loader.js:1073:3)
      at require (internal/modules/cjs/helpers.js:72:18)
      at /Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.64.0/node_modules/metro/src/Assets.js:333:33
      at Generator.next (<anonymous>)
      at asyncGeneratorStep (/Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.64.0/node_modules/metro/src/Assets.js:75:24)
      at _next (/Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.64.0/node_modules/metro/src/Assets.js:97:9)
      at /Users/Vaughan/dev-mono/thirtyfive/node_modules/.pnpm/metro@0.64.0/node_modules/metro/src/Assets.js:104:7
      at new Promise (<anonymous>) {
    type: 'TransformError',
    lineNumber: 0,
    errors: [ [Object] ]
  },
  type: 'bundling_error'
}

Resolved itself...

.babelrcRoots is not allowed in .babelrc or "extends"ed files, only in root programmatic options, or babel.config.js/config file option

Try running npm start instead of npm run ios.

[rdsedmundo]

Thanks for putting this together.

Another issue that I faced was in the Podfile, it has this:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

The second require doesn't work, because @react-native-community is a transitive dependency of react-native and thus it's located inside the virtual store, outputting:

Invalid `Podfile` file: cannot load such file -- [redacted]/node_modules/@react-native-community/cli-platform-ios/native_modules

My workaround was to point it to use the package inside the virtual store. The problem is that it's a bit clunky because the naming used there is different and includes the version, like @react-native-community+cli-platform-ios@5.0.1-alpha.2, so when react-native updates, this will break again. None of the hoist options seem to prevent this to happen, I tried:

.npmrc

hoist=false
public-hoist-pattern=
hoist-pattern=

And still the react-native dependencies were moved to the .pnpm folder.

[rdsedmundo]

I got stuck in the @babel/types/lib/ast-types/generated/index.js:14 + error Unexpected identifier + #import "FBReactNativeSpec.h" and I don't know how to proceed as this is generated code. I'll just move the RN app out of my workspace and stick with Yarn for it, unfortunately. 😞

[evanjmg]

^ @rdsedmundo can you explain in a little more detail what you did to get around the issue?

[rdsedmundo]

I literally moved the react-native-app out of the pnpm workspace and made it a standalone package, and there I use yarn instead.

pnpm-lock.yaml
pnpm-workspace.yaml
packages/
  a/
  b/
react-native-app/
  yarn.lock
  package.json

pnpm-workspace.yaml

packages:
  - 'packages/**'

[wmonecke]

Hi!

I cant seem to find an answer to this issue. Could anyone point me how they exactly solved this? What did you change?

[vjpr]

@wmonecke Try this https://github.com/vjpr/pnpm-react-native-example

[vjpr]

See: #3740

[vjpr]

Todo

• Test Android