React-native-paper: Cannot find module 'react-native-paper/babel' when generating production build for android

[devsrv]

Without Expo & Using - "react-native": "0.60.4", "react-native-paper": "^3.0.0-alpha.3",

_babel.config.js--_

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: ['react-native-paper/babel'],
    },
  },
};

when trying to generate APK on windows system getting this error. tried on other projects using RN paper "^3.0.0-alpha.3", got same error

[diegorodriguesvieira]

Any solution? :(

[Trancever]

@satya164 can you check what's happening?

[jayu]

The issue might be related to the fact, that after migration to typescript .js files aren't copied to lib folder. src/babel/index.js is a js file

so there is no
react-native-paper/babel.js
but there is react-native-paper/lib/module/src/babel/index.js

[yonahforst]

I'm using master at commit 403bfd3 and I'm getting the following error:
Cannot find module './lib/module/babel/index.js'

[zyxel648]

I'm manually copying babel.js to the project's node_modules\react-native-paper folder, just for a temporary solution.

[jayu]

@yonahforst It's propably becouse content of the package on npm is different than the content of the repo. You propably don't have lib directory at all. Could you please check that?

[yonahforst]

@jaysbytes yeah that makes sense. Indeed i dont have the lib dir. I'll wait for the next alpha version

[jayu]

Try to build paper inside node modules using yarn prepare. I'm not sure when we are planning to release

[slavikdenis]

@jaysbytes unfortunately it did not worked.

denis@DESKTOP-GS9VKQF MINGW64 /f/repos/inqool/spu/app/node_modules/react-native-paper (master)
$ yarn prepare
yarn run v1.17.3
$ bob build && node ./scripts/generate-mappings.js
ℹ Building target module
ℹ Cleaning up previous build at lib\module
ℹ Compiling 102 files in src with babel
✓ Wrote files to lib\module
ℹ Building target typescript
ℹ Cleaning up previous build at lib\typescript
ℹ Generating type definitions with tsc
✖ Errors found when building definition files.
../../tsconfig.json(6,3): error TS5053: Option 'declaration' cannot be specified with option 'isolatedModules'.
../../tsconfig.json(10,3): error TS5053: Option 'emitDeclarationOnly' cannot be specified with option 'noEmit'.

bob.js build

build files for publishing

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Error: Failed to build definition files.
    at build (F:\repos\inqool\spu\app\node_modules\react-native-paper\node_modules\@react-native-community\bob\lib\targets\typescript.js:63:11)        
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[slavikdenis]

And when I tried the temporary solution @zyxel648 suggested, I run into this issue https://github.com/callstack/react-native-paper/issues/1097

[jayu]

@slavikdenis strange. It looks like bob takes tsconfig.json from your project, not paper directory. Not sure why it happens. Can you check if there is node_modules/react-native-paper/tsconfig.json ?

I'm guessing but maybe you didn't run yarn install inside node_modules/react-native-paper and it uses typescript from your node_modules. But if not, how did you get bob o.O ? It's hard to help without knowing a context.

@Trancever can we release next alpha to help solving this issue

IMO the most secure way (and how I tested my PR with fix) is to

• clone paper repo
• yarn install
• yarn prepare

and then install react-native-paper from the local file system by
yarn add PATH/TO/PAPER

Anyway, It's an alpha version and shouldn't be securely used on production so maybe you don't want to make a release build :P

[slavikdenis]

@jaysbytes no tsconfig.json in node_modules\react-native-paper and I did run yarn install of course 😄

[xXFracXx]

Any solution? Facing the same issue, with the pre-release 3.0.0-alpha.3.
@zyxel648 could you share the babel.js file.

[xXFracXx]

Tried manually adding Babel.js from lib/modules, doesn't work.
Tried yarn install / prepare in the project/node_modules/react-native-paper, doesn't work.
Tried cloning the repo (couldn't find the PR @jaysbytes mentioned and with PR #1305), yarn install / prepare gives an error about missing modules (expo, react-navigation etc.)

I understand it's a alpha build so no pressure, if you do have a solution (as you're not sure when you'll release the next pre-release) please do share. Thank you.

[jayu]

Hi, we released 3.0.0-alpha.4 so please try if it works for you :)

[ripzery]

@jaysbytes
I got this on 3.0.0-alpha.4

error: bundling failed: Error: Cannot find module '../../dist/mappings.json'
Require stack:
- /Users/ripzery/workspace/projects/work/wallet/node_modules/react-native-paper/lib/module/babel/index.js
- /Users/ripzery/workspace/projects/work/wallet/node_modules/react-native-paper/babel.js
- /Users/ripzery/workspace/projects/work/wallet/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/ripzery/workspace/projects/work/wallet/node_modules/@babel/core/lib/config/files/index.js
- /Users/ripzery/workspace/projects/work/wallet/node_modules/@babel/core/lib/index.js
- /Users/ripzery/workspace/projects/work/wallet/node_modules/metro/src/JSTransformer/worker.js
- /Users/ripzery/workspace/projects/work/wallet/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/ripzery/workspace/projects/work/wallet/node_modules/jest-worker/build/workers/processChild.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/ripzery/workspace/projects/work/wallet/node_modules/react-native-paper/lib/module/babel/index.js:1:14)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
 BUNDLE  [android, prod, minified] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1)::ffff:127.0.0.1 - - [09/Sep/2019:09:16:32 +0000] "GET /index.bundle?platform=android&dev=false&minify=true HTTP/1.1" 500 - "-" "okhttp/3.12.1"
 BUNDLE  [android, prod, minified] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

[zyxel648]

Same issue with 3.0.0-alpha.4 as @ripzery

[jayu]

@ripzery @zyxel648 Thanks for the report, we will look into it ASAP

