Help developing/modifying extension(s)

[pkrogel-kws]

First off, let me just say that I am really excited about this project. My organization produces different applications that all share a core set of features/APIs, and the typical boilerplate strategy has become increasingly difficult to manage. We've been looking for a solution that would let us factor out a configurable/extensible boilerplate into a dependency that we can version and update, and it looks like Roc might be a prime candidate for us.

I've been working on modifying the "roc-package-web-app-react" extension to suit our organization's needs, but am running into an issue. When installing the modified package from a local directory, everything works fine. Obviously, this is not ideal as having to reinstall the extension after every update is slow. When using npm-link, I get errors resolving dependencies defined in the roc extensions (such as react-dom):

ERROR in ../roc-package-web-app-react-mod/extensions/roc-package-web-app-react-dev-mod/~/redbox-react/lib/index.js Module not found: Error: Cannot resolve module 'react' in D:\common_react_base\roc-package-web-app-react-mod\extensions\roc-package-web-app-react-dev-mod\node_modules\redbox-react\lib @ ../roc-package-web-app-react-mod/extensions/roc-package-web-app-react-dev-mod/~/redbox-react/lib/index.js 18:13-29

I'm experienced in building React applications, but this is my first attempt at creating a reusable library that will be housed on NPM and used as a dependency. This may just be an issue with npm link, but since I don't really understand how Roc handles these dependencies, I'm at a loss of how to solve this issue. Any assistance you could provide me would be greatly appreciated.

Extra information: Windows 7 Latest versions of Node/NPM Code can be provided upon request

[dlmr]

Hello! 👋

Awesome to hear that you are looking into Roc and the use case that you mention is precisely what Roc was designed for.

When you say latest version of npm, does that mean version 5? We have been having some problems with it and it could be a good idea for the moment to try 4 instead.

If you haven't checked out /docs/guides/LocalDevelopment.md@master yet I would recommend giving it a look, it might highlight something that has been missed.

[pkrogel-kws]

Thanks for the help, dlmr. Here is a quick update:

Firstly, I had not seen that Local Development guide. I thought I had read all the documentation at least once -- I'm not sure how I missed that one. I went ahead and ran through the steps in that guide, and everything works flawlessly.

Next, I wanted to figure out where I was going wrong in the code I mentioned in my original post. I figured that a good first step would be to rule out anything that may have stemmed from changing the name of the project from the original "roc-package-web-app-react". What I did was pull down the code fresh, and then do a find-and-replace on "roc-package-web-app-react" => "roc-package-orb". After I had changed the name everywhere, I continued with the rest of the steps in the Local Development guide. Everything goes smoothly until I go to run "roc dev" on the "complex" example. While the server does start, and I am able to navigate to the page, I do get "Module not found: Cannot resolve module..." errors in a similar fashion to my original post. What I did find strange is that, with the exception of "react" and "react-dom", all of the modules that erred out are the modules listed in "roc-package-web-app-react-dev\src\roc\index.js" in the "dependencies.exports" configuration variable.

I've created a test case here: https://github.com/pkrogel-kws/roc-package-orb/ You can see my error log in "examples\complex\error-log.txt".

Side note - What OS are you guys developing on?

[dlmr]

Without looking more closely at it right now I assume it might be because of the naming structure you have. I'm referring to that your development package does not have -dev as a suffix which is important for how the internals of Roc works.

Try renaming roc-package-dev-orb to roc-package-orb-dev.

This is what the documentation says about this.

These development packages should be named the same as the non-development version with the addition of a -dev suffix.

For example would a development version of roc-package-web-app be roc-package-web-app-dev. This mainly makes it possible to have the non-development extension in the normal dependencies and the development extension in devDependencies allowing projects to only install what they need for a given situation.

The naming difference also has a technical implication. When Roc is loading extensions it will manage development ones in a specific way in regards too the dependencies that they might export from their Roc object. This to make sure that the non-development extension always will have access to what its development partner exports and have access to itself.

/docs/Extensions.md@master#development-extensions

---

We are primarily using macOS and different distributions of Linux but we want to make sure it works on all platforms.

[pkrogel-kws]

That was absolutely the cause. I updated the test case and my original code--everything works flawlessly now. I'm back to messing with React Router 4, Webpack 3, and shared boilerplate abstraction.

Thank you so much for taking the time to help me out!

[dlmr]

Great to hear!

Since you mentioned Webpack 3 I want to give you a small note/update about it. One piece of the Roc system is a Webpack plugin that manages resolving in Webpack and the current published version is for Webpack 1. I have a local version of this plugin that works with Webpack 2/3 and will try to publish it soon after some touch ups.

[pkrogel-kws]

That would be great! I was just looking into what it would take to run Webpack 2/3 and was a bit intimated. I'm (obviously) still getting the hang of how all of these different pieces of Roc work together. On the plus side, I was able to get React Router 4 working, and then added a action/hook to modify babel settings to compile some of our code that throwing errors with the default settings. I'm really digging Roc!