{"action":"created","issue":{"url":"https://api.github.com/repos/phenomic/phenomic/issues/1057","repository_url":"https://api.github.com/repos/phenomic/phenomic","labels_url":"https://api.github.com/repos/phenomic/phenomic/issues/1057/labels{/name}","comments_url":"https://api.github.com/repos/phenomic/phenomic/issues/1057/comments","events_url":"https://api.github.com/repos/phenomic/phenomic/issues/1057/events","html_url":"https://github.com/phenomic/phenomic/issues/1057","id":233456801,"number":1057,"title":"Adding custom webpack loaders","user":{"login":"kbariotis","id":605742,"avatar_url":"https://avatars3.githubusercontent.com/u/605742?v=3","gravatar_id":"","url":"https://api.github.com/users/kbariotis","html_url":"https://github.com/kbariotis","followers_url":"https://api.github.com/users/kbariotis/followers","following_url":"https://api.github.com/users/kbariotis/following{/other_user}","gists_url":"https://api.github.com/users/kbariotis/gists{/gist_id}","starred_url":"https://api.github.com/users/kbariotis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/kbariotis/subscriptions","organizations_url":"https://api.github.com/users/kbariotis/orgs","repos_url":"https://api.github.com/users/kbariotis/repos","events_url":"https://api.github.com/users/kbariotis/events{/privacy}","received_events_url":"https://api.github.com/users/kbariotis/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":7,"created_at":"2017-06-04T20:15:28Z","updated_at":"2017-06-11T12:40:48Z","closed_at":"2017-06-10T09:19:09Z","body":"I am opening this generic post while my need is to add the `sass-loader`. I am currently trying to migrate my [Ghost theme](github.com/kbariotis/kostasbariotis.com) into phenomic.\r\n\r\nI guess others needs would be possible like adding an image-loader, etc."},"comment":{"url":"https://api.github.com/repos/phenomic/phenomic/issues/comments/307626724","html_url":"https://github.com/phenomic/phenomic/issues/1057#issuecomment-307626724","issue_url":"https://api.github.com/repos/phenomic/phenomic/issues/1057","id":307626724,"user":{"login":"mmintel","id":4574612,"avatar_url":"https://avatars2.githubusercontent.com/u/4574612?v=3","gravatar_id":"","url":"https://api.github.com/users/mmintel","html_url":"https://github.com/mmintel","followers_url":"https://api.github.com/users/mmintel/followers","following_url":"https://api.github.com/users/mmintel/following{/other_user}","gists_url":"https://api.github.com/users/mmintel/gists{/gist_id}","starred_url":"https://api.github.com/users/mmintel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mmintel/subscriptions","organizations_url":"https://api.github.com/users/mmintel/orgs","repos_url":"https://api.github.com/users/mmintel/repos","events_url":"https://api.github.com/users/mmintel/events{/privacy}","received_events_url":"https://api.github.com/users/mmintel/received_events","type":"User","site_admin":false},"created_at":"2017-06-11T12:40:48Z","updated_at":"2017-06-11T12:40:48Z","body":"I have the same issue, I copied the webpack.config you mentioned above and added a file loader for images like so:\r\n\r\n```\r\nimport path from \"path\";\r\n\r\nimport webpack from \"webpack\";\r\nimport ExtractTextPlugin from \"extract-text-webpack-plugin\";\r\n\r\nmodule.exports = (/* config: PhenomicConfig */) => ({\r\n  entry: {\r\n    bundle: [\r\n      process.env.PHENOMIC_ENV !== \"static\" &&\r\n        require.resolve(\"webpack-hot-middleware/client\"),\r\n      process.env.PHENOMIC_ENV !== \"static\" &&\r\n        require.resolve(\"react-hot-loader/patch\"),\r\n      \"./App.js\"\r\n    ].filter(item => item)\r\n  },\r\n  output: {\r\n    publicPath: \"/\",\r\n    path: path.join(process.cwd(), \"dist\"),\r\n    filename: \"[name].js\"\r\n  },\r\n  module: {\r\n    rules: [\r\n      {\r\n        test: /\\.(js|jsx)$/,\r\n        exclude: /node_modules/,\r\n        loader: require.resolve(\"babel-loader\"),\r\n        options: {\r\n          babelrc: false,\r\n          presets: [require.resolve(\"@phenomic/babel-preset\")],\r\n          plugins: [require.resolve(\"react-hot-loader/babel\")]\r\n        }\r\n      },\r\n      {\r\n        test: /\\.(gif|png|jpe?g|svg)$/i,\r\n        loader: require.resolve('file-loader?hash=sha512&digest=hex&name=[hash].[ext]'),\r\n      },\r\n      {\r\n        test: /\\.css$/,\r\n        loader: ExtractTextPlugin.extract({\r\n          fallback: require.resolve(\"style-loader\"),\r\n          use: require.resolve(\"css-loader\")\r\n        })\r\n      }\r\n    ]\r\n  },\r\n  plugins: [\r\n    new ExtractTextPlugin({\r\n      filename: \"styles.css\",\r\n      disable: process.env.PHENOMIC_ENV !== \"static\"\r\n    }),\r\n    process.env.PHENOMIC_ENV !== \"static\" &&\r\n      new webpack.HotModuleReplacementPlugin(),\r\n    process.env.NODE_ENV === \"production\" &&\r\n      new webpack.optimize.UglifyJsPlugin()\r\n  ].filter(item => item),\r\n\r\n  resolve: {\r\n    // react-native(-web) | react-primitives\r\n    extensions: [\".web.js\", \".js\", \".jsx\", \".json\"],\r\n    alias: {\r\n      \"react-native\": \"react-native-web\",\r\n\r\n      // to ensure a single module is used\r\n      react: path.resolve(path.join(process.cwd(), \"node_modules\", \"react\")),\r\n      \"react-dom\": path.resolve(\r\n        path.join(process.cwd(), \"node_modules\", \"react-dom\")\r\n      ),\r\n      \"react-router\": path.resolve(\r\n        path.join(process.cwd(), \"node_modules\", \"react-router\")\r\n      )\r\n    }\r\n  },\r\n\r\n  // eslint-disable-next-line max-len\r\n  // https://github.com/facebookincubator/create-react-app/blob/fbdff9d722d6ce669a090138022c4d3536ae95bb/packages/react-scripts/config/webpack.config.prod.js#L279-L285\r\n  node: {\r\n    fs: \"empty\",\r\n    net: \"empty\",\r\n    tls: \"empty\"\r\n  }\r\n});\r\n```\r\n\r\nhowever I am still getting an error when I try to load a .png file\r\n\r\n```\r\nERROR in ./components/home/avatar.png\r\nModule parse failed: /Users/marcmintel/Projekte/mintel.me/components/home/avatar.png Unexpected character '�' (1:0)\r\nYou may need an appropriate loader to handle this file type.\r\n(Source code omitted for this binary file)\r\n @ ./components/home/index.js 12:14-37\r\n @ ./App.js\r\n @ multi (webpack)-hot-middleware/client.js ./~/react-hot-loader/patch.js ./App.js\r\nwebpack: Failed to compile.\r\n```\r\n\r\nSeems like my config is not applied? "}}
{"actor":{"display_login":"mmintel"}}