error on android run, Unable to resolve module `./responsibleTouchArea`

[SeanFelipe]

Hello! Super excited to find this project :) The idea of doing prototyping + rapid development in the browser, then building for mobile, sounds awesome.

I ran the boilerplate setup, then did react-native run-android and got this error regarding 'responsibleTouchArea'. Sounds like this is a universal ui component of some sort? Actually now looking at your readme I see that it's mentioned.

Just thought I'd file here to start a conversation. I'll keep digging.

Be in touch !

[SeanFelipe]

Error message:

error: bundling failed: Error: Unable to resolve module `./responsibleTouchArea` from `/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/react-universal-ui/dist/components/index.js`: The module `./responsibleTouchArea` could not be found from `/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/react-universal-ui/dist/components/index.js`. Indeed, none of these files exist:

  * `/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/react-universal-ui/dist/components/responsibleTouchArea(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
  * `/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/react-universal-ui/dist/components/responsibleTouchArea/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)`
    at ModuleResolver.resolveDependency (/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:311:1122)
    at ResolutionRequest.resolveDependency (/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:96:16)
    at DependencyGraph.resolveDependency (/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/node-haste/DependencyGraph.js:269:4352)
    at /Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:201:36
    at Generator.next (<anonymous>)
    at step (/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:306)
    at /Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:536
    at new Promise (<anonymous>)
    at /Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:217
    at addDependency (/Users/foobar/stuffs/rn-web/react-universal-ui-boilerplate/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:92)

[SeanFelipe]

looks like there is a node_modules/.../ResponsibleTouchArea.js ... is it just a case problem?

further checking ... looks like src/components/ is lower-case files, but dist/components is upper cased, and somehow code in the dist directory is looking for lower cased files. Thoughts?

[SeanFelipe]

I was able to get the example app to run by changing a lot of the require refs in these directories from lower case to upper case first letters:

node_modules/react-universal-ui/dist/components/
node_modules/react-universal-ui/dist/configs/core/

maybe a PR is in order ?

[cloudle]

Thanks @SeanFelipe, you're correct about "lower case" file name.

And that bug actually fixed in recent react-universal-ui update..

This repo actually deprecated by release of ruui-cli.
(it's currently using react-universal-ui@^0.2.14 which now should be react-universal-ui@^0.9.30 - I'll fix that and also add deprecation note for this repo.)

Also, instead of git-clone this boilerplate.. we could use ruui-cli.. which much cleaner:

npm install -g ruui-cli
# now the `ruui` command ready to use
ruui init SuperCoolProject
cd SuperCoolProject
ruui dev # this launch development server

See more in react-universal-ul github page: here (I've just updated it few hours ago).

[cloudle]

I'm also experimenting way to allow override webpack config using ruui-cli. For now, we could create ruui.configs.js under root of the project generated by the ruui-cli like this:

//ruui.config.js
module.exports = {
	webpack: function(baseConfig, webpack) {
		console.log(baseConfig);
		//mutate or extends baseConfig and return final config in this function..
		return baseConfig;
	},
	dev: function(baseConfig, webpack) {
		console.log(baseConfig);
		//mutate or extends baseConfig and return final config in this function..
		return baseConfig;
	},
	extraVendors: [] // an array of libraries that we want to cache to boost up build speed.
};

[SeanFelipe]

Thanks !

What about the webpack config needs an override? Or is it just a convenience to not have to modify the webpack config manually?