Git Product home page Git Product logo

Comments (6)

vishalnarkhede avatar vishalnarkhede commented on June 8, 2024

Hey @AlexUzan ,

this is how your package.json should look like:

{
  "name": "Package Name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    ...
    // Following paths should be relative to your project directory
    "stream-chat-react-native": "link:../stream-chat-react-native/native-package",
    "stream-chat-react-native-core": "link:../stream-chat-react-native"
  },
  "devDependencies": {
    ...
  },
}

Also you will need to blacklist the node_modules directories of stream-chat-react-native folder via metro config to avoid conflict. Here is the metro.config.js file that I have. you will see blacklisted directories on lines 141-146 in following snippet,

/* eslint-env node */
function resolvePath(...parts) {
  const thisPath = PATH.resolve.apply(PATH, parts);
  if (!FS.existsSync(thisPath)) return;

  return FS.realpathSync(thisPath);
}

function isExternalModule(modulePath) {
  return modulePath.substring(0, __dirname.length) !== __dirname;
}

function listDirectories(rootPath, cb) {
  FS.readdirSync(rootPath).forEach(fileName => {
    if (fileName.charAt(0) === '.') return;

    let fullFileName = PATH.join(rootPath, fileName),
      stats = FS.lstatSync(fullFileName),
      symbolic = false;

    if (stats.isSymbolicLink()) {
      fullFileName = resolvePath(fullFileName);
      if (!fullFileName) return;

      stats = FS.lstatSync(fullFileName);

      symbolic = true;
    }

    if (!stats.isDirectory()) return;

    const external = isExternalModule(fullFileName);
    cb({rootPath, symbolic, external, fullFileName, fileName});
  });
}

function buildFullModuleMap(
  moduleRoot,
  mainModuleMap,
  externalModuleMap,
  _alreadyVisited,
  _prefix,
) {
  if (!moduleRoot) return;

  const alreadyVisited = _alreadyVisited || {},
    prefix = _prefix;

  if (alreadyVisited && alreadyVisited.hasOwnProperty(moduleRoot)) return;

  alreadyVisited[moduleRoot] = true;

  listDirectories(
    moduleRoot,
    ({fileName, fullFileName, symbolic, external}) => {
      if (symbolic)
        return buildFullModuleMap(
          resolvePath(fullFileName, 'node_modules'),
          mainModuleMap,
          externalModuleMap,
          alreadyVisited,
        );

      const moduleMap = external ? externalModuleMap : mainModuleMap,
        moduleName = prefix ? PATH.join(prefix, fileName) : fileName;

      if (fileName.charAt(0) !== '@') moduleMap[moduleName] = fullFileName;
      else
        return buildFullModuleMap(
          fullFileName,
          mainModuleMap,
          externalModuleMap,
          alreadyVisited,
          fileName,
        );
    },
  );
}

function buildModuleResolutionMap() {
  const moduleMap = {},
    externalModuleMap = {};

  buildFullModuleMap(baseModulePath, moduleMap, externalModuleMap);

  // Root project modules take precedence over external modules
  return Object.assign({}, externalModuleMap, moduleMap);
}

function findAlernateRoots(
  moduleRoot = baseModulePath,
  alternateRoots = [],
  _alreadyVisited,
) {
  const alreadyVisited = _alreadyVisited || {};
  if (alreadyVisited && alreadyVisited.hasOwnProperty(moduleRoot)) return;

  alreadyVisited[moduleRoot] = true;

  listDirectories(moduleRoot, ({fullFileName, fileName, external}) => {
    if (fileName.charAt(0) !== '@') {
      if (external) alternateRoots.push(fullFileName);
    } else {
      findAlernateRoots(fullFileName, alternateRoots, alreadyVisited);
    }
  });

  return alternateRoots;
}