[jayu]

hope this will work finally https://github.com/callstack/react-native-paper/tree/fix/babel-plugin. If you are in a hurry install paper from that branch or disable paper babel plugin in babel config. Without a plugin, your bundle size will be bigger by about 500kb.

[xXFracXx]

This might be slightly off-topic, apologizes for that.
I am installing the suggested branch through _npm install_ directly, using npm install git://github.com/callstack/react-native-paper.git#fix/babel-plugin --save, it's giving the below output.

The main error I can identity is:

npm ERR! prepareGitDep example/src/index.native.tsx(1,25): error TS2307: Cannot find module 'expo'.
npm ERR! prepareGitDep example/src/index.native.tsx(2,30): error TS2307: Cannot find module 'expo-keep-awake'.
npm ERR! prepareGitDep example/src/index.native.tsx(18,39): error TS2307: Cannot find module 'react-navigation'.
npm ERR! prepareGitDep example/src/RootNavigator.native.tsx(2,38): error TS2307: Cannot find module 'react-navigation'.

Whole output:

λ npm install git://github.com/callstack/react-native-paper.git#fix/babel-plugin --save
npm ERR! prepareGitDep 1>
npm ERR! prepareGitDep > [email protected] install C:\Users\User\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-060a8a41\node_modules\husky
npm ERR! prepareGitDep > node husky install
npm ERR! prepareGitDep
npm ERR! prepareGitDep husky > setting up git hooks
npm ERR! prepareGitDep husky > done
npm ERR! prepareGitDep
npm ERR! prepareGitDep > [email protected] postinstall C:\Users\User\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-060a8a41\node_modules\core-js
npm ERR! prepareGitDep > node scripts/postinstall || echo "ignore"
npm ERR! prepareGitDep
npm ERR! prepareGitDep Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
npm ERR! prepareGitDep
npm ERR! prepareGitDep The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
npm ERR! prepareGitDep > https://opencollective.com/core-js
npm ERR! prepareGitDep > https://www.patreon.com/zloirock
npm ERR! prepareGitDep
npm ERR! prepareGitDep Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > [email protected] prepare C:\Users\User\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-060a8a41
npm ERR! prepareGitDep > bob build && node ./scripts/generate-mappings.js
npm ERR! prepareGitDep
npm ERR! prepareGitDep ℹ Building target module
npm ERR! prepareGitDep ℹ Cleaning up previous build at lib\module
npm ERR! prepareGitDep ℹ Compiling 102 files in src with babel
npm ERR! prepareGitDep ✓ Wrote files to lib\module
npm ERR! prepareGitDep ℹ Building target typescript
npm ERR! prepareGitDep ℹ Cleaning up previous build at lib\typescript
npm ERR! prepareGitDep ℹ Generating type definitions with tsc
npm ERR! prepareGitDep ✖ Errors found when building definition files.
npm ERR! prepareGitDep example/src/index.native.tsx(1,25): error TS2307: Cannot find module 'expo'.
npm ERR! prepareGitDep example/src/index.native.tsx(2,30): error TS2307: Cannot find module 'expo-keep-awake'.
npm ERR! prepareGitDep example/src/index.native.tsx(18,39): error TS2307: Cannot find module 'react-navigation'.
npm ERR! prepareGitDep example/src/RootNavigator.native.tsx(2,38): error TS2307: Cannot find module 'react-navigation'.
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: use String.prototype.padStart()
npm ERR! prepareGitDep bob.js build
npm ERR! prepareGitDep
npm ERR! prepareGitDep build files for publishing
npm ERR! prepareGitDep
npm ERR! prepareGitDep Options:
npm ERR! prepareGitDep   --help     Show help                                                 [boolean]
npm ERR! prepareGitDep   --version  Show version number                                       [boolean]
npm ERR! prepareGitDep
npm ERR! prepareGitDep Error: Failed to build definition files.
npm ERR! prepareGitDep     at build (C:\Users\User\AppData\Roaming\npm-cache\_cacache\tmp\git-clone-060a8a41\node_modules\@react-native-community\bob\lib\targets\typescript.js:63:11)
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! [email protected] prepare: `bob build && node ./scripts/generate-mappings.js`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the [email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Any suggestions would be really appreciated, sorry if this is off-topic.

[xXFracXx]

@jaysbytes disable paper babel plugin in babel config worked like a charm, thanks alot.

[jayu]

We released 3.0.0-alpha.5 and successfully build release APK

[slavikdenis]

Works great. Thanks @jaysbytes

[giva9712]

Is there any solution?

When I build my app that is using expo, it shows

Cannot find module 'react-native-paper/babel' from ...

My Dependencies are:

"@eva-design/eva": "^1.3.2",
    "@expo/vector-icons": "^10.0.0",
    "@react-native-community/masked-view": "^0.1.6",
    "@ui-kitten/components": "^4.3.2",
    "@ui-kitten/eva-icons": "^4.3.2",
    "expo": "^35.0.0",
    "lodash": "^4.17.15",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-appearance": "~0.1.0",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.1",
    "react-native-numeric-input": "^1.8.3",
    "react-native-paper": "3.3.0",
    "react-native-pull-to-refresh": "^2.1.3",
    "react-native-safe-area-context": "~0.3.6",
    "react-native-svg": "^11.0.1",
    "react-navigation": "^3.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "toggle-switch-react-native": "^2.1.0"

[vchar00]

I believe that this is already solved, but in my project it gave this error.
The way I solved it was this:

As the tutorial said in babel.config.js
javascript production: { plugins: ['react-native-paper/babel'], },
I switched to:
javascript production: { plugins: ['react-native-paper/babel.js'], },

My version:
json "react-native-paper": "^3.9.0"