{"id":4051,"date":"2016-05-06T12:31:57","date_gmt":"2016-05-06T12:31:57","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=4051"},"modified":"2016-05-06T12:31:57","modified_gmt":"2016-05-06T12:31:57","slug":"fixing-webpack-error-may-need-appropriate-loader-handle-file-type","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/fixing-webpack-error-may-need-appropriate-loader-handle-file-type\/","title":{"rendered":"Fixing webpack error: &#8220;You may need an appropriate loader to handle this file type.&#8221;"},"content":{"rendered":"<p>When you set up Webpack to load other file types (e.g. Typescript or JSX) you set up a list of rules for how to delegate responsibility for a particular file type.<\/p>\n<p>If you screw this up, you can get errors like this &#8211; in particular, the typescript loader seems to be particularly more sensitive than the babel loader.<\/p>\n<pre lang=\"javascript\">\n\nERROR in .\/data\/talks\/json\/categories.ts\nModule parse failed: D:\\projects\\image-annotation\\data\\talks\\json\\categories.ts Line 1: Unexpected token :\nYou may need an appropriate loader to handle this file type.\n| let data: Object = {\n|   \"History\": {\n|     \"Political History\": {},\n @ .\/src\/lecture_search\/LectureSearchConfig.ts 3:19-62\n<\/pre>\n<p>The section of my webpack.config that fixes this looks like so:<\/p>\n<pre lang=\"javascript\">\n  module: {\n    loaders: [\n      {\n        test: \/(\\.ts|\\.tsx)$\/, \n        loaders: [\"ts-loader\"],\n        include: [path.join(__dirname, \"src\"), path.join(__dirname, \"data\")] \n      },\n      { \n        test: \/\\.css$\/, \n        loader: \"style-loader!css-loader\" \n      },     \n      {\n        test: \/(\\.jsx|\\.js)$\/,\n        loaders: [\"babel\"],\n        include: path.join(__dirname, \"src\")\n      }      \n    ]\n  }\n<\/pre>\n<p>The key thing is that you need both the file extensions and paths for Typescript. If you import something in a file Babel handles, it will just find it, but Typescript will refuse unless you include the path in the &#8220;include&#8221; section (excepting things in node_modules).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Fixing an error importing modules in Typescript files<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[302,324,557,592],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4051"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=4051"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/4051\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=4051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=4051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=4051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}