function getPolyfillHelper() {
  let getPolyfills;

  // Get default react-native polyfills
  try {
    getPolyfills = require('react-native/rn-get-polyfills');
  } catch (e) {
    getPolyfills = () => [];
  }

  // See if project has custom polyfills, if so, include the PATH to them
  try {
    const customPolyfills = require.resolve('./polyfills.js');
    getPolyfills = (function(originalGetPolyfills) {
      return () => originalGetPolyfills().concat(customPolyfills);
    })(getPolyfills);
  } catch (e) {
    //ignore
  }

  return getPolyfills;
}

const PATH = require('path');
const FS = require('fs'),
  blacklist = require('metro-config/src/defaults/blacklist');

const repoDir = PATH.dirname(PATH.dirname(__dirname));

const moduleBlacklist = [
  new RegExp(repoDir + '/projects/stream-chat-react-native/examples/NativeMessaging/.*'),
  new RegExp(repoDir + '/projects/stream-chat-react-native/examples/ExpoMessaging/.*'),
  new RegExp(repoDir + '/projects/stream-chat-react-native/native-package/node_modules/.*'),
  new RegExp(repoDir + '/projects/stream-chat-react-native/expo-package/.*'),
  new RegExp(repoDir + '/projects/stream-chat-react-native/node_modules/.*'),
  ],
  baseModulePath = resolvePath(__dirname, 'node_modules'),
  // watch alternate roots (outside of project root)
  alternateRoots = findAlernateRoots(),
  // build full module map for proper
  // resolution of modules in external roots
  extraNodeModules = buildModuleResolutionMap();

module.exports = {
  resolver: {
    blacklistRE: blacklist(moduleBlacklist),
    extraNodeModules,
    useWatchman: false,
  },
  watchFolders: [PATH.resolve(__dirname)].concat(alternateRoots),
  // transformer: {
  //   babelTransformerPath: require.resolve('./compiler/transformer'),
  // },
  serializer: {
    getPolyfills: getPolyfillHelper(),
  },
};

Hope that helps :)

from stream-chat-react-native.

AlexUzan avatar AlexUzan commented on June 8, 2024

Hi @vishalnarkhede, thank you for your help !
I am having trouble installing the dependencies from a github repo the way you suggested:

"stream-chat-react-native": "https://github.com/MyFork/stream-chat-react-native:../stream-chat-react-native/native-package",
"stream-chat-react-native-core": "https://github.com/MyFork/stream-chat-react-native:../stream-chat-react-native"

Above is what I have right now in my package.json, but yarn does not find it (404 error). From my understanding neither yarn nor npm support linking subdirectories of github repos as dependencies (yarnpkg/yarn#4725).
How do you do it ? Do you have some kind of workaround ?

I found a useful tool allowing to publish packages to github repos the same way you would for npm so I might try this: https://github.com/ramasilveyra/gitpkg

from stream-chat-react-native.

vishalnarkhede avatar vishalnarkhede commented on June 8, 2024

Hey @AlexUzan , for me, I just have clone of these repos on my local machine. So I use them as following for development.

  "dependencies": {
    ...
    // Following paths should be relative to your project directory
    "stream-chat-react-native": "link:../stream-chat-react-native/native-package",
    "stream-chat-react-native-core": "link:../stream-chat-react-native"
  },

And for sample apps, I replace them with their corresponding npm packages

  "dependencies": {
    "stream-chat-react-native": "^0.3.9",
    // don't need to include `stream-chat-react-native-core`, since its already dependency of `stream-chat-react-native`
  },

from stream-chat-react-native.

vishalnarkhede avatar vishalnarkhede commented on June 8, 2024

@AlexUzan Can you give me an update if gitpkg tool worked for you?

from stream-chat-react-native.

AlexUzan avatar AlexUzan commented on June 8, 2024

@vishalnarkhede Yes, gitpkg has been working great for production builds, thank you for your help !

from stream-chat-react-native.

vishalnarkhede avatar vishalnarkhede commented on June 8, 2024

Thanks really great to hear @AlexUzan :)

Closing this issue now!!

from stream-chat-react-native.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.