Unable to resolve thirdparty/moules added from local repository

[srikanthsunkari]

I am trying to intigrate react-native-web with an existing react-native app, I have followed https://github.com/necolas/react-native-web/blob/master/docs/guides/multi-platform-apps.md instructions,

Problem : Unable to resolve thirdparty/moules added from local repository
Description : I have a library which provides me the high level components to my react-native app module. Below is the dependency tree and package.json

	react-native-sdk
		|
		|
		index.js
		package.json
		react-native-sample
			|
			metro.config.js
			babel.config.js
			src
			 |
			 App.js
			 LoadMore.js
			 index.js
			web
			  |
			  webpack.config.json
			index.js
			package.json

react-native-sdk -> index.js

 	index.js will export a component ComponentXYZ.

react-native-sample -> Loadmore.js

   LoadMore will import a component from react-native-sdk.

react-native-sample -> package.json:

{
  "name": "reactNativeSample",
  "version": "1.4.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",    
    "build": "./node_modules/.bin/webpack-cli --config ./web/webpack.config.js",
    "clear_jest": "jest --clearCache",
    "tsc": "tsc"
  },
  "dependencies": {
    "babel-plugin-react-native-web": "^0.11.4",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-native": "0.58.0",
    "react-native-sdk": "file:..",
    "react-native-simple-toast": "0.0.8",
    "react-native-web": "^0.10.0-alpha.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.32.2",
    "webpack-dev-server": "^3.4.1"
  },
  "devDependencies": {
    "@types/enzyme": "^3.1.18",
    "@types/enzyme-adapter-react-16": "^1.0.4",
    "@types/react": "^16.8.3",
    "@types/react-native": "^0.57.36",
    "@types/react-test-renderer": "16.8.1",
    "describe": "^1.2.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "expect": "^24.5.0",
    "it": "^1.1.1",
    "jest-fetch-mock": "^2.1.0",
    "jsdom": "14.0.0",
    "jsdom-global": "3.0.2",
    "react-native-typescript-transformer": "^1.2.11",
    "ts-jest": "^23.10.5",
    "typescript": "^3.3.3",
    "babel-plugin-react-native-web": "^0.9.13",
    "babel-preset-react-native": "^5.0.2",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "23.6.0",
    "babel-loader": "^8.0.5",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
      "\\.(ts|tsx)$": "ts-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.jest.json",
        "diagnostics": {
          "pathRegex": "\\.(spec|test)\\.ts$",
          "warnOnly": true,
          "ignoreCodes": [
            2571,
            6031,
            18003,
            "TS2322"
          ]
        }
      }
    },
    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "node"
    ],
    "modulePaths": [
      "<rootDir>"
    ],
    "setupFiles": [
      "./tests/setup.js"
    ]
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

web/webpack.config.js

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// `node_module`.
const babelLoaderConfiguration = {
  test: /\.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.js'),
    path.resolve(appDirectory, 'src'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled'),
    path.resolve(appDirectory, 'node_modules/react-native-sdk'),    
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: false,
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ['react-native'],
      // Re-write paths to import only the modules needed by the app
      plugins: ['react-native-web',]
    },
  }
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]'
    }
  }
};

module.exports = {
  entry: [
    // load any web API polyfills
    // path.resolve(appDirectory, 'polyfills-web.js'),
    // your web-specific entry file
    path.resolve(appDirectory, 'index.js')
  ],

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  resolve: {
    // This will only alias the exact import "react-native"
    alias: {
      'react-native$': 'react-native-web'
    },
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // `.web.js`.
    extensions: ['.web.js', '.js']
  }
}

babel.config.js

	module.exports = {
	  presets: ['module:metro-react-native-babel-preset'],
	};

metro.config.js

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const path = require('path');
// const blacklist = require('metro').createBlacklist;
const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
    /**
     * Add "global" dependencies for our RN project here so that our local components can resolve their
   * dependencies correctly
   */
  resolver: {
    extraNodeModules: {
      "react-native-mediafirst": path.resolve(__dirname, "node_modules/react-native-mediafirst"),
      "react-native-mediafirst-lib": path.resolve(__dirname, "node_modules/react-native-mediafirst-lib")
    },
    blacklistRE: blacklist([
      /node_modules\/.*\/node_modules\/react-native\/.*/,
      /nodejs-assets\/.*/,
      /android\/.*/,
      /ios\/.*/
    ])
  },
 /**
   * Add our workspace roots so that react native can find the source code for the included packages
   * in the monorepo
   */
  projectRoot: path.resolve(__dirname),
  watchFolders: [
    path.resolve(__dirname, "node_modules/react-native-mediafirst"),
    path.resolve(__dirname, "node_modules/react-native-mediafirst-lib"),
  ]
};

After integrating webpack and react-native-web to react-native-sample doesn't resolve the any component from its dependencies react-native-sdk or any other local repo.

