{"action":"created","issue":{"url":"https://api.github.com/repos/faceyspacey/react-universal-component/issues/33","repository_url":"https://api.github.com/repos/faceyspacey/react-universal-component","labels_url":"https://api.github.com/repos/faceyspacey/react-universal-component/issues/33/labels{/name}","comments_url":"https://api.github.com/repos/faceyspacey/react-universal-component/issues/33/comments","events_url":"https://api.github.com/repos/faceyspacey/react-universal-component/issues/33/events","html_url":"https://github.com/faceyspacey/react-universal-component/issues/33","id":254025652,"number":33,"title":"Better dynamic pathing","user":{"login":"shomanishikawa","id":276038,"avatar_url":"https://avatars3.githubusercontent.com/u/276038?v=4","gravatar_id":"","url":"https://api.github.com/users/shomanishikawa","html_url":"https://github.com/shomanishikawa","followers_url":"https://api.github.com/users/shomanishikawa/followers","following_url":"https://api.github.com/users/shomanishikawa/following{/other_user}","gists_url":"https://api.github.com/users/shomanishikawa/gists{/gist_id}","starred_url":"https://api.github.com/users/shomanishikawa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shomanishikawa/subscriptions","organizations_url":"https://api.github.com/users/shomanishikawa/orgs","repos_url":"https://api.github.com/users/shomanishikawa/repos","events_url":"https://api.github.com/users/shomanishikawa/events{/privacy}","received_events_url":"https://api.github.com/users/shomanishikawa/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":4,"created_at":"2017-08-30T14:44:09Z","updated_at":"2018-02-13T15:56:51Z","closed_at":"2017-08-30T21:32:20Z","author_association":"NONE","body":"We have a large app with many components, and would like to create a directory for each one.\r\n\r\nSomething like `/components/hero/index.js` or `/components/hero/hero.js` (preferred)\r\n\r\nUnfortunately when we run something like the following:\r\n\r\n```javascript\r\nconst UniversalComponent = universal((props) => {\r\n  return import(`src/components/${props.type}/${props.type}`)\r\n});\r\n```\r\n\r\nwebpack names the chunk `src/components/hero-hero`, so ssr breaks. I saw a related issue about this, and it seems to be an issue on webpack's side - (https://github.com/webpack/webpack/issues/5575)\r\n\r\nCurrently, because our folder structure will be consistent, we are thinking of changing the line you referenced in the webpack issue (https://github.com/faceyspacey/webpack-flush-chunks/blob/master/src/flushChunks.js#L206):\r\n\r\n```javascript\r\nconst chunk = assets[chunkName] || assets[chunkName + '-']\r\n```\r\nto something like:\r\n```javascript\r\n// replace last instance of `/` with a `-`\r\n// (not actual implementation. just base example)\r\nchunkName = chunkName.replace(/\\/([^/]*)$/,'-'+'$1');\r\nconst chunk = assets[chunkName] || assets[chunkName + '-']\r\n```\r\n\r\nwhile this works, we realize how janky it is and don't want to rely on it.\r\n\r\nIs there any way we can accomplish a more organized app architecture with each dynamic component being housed in its own directory?\r\n"},"comment":{"url":"https://api.github.com/repos/faceyspacey/react-universal-component/issues/comments/365310475","html_url":"https://github.com/faceyspacey/react-universal-component/issues/33#issuecomment-365310475","issue_url":"https://api.github.com/repos/faceyspacey/react-universal-component/issues/33","id":365310475,"user":{"login":"joaovieira","id":474603,"avatar_url":"https://avatars0.githubusercontent.com/u/474603?v=4","gravatar_id":"","url":"https://api.github.com/users/joaovieira","html_url":"https://github.com/joaovieira","followers_url":"https://api.github.com/users/joaovieira/followers","following_url":"https://api.github.com/users/joaovieira/following{/other_user}","gists_url":"https://api.github.com/users/joaovieira/gists{/gist_id}","starred_url":"https://api.github.com/users/joaovieira/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/joaovieira/subscriptions","organizations_url":"https://api.github.com/users/joaovieira/orgs","repos_url":"https://api.github.com/users/joaovieira/repos","events_url":"https://api.github.com/users/joaovieira/events{/privacy}","received_events_url":"https://api.github.com/users/joaovieira/received_events","type":"User","site_admin":false},"created_at":"2018-02-13T15:56:51Z","updated_at":"2018-02-13T15:56:51Z","author_association":"NONE","body":"Did not know of that `ContextReplacementPlugin`! Was doing the same thing (separate folders) before, but after some tries I managed to keep everything in a single folder:\r\n\r\n```\r\n/modules/a/index.js\r\n/modules/a/components/**/*\r\n/modules/a/reducer.js\r\n...\r\n/modules/b/index.js\r\n/modules/b/components/**/*\r\n/modules/b/reducer.js\r\n...\r\n/modules/c/index.js\r\n/modules/c/components/**/*\r\n/modules/c/reducer.js\r\n...\r\n```\r\n\r\nWith a dynamic import like:\r\n\r\n```js\r\nconst async = moduleName => import(`./modules/${moduleName}`);\r\n```\r\n\r\nAnd webpack config:\r\n\r\n```js\r\nnew webpack.ContextReplacementPlugin(/modules/, /^\\.\\/[^\\/]*$/)\r\n```\r\n\r\nThat basically says to only match the top level path, which automatically defaults to `./index.js`. I.e.:\r\n\r\nGiven the folder:\r\n\r\n```\r\n/modules/a/index.js\r\n/modules/a/components/**/*\r\n/modules/a/reducer.js\r\n```\r\n\r\nit only matches `.a`, which resolves to `.a/index.js`"}}
{"actor":{"display_login":"joaovieira"}}