{"id":23912,"date":"2019-02-11T12:15:19","date_gmt":"2019-02-11T10:15:19","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=23912"},"modified":"2019-02-11T10:12:07","modified_gmt":"2019-02-11T08:12:07","slug":"sensitive-import-statements-typescript","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/","title":{"rendered":"Case-sensitive import statements in TypeScript"},"content":{"rendered":"\n<p>I ran into a tricky TypeScript build issue with an Angular app that would build successfully on a Windows 10 machine but failed to build on a Linux machine with a \u201cCannot find module\u201d error. The cause of the problem ended up boiling down to a single case-sensitive character, \u201cX\u201d instead of \u201cx\u201d.<\/p>\n\n\n\n<p>When I first encountered the error, I started with the basic and compared my Linux and Windows environments:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Confirmed the source code is identical on both machines<\/li><li>Confirmed the Node and NPM versions are identical<\/li><li>Confirmed the issue occurs even with the most basic build by removing build steps from my NPM script<\/li><\/ul>\n\n\n\n<p>Of course, instead of looking at the obvious my mind starts wandering to more complex causes. Is there something wrong with the NPM cache? I\u2019ll force clean it. Nope, that didn\u2019t do it. Maybe if I enable debug output, I can get additional information about the issue. Nope, nothing helpful here.<\/p>\n\n\n\n<p>After some time, I took a closer look at the import statement:<\/p>\n\n\n\n<div>\n<div id=\"highlighter_270697\" class=\"syntaxhighlighter  c\">\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr>\n<td class=\"gutter\">\n<div class=\"line number1 index0 alt2\">1<\/div>\n<\/td>\n<td class=\"code\">\n<div class=\"container\">\n<div class=\"line number1 index0 alt2\"><code class=\"c plain\">import { Observable } from <\/code><code class=\"c string\">'rxjs\/RX'<\/code><code class=\"c plain\">; .<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n\n\n\n<p>The \u201cRX\u201d didn\u2019t look right, but surely the build wasn\u2019t failing due to case sensitivity. I tried try changing it anyways. Jackpot!<\/p>\n\n\n\n<p>It turns out that import statements are <strong>case-insensitive on Mac and Windows but case-sensitive on Linux.<\/strong> There is a <code>forceConsistentCasingInFileNames<\/code> tsconfig.json compiler option that can help detect these sorts of issues at compile time. In my case, this option had no effect on the build however this could be because the app is still using TypeScript 2.4. There seems to be some fixes related to this compiler option in TypeScript 2.7.2.<\/p>\n\n\n\n<p>If you have been bit by this issue too, you may want to consider adding your feedback to this <a href=\"https:\/\/github.com\/Microsoft\/TypeScript\/issues\/21736\">open suggestion issue 21736 <\/a>on the TypeScript GitHub repository.<\/p>\n\n\n\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>\n<p>Published on Web Code Geeks with permission by Brian De Sousa, partner at our <a href=\"\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"https:\/\/briandesousa.net\/2019\/02\/08\/case-sensitive-import-statements-in-typescript\/\" target=\"_blank\" rel=\"noopener\">Case-sensitive import statements in TypeScript<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>I ran into a tricky TypeScript build issue with an Angular app that would build successfully on a Windows 10 machine but failed to build on a Linux machine with a \u201cCannot find module\u201d error. The cause of the problem ended up boiling down to a single case-sensitive character, \u201cX\u201d instead of \u201cx\u201d. When I &hellip;<\/p>\n","protected":false},"author":141,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[48,76],"class_list":["post-23912","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-angular","tag-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Case-sensitive import statements in TypeScript - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn about import statements? Check our article explaining how to import Case-sensitive statements in TypeScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Case-sensitive import statements in TypeScript - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn about import statements? Check our article explaining how to import Case-sensitive statements in TypeScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2019-02-11T10:15:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian De Sousa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@briandesousa1\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian De Sousa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/\"},\"author\":{\"name\":\"Brian De Sousa\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38\"},\"headline\":\"Case-sensitive import statements in TypeScript\",\"datePublished\":\"2019-02-11T10:15:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/\"},\"wordCount\":331,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"keywords\":[\"angular\",\"TypeScript\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/\",\"name\":\"Case-sensitive import statements in TypeScript - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2019-02-11T10:15:19+00:00\",\"description\":\"Interested to learn about import statements? Check our article explaining how to import Case-sensitive statements in TypeScript\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Case-sensitive import statements in TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38\",\"name\":\"Brian De Sousa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g\",\"caption\":\"Brian De Sousa\"},\"description\":\"Brian De Sousa is a senior software developer working in the financial industry. He has over 10 years of experience developing web applications with a variety of web technologies. He has a passion for developing solutions using the latest and greatest technologies and frameworks.\",\"sameAs\":[\"https:\/\/briandesousa1.wordpress.com\/\",\"https:\/\/www.linkedin.com\/in\/briandesousa?trk=hp-identity-name\",\"https:\/\/x.com\/briandesousa1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/brian-de-sousa\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Case-sensitive import statements in TypeScript - Web Code Geeks - 2026","description":"Interested to learn about import statements? Check our article explaining how to import Case-sensitive statements in TypeScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/","og_locale":"en_US","og_type":"article","og_title":"Case-sensitive import statements in TypeScript - Web Code Geeks - 2026","og_description":"Interested to learn about import statements? Check our article explaining how to import Case-sensitive statements in TypeScript","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2019-02-11T10:15:19+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Brian De Sousa","twitter_card":"summary_large_image","twitter_creator":"@briandesousa1","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Brian De Sousa","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/"},"author":{"name":"Brian De Sousa","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38"},"headline":"Case-sensitive import statements in TypeScript","datePublished":"2019-02-11T10:15:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/"},"wordCount":331,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","keywords":["angular","TypeScript"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/","name":"Case-sensitive import statements in TypeScript - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2019-02-11T10:15:19+00:00","description":"Interested to learn about import statements? Check our article explaining how to import Case-sensitive statements in TypeScript","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/sensitive-import-statements-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Case-sensitive import statements in TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38","name":"Brian De Sousa","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g","caption":"Brian De Sousa"},"description":"Brian De Sousa is a senior software developer working in the financial industry. He has over 10 years of experience developing web applications with a variety of web technologies. He has a passion for developing solutions using the latest and greatest technologies and frameworks.","sameAs":["https:\/\/briandesousa1.wordpress.com\/","https:\/\/www.linkedin.com\/in\/briandesousa?trk=hp-identity-name","https:\/\/x.com\/briandesousa1"],"url":"https:\/\/www.webcodegeeks.com\/author\/brian-de-sousa\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23912","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=23912"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/23912\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=23912"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=23912"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=23912"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}