Expected Behavior:
Should be able to run without error when i use any component from react-native-sdk.

Actual Behavior:
I am able to run without error when i won't use react-native-sdk.

Note: Without any native module dependencies

ERROR at build

> mediaFirstUser@1.4.0 build E:\React_Native\react-native-sdk\react-native-sample
> webpack-cli --config ./web/webpack.config.js

Hash: 5e5ce1ea6291e3f3a3b0
Version: webpack 4.32.2
Time: 7894ms
Built at: 05/31/2019 11:30:34 AM
 1 asset
Entrypoint main = bundle.web.js
 [3] ./node_modules/react-native-web/dist/exports/StyleSheet/index.js + 1 modules 1.54 KiB {0} [built]
     |    2 modules
 [4] ./node_modules/react-native-web/dist/exports/View/index.js + 1 modules 5.67 KiB {0} [built]
     |    2 modules
[11] ./node_modules/react-native-web/dist/modules/AccessibilityUtil/index.js + 4 modules 4.17 KiB {0} [built]
     |    5 modules
[13] ./node_modules/react-native-web/dist/modules/applyNativeMethods/index.js + 1 modules 3.25 KiB {0} [built]
     |    2 modules
[17] ./node_modules/react-native-web/dist/exports/createElement/index.js + 2 modules 13.1 KiB {0} [built]
     |    3 modules
[20] ./node_modules/react-native-web/dist/exports/StyleSheet/styleResolver.js + 17 modules 53.8 KiB {0} [built]
     |    18 modules
[40] ./node_modules/react-native-web/dist/exports/View/ViewPropTypes.js + 7 modules 12.1 KiB {0} [built]
     |    8 modules
[49] ./node_modules/react-native-web/dist/exports/Button/index.js + 7 modules 52.7 KiB {0} [built]
     |    8 modules
[64] multi ./index.js 28 bytes {0} [built]
[65] ./index.js 552 bytes {0} [built]
[78] ./src/App.js 6.46 KiB {0} [built]
[88] ./src/loadmore.js 4.18 KiB {0} [built]
[90] ./node_modules/react-native-web/dist/exports/FlatList/index.js + 16 modules 147 KiB {0} [built]
     |    17 modules
[91] ./node_modules/react-native-web/dist/exports/AppRegistry/index.js + 4 modules 9.04 KiB {0} [built]
     |    5 modules
[92] ./node_modules/react-native-web/dist/exports/Image/index.js + 4 modules 20 KiB {0} [built]
     |    5 modules
    + 86 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/Loadmore.js
Module not found: Error: Can't resolve 'react-native-mediafirst' in 'E:\React_Native\react-native-sdk\react-native-sample\src'
 @ ./src/Loadmore.js 1:716-750
 @ ./src/App.js
 @ ./index.js
 @ multi ./index.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mediaFirstUser@1.4.0 build: `webpack-cli --config ./web/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mediaFirstUser@1.4.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Environment:
Windows 10,
Device: browser
Browser: chrome
webpack : "^4.29.0",
webpack-cli : "^3.2.1",
webpack-dev-server : "^3.1.14"
react-native-web : "^0.10.0-alpha.3",
react : "^16.7.0",
react-dom : "^16.7.0",
react-native : "0.58.0",

Any resolution would be most helpful.
Thank you.

[srikanthsunkari]

It seems the problem was with the web pack babel configration regular expression.
Changing this
test: /.js$/,
to
test: /.(ts|tsx|js|jsx)$/,
But after resolving the module issue i have ran into another error saying to use the appropriate loader.

i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from E:\React_Native\react-native-sdk\react-native-sample
× ｢wdm｣: Hash: 7aedd4585c7beddba8f6
Version: webpack 4.32.2
Time: 2621ms
Built at: 05/31/2019 7:03:04 PM
        Asset     Size  Chunks             Chunk Names
bundle.web.js  6.8 MiB    main  [emitted]  main
Entrypoint main = bundle.web.js
[1] multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./index.js 52 bytes {main} [built]
[./index.js] 1.62 KiB {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-native-web/dist/index.js] 8.86 KiB {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/url/url.js] 22.8 KiB {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost] (webpack)-dev-server/client?http://localhost 9.26 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.61 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.27 KiB {main} [built]
[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.11 KiB {main} [built]
    + 302 hidden modules

ERROR in ./src/App.js 8:2
Module parse failed: Unexpected token (8:2)
You may need an appropriate loader to handle this file type.
| 
| const Link = props => (
>   <Text
|     {...props}
|     accessibilityRole="link"
 @ ./index.js 29:0-28 34:54-57
 @ multi ./index.js
i ｢wdm｣: Failed to compile.

[necolas]

Closing as this is a bundler configuration problem and not a code issue. The stack trace is usually helpful, as is TBD stack overflow website for help

[MahmoudShaeer]

+1