diff --git a/README.md b/README.md
index 11d38a462..d512cd88d 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,10 @@ The output of `genType` can be configured by using one of 3 back-ends: `untyped`
 # Project status.
 See [Changes.md](Changes.md) for a complete list of features, fixes, and changes for each release.
 
+> **Breaking Change:** From version 1.0.0, the extension of generated files is `.gen.tsx` (and `.gen.js`) instead of `.tsx` (and `.re.js`). You might need to adjust the argument of `@bs.module` when importing values and components to reflect this.
+Alternatively, to keep the old and now deprecated extensions, the extension of generated files is configurable by specifying `"generatedFileExtension"` in the `"gentypeconfig"` section of `bsconfig.json`. (The extension used in versions 0.XX.0 was `""` for TypeScript and `".re"` for Flow/Untyped).
+
+
 > **Disclaimer:** While most of the feature set is complete, the project is still growing and changing based on feedback. It is possible that the workflow will change in future.
 
 # Requirements
@@ -70,9 +74,9 @@ Configure your shim files in your `"gentypeconfig"` in [`bsconfig.json`](example
 
 ## Testing the whole setup
 
-Open any relevant `*.re` file and add `[@genType]` annotations to any bindings / values / functions to be used from JavaScript. If an annotated value uses a type, the type must be annotated too. See e.g. [Component1.re](examples/reason-react-example/src/basics/Component1.re).
+Open any relevant `*.re` file and add `[@genType]` annotations to any bindings / values / functions to be used from JavaScript. If an annotated value uses a type, the type must be annotated too. See e.g. [ReasonComponent.re](examples/typescript-react-example/src/ReasonComponent.re).
 
-Save the file and rebuild the project with BuckleScript. You should now see a `*.re.js` file with the same name (e.g. `MyComponent.re` -> `MyComponent.re.js`).
+Save the file and rebuild the project with BuckleScript. You should now see a `*.gen.tsx` (for TypeScript, or `*.gen.js` for Flow) file with the same name (e.g. `MyComponent.re` -> `MyComponent.gen.tsx`).
 
 # Examples
 
@@ -121,7 +125,7 @@ To import a function `realValue` from  JS module `MyMath.ts` (or `MyMath.js`):
 
 ```reason
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue"] /* Or "./WrapJsValue.re" for Flow/untyped. */
+[@bs.module "./WrapJsValue.gen"] /* Always the name of the current file plus ".gen". */
 /* Name and type of the JS value to import. */
 external realValue: complexNumber => float = "";
 
@@ -129,7 +133,7 @@ external realValue: complexNumber => float = "";
 
 Because of the `external` keyword, it's clear from context that this is an import, so you can also just use `@genType` and omit `.import`.
 
-**NOTE** The argument of `@bs.module` is different for the "typescript" and the "flow"/"untyped" back-ends. And must always be the name of the current file (In future, with compiler support, this could be automatically generated).
+**NOTE** The argument of `@bs.module`must always be the name of the current file plus `.gen` (In future, this could be automatically generated).
 
 ### Export and Import React Components
 
@@ -149,7 +153,7 @@ To import and wrap a ReactJS component for use by ReasonReact, the type of the `
 
 ```reason
 [@genType.import "./MyBanner"] /* Module with the JS component to be wrapped. */
-[@bs.module "./MyBannerWrapper"] /* Or "./MyBannerWrapper.re" for Flow/untyped. */
+[@bs.module "./MyBannerWrapper.gen"] /* Always the name of the current file plus ".gen". */
 /* The make function will be automatically generated from the types below. */
 external make:
   (~show: bool, ~message: option(message)=?, 'a) =>
@@ -163,7 +167,8 @@ external make:
 
 The type of `make` must have a named argument for each prop in the JS component. Optional props have option type. The `make` function will be generated by `genType`.
 
-**NOTE** The argument of `@bs.module` is different for the "typescript" and the "flow"/"untyped" back-ends.
+**NOTE** The argument of `@bs.module`must always be the name of the current file plus `.gen` (In future, this could be automatically generated).
+
 
 ### Type Expansion and @genType.opaque
 If an exported type `persons` references other types in its definition, those types are also exported by default, as long as they are defined in the same file:
diff --git a/examples/reason-react-example/clean.js b/examples/reason-react-example/clean.js
new file mode 100644
index 000000000..6daa9b73d
--- /dev/null
+++ b/examples/reason-react-example/clean.js
@@ -0,0 +1,18 @@
+const glob = require("glob");
+const fs = require("fs");
+const child_process = require("child_process");
+
+glob.glob("src/**/*.bs.js", function(er, files) {
+  files.forEach(fileBsJs => {
+    const fileTsx = fileBsJs.substring(0, fileBsJs.length - 6) + ".gen.js";
+    fs.unlink(fileTsx, err => {
+      return;
+    });
+  });
+});
+
+const isWindows = /^win/i.test(process.platform);
+
+child_process
+  .spawn("bsb", ["-clean-world"], { stdio: "inherit", stderr: "inherit", shell: isWindows })
+  .on("exit", code => process.exit(code));
diff --git a/examples/reason-react-example/package-lock.json b/examples/reason-react-example/package-lock.json
index b79016524..a0c3886fd 100644
--- a/examples/reason-react-example/package-lock.json
+++ b/examples/reason-react-example/package-lock.json
@@ -1241,7 +1241,8 @@
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
+      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+      "dev": true
     },
     "binary-extensions": {
       "version": "1.12.0",
@@ -1960,7 +1961,8 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+      "dev": true
     },
     "encoding": {
       "version": "0.1.12",
@@ -2171,14 +2173,6 @@
         }
       }
     },
-    "extension-replace-loader": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/extension-replace-loader/-/extension-replace-loader-0.0.1.tgz",
-      "integrity": "sha1-nfqEf2vdlMyc8Rq3IizFEil6aI4=",
-      "requires": {
-        "loader-utils": "^0.2.14"
-      }
-    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -3446,7 +3440,8 @@
     "json5": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+      "dev": true
     },
     "kind-of": {
       "version": "6.0.2",
@@ -3481,17 +3476,6 @@
       "integrity": "sha512-By6ZFY7ETWOc9RFaAIb23IjJVcM4dvJC/N57nmdz9RSkMXvAXGI7SyVlAw3v8vjtDRlqThgVDVmTnr9fqMlxkw==",
       "dev": true
     },
-    "loader-utils": {
-      "version": "0.2.17",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-      "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
-      "requires": {
-        "big.js": "^3.1.3",
-        "emojis-list": "^2.0.0",
-        "json5": "^0.5.0",
-        "object-assign": "^4.0.1"
-      }
-    },
     "locate-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
diff --git a/examples/reason-react-example/package.json b/examples/reason-react-example/package.json
index 7efd2361b..2ec27ee90 100644
--- a/examples/reason-react-example/package.json
+++ b/examples/reason-react-example/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build": "node ../run_bsb.js -make-world",
     "start": "node ../run_bsb.js -make-world -w",
-    "clean": "bsb -clean-world",
+    "clean": "node clean.js",
     "test": "exit 0",
     "webpack": "webpack -w",
     "webpack:production": "webpack --env.NODE_ENV=production"
@@ -16,7 +16,6 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "extension-replace-loader": "^0.0.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "reason-react": "^0.5.3"
diff --git a/examples/reason-react-example/src/FirstClassModules.re.js b/examples/reason-react-example/src/FirstClassModules.gen.js
similarity index 100%
rename from examples/reason-react-example/src/FirstClassModules.re.js
rename to examples/reason-react-example/src/FirstClassModules.gen.js
diff --git a/examples/reason-react-example/src/Marcel.re.js b/examples/reason-react-example/src/Marcel.gen.js
similarity index 100%
rename from examples/reason-react-example/src/Marcel.re.js
rename to examples/reason-react-example/src/Marcel.gen.js
diff --git a/examples/reason-react-example/src/Marcel1.re.js b/examples/reason-react-example/src/Marcel1.gen.js
similarity index 100%
rename from examples/reason-react-example/src/Marcel1.re.js
rename to examples/reason-react-example/src/Marcel1.gen.js
diff --git a/examples/reason-react-example/src/Marcel2.re.js b/examples/reason-react-example/src/Marcel2.gen.js
similarity index 100%
rename from examples/reason-react-example/src/Marcel2.re.js
rename to examples/reason-react-example/src/Marcel2.gen.js
diff --git a/examples/reason-react-example/src/Marcel3.re.js b/examples/reason-react-example/src/Marcel3.gen.js
similarity index 100%
rename from examples/reason-react-example/src/Marcel3.re.js
rename to examples/reason-react-example/src/Marcel3.gen.js
diff --git a/examples/reason-react-example/src/Marcel4.re.js b/examples/reason-react-example/src/Marcel4.gen.js
similarity index 100%
rename from examples/reason-react-example/src/Marcel4.re.js
rename to examples/reason-react-example/src/Marcel4.gen.js
diff --git a/examples/reason-react-example/src/Opaque.re.js b/examples/reason-react-example/src/Opaque.gen.js
similarity index 100%
rename from examples/reason-react-example/src/Opaque.re.js
rename to examples/reason-react-example/src/Opaque.gen.js
diff --git a/examples/reason-react-example/src/TestImmutableArray.re.js b/examples/reason-react-example/src/TestImmutableArray.gen.js
similarity index 100%
rename from examples/reason-react-example/src/TestImmutableArray.re.js
rename to examples/reason-react-example/src/TestImmutableArray.gen.js
diff --git a/examples/reason-react-example/src/TypeExpansion.re.js b/examples/reason-react-example/src/TypeExpansion.gen.js
similarity index 99%
rename from examples/reason-react-example/src/TypeExpansion.re.js
rename to examples/reason-react-example/src/TypeExpansion.gen.js
index a3ade02bd..45e947b1d 100644
--- a/examples/reason-react-example/src/TypeExpansion.re.js
+++ b/examples/reason-react-example/src/TypeExpansion.gen.js
@@ -7,7 +7,7 @@
 // $FlowExpectedError: Reason checked type sufficiently
 const TypeExpansionBS = require('./TypeExpansion.bs');
 
-import type {person as Tuples_person} from '../src/basics/Tuples.re';
+import type {person as Tuples_person} from '../src/basics/Tuples.gen';
 
 export type personFromTuples = Tuples_person;
 
diff --git a/examples/reason-react-example/src/basics/Component1.re.js b/examples/reason-react-example/src/basics/Component1.gen.js
similarity index 94%
rename from examples/reason-react-example/src/basics/Component1.re.js
rename to examples/reason-react-example/src/basics/Component1.gen.js
index 796f76844..ac85c1a0a 100644
--- a/examples/reason-react-example/src/basics/Component1.re.js
+++ b/examples/reason-react-example/src/basics/Component1.gen.js
@@ -15,7 +15,7 @@ const ReasonReact = require('reason-react/src/ReasonReact.js');
 
 import type {list} from '../../src/shims/ReasonPervasives.shim';
 
-import type {variant as Component2_variant} from './Component2.re';
+import type {variant as Component2_variant} from './Component2.gen';
 
 export type Props = {|+message?: string, +children?: mixed|};
 
diff --git a/examples/reason-react-example/src/basics/Component2.re.js b/examples/reason-react-example/src/basics/Component2.gen.js
similarity index 100%
rename from examples/reason-react-example/src/basics/Component2.re.js
rename to examples/reason-react-example/src/basics/Component2.gen.js
diff --git a/examples/reason-react-example/src/basics/Component3.re.js b/examples/reason-react-example/src/basics/Component3.gen.js
similarity index 100%
rename from examples/reason-react-example/src/basics/Component3.re.js
rename to examples/reason-react-example/src/basics/Component3.gen.js
diff --git a/examples/reason-react-example/src/basics/Enums.re.js b/examples/reason-react-example/src/basics/Enums.gen.js
similarity index 100%
rename from examples/reason-react-example/src/basics/Enums.re.js
rename to examples/reason-react-example/src/basics/Enums.gen.js
diff --git a/examples/reason-react-example/src/basics/Records.re.js b/examples/reason-react-example/src/basics/Records.gen.js
similarity index 97%
rename from examples/reason-react-example/src/basics/Records.re.js
rename to examples/reason-react-example/src/basics/Records.gen.js
index 234ca7704..7105cf41d 100644
--- a/examples/reason-react-example/src/basics/Records.re.js
+++ b/examples/reason-react-example/src/basics/Records.gen.js
@@ -7,7 +7,7 @@
 // $FlowExpectedError: Reason checked type sufficiently
 const RecordsBS = require('./Records.bs');
 
-import type {weekday as Types_weekday} from './Types.re';
+import type {weekday as Types_weekday} from './Types.gen';
 
 export type coord = {|
   +x: number, 
diff --git a/examples/reason-react-example/src/basics/SomeFlowTypes.js b/examples/reason-react-example/src/basics/SomeFlowTypes.js
index 4281b62b3..d5b6fb910 100644
--- a/examples/reason-react-example/src/basics/SomeFlowTypes.js
+++ b/examples/reason-react-example/src/basics/SomeFlowTypes.js
@@ -1,6 +1,6 @@
 /* @flow strict */
 
-const Types = require("./Types.re");
+const Types = require("./Types.gen");
 
 export type anInterestingFlowType = {
   an: string,
diff --git a/examples/reason-react-example/src/basics/StrictLocal.re.js b/examples/reason-react-example/src/basics/StrictLocal.gen.js
similarity index 100%
rename from examples/reason-react-example/src/basics/StrictLocal.re.js
rename to examples/reason-react-example/src/basics/StrictLocal.gen.js
diff --git a/examples/reason-react-example/src/basics/Tuples.re.js b/examples/reason-react-example/src/basics/Tuples.gen.js
similarity index 100%
rename from examples/reason-react-example/src/basics/Tuples.re.js
rename to examples/reason-react-example/src/basics/Tuples.gen.js
diff --git a/examples/reason-react-example/src/basics/Types.re.js b/examples/reason-react-example/src/basics/Types.gen.js
similarity index 100%
rename from examples/reason-react-example/src/basics/Types.re.js
rename to examples/reason-react-example/src/basics/Types.gen.js
diff --git a/examples/reason-react-example/src/basics/Types.re b/examples/reason-react-example/src/basics/Types.re
index 29b58d441..8a4a68924 100644
--- a/examples/reason-react-example/src/basics/Types.re
+++ b/examples/reason-react-example/src/basics/Types.re
@@ -75,7 +75,7 @@ type someMutableFields = {
   [@bs.set] "mutable2": string,
 };
 
-[@genType.import "./name-with-dashes"] [@bs.module "./Types.re"]
+[@genType.import "./name-with-dashes"] [@bs.module "./Types.gen"]
 external foo: int => int = "";
 
 [@genType.opaque]
diff --git a/examples/reason-react-example/src/basics/UseStrictLocalFromStrict.js b/examples/reason-react-example/src/basics/UseStrictLocalFromStrict.js
index d820938bf..7d86a38ba 100644
--- a/examples/reason-react-example/src/basics/UseStrictLocalFromStrict.js
+++ b/examples/reason-react-example/src/basics/UseStrictLocalFromStrict.js
@@ -1,3 +1,3 @@
 /* @flow strict */
 
-import type {someNonStrictType} from './StrictLocal.re';
+import type {someNonStrictType} from './StrictLocal.gen';
diff --git a/examples/reason-react-example/src/components/ManyComponents.re.js b/examples/reason-react-example/src/components/ManyComponents.gen.js
similarity index 100%
rename from examples/reason-react-example/src/components/ManyComponents.re.js
rename to examples/reason-react-example/src/components/ManyComponents.gen.js
diff --git a/examples/reason-react-example/src/components/Navigator.re.js b/examples/reason-react-example/src/components/Navigator.gen.js
similarity index 100%
rename from examples/reason-react-example/src/components/Navigator.re.js
rename to examples/reason-react-example/src/components/Navigator.gen.js
diff --git a/examples/reason-react-example/src/components/RenameProps.re.js b/examples/reason-react-example/src/components/RenameProps.gen.js
similarity index 100%
rename from examples/reason-react-example/src/components/RenameProps.re.js
rename to examples/reason-react-example/src/components/RenameProps.gen.js
diff --git a/examples/reason-react-example/src/interop/Greeting.re.js b/examples/reason-react-example/src/interop/Greeting.gen.js
similarity index 100%
rename from examples/reason-react-example/src/interop/Greeting.re.js
rename to examples/reason-react-example/src/interop/Greeting.gen.js
diff --git a/examples/reason-react-example/src/interop/InteropRoot.js b/examples/reason-react-example/src/interop/InteropRoot.js
index 84237ccbf..cd18ae724 100644
--- a/examples/reason-react-example/src/interop/InteropRoot.js
+++ b/examples/reason-react-example/src/interop/InteropRoot.js
@@ -3,10 +3,10 @@
 const ReactDOM = require("react-dom");
 const React = require("react");
 
-const GreetingRe = require("./Greeting.re");
+const GreetingRe = require("./Greeting.gen");
 
 // Import a ReasonReact component!
-const PageReason = require("./Greeting.re").default;
+const PageReason = require("./Greeting.gen").default;
 
 const consoleLog = console.log;
 
@@ -19,7 +19,7 @@ const helloWorld = GreetingRe.concat("++", helloWorldList);
 
 const someNumber: number = GreetingRe.testDefaultArgs({ y: 10 });
 
-const WrapJsValue = require("./WrapJsValue.re");
+const WrapJsValue = require("./WrapJsValue.gen");
 
 consoleLog("interopRoot.js roundedNumber:", WrapJsValue.roundedNumber);
 consoleLog("interopRoot.js areaValue:", WrapJsValue.areaValue);
@@ -34,7 +34,7 @@ consoleLog("interopRoot.js callMyAreaDirectly:", callMyAreaDirectly);
 
 consoleLog("anInterestingFlowType ", require("../basics/SomeFlowTypes").c);
 
-const Enums = require("../basics/Enums.re");
+const Enums = require("../basics/Enums.gen");
 
 consoleLog("Enums: swap(sunday) =", Enums.swap("sunday"));
 consoleLog("Enums: fortytwoOK is", Enums.fortytwoOK);
diff --git a/examples/reason-react-example/src/interop/MyBannerWrapper.bs.js b/examples/reason-react-example/src/interop/MyBannerWrapper.bs.js
index 929e7292f..d682ec0f1 100644
--- a/examples/reason-react-example/src/interop/MyBannerWrapper.bs.js
+++ b/examples/reason-react-example/src/interop/MyBannerWrapper.bs.js
@@ -1,11 +1,11 @@
 // Generated by BUCKLESCRIPT VERSION 4.0.7, PLEASE EDIT WITH CARE
 'use strict';
 
-var MyBannerWrapperRe = require("./MyBannerWrapper.re");
+var MyBannerWrapperGen = require("./MyBannerWrapper.gen");
 
 function make(prim, prim$1, prim$2) {
-  return MyBannerWrapperRe.make(prim, prim$1, prim$2);
+  return MyBannerWrapperGen.make(prim, prim$1, prim$2);
 }
 
 exports.make = make;
-/* ./MyBannerWrapper.re Not a pure module */
+/* ./MyBannerWrapper.gen Not a pure module */
diff --git a/examples/reason-react-example/src/interop/MyBannerWrapper.re.js b/examples/reason-react-example/src/interop/MyBannerWrapper.gen.js
similarity index 100%
rename from examples/reason-react-example/src/interop/MyBannerWrapper.re.js
rename to examples/reason-react-example/src/interop/MyBannerWrapper.gen.js
diff --git a/examples/reason-react-example/src/interop/MyBannerWrapper.re b/examples/reason-react-example/src/interop/MyBannerWrapper.re
index 0c58479f9..a2d2c1096 100644
--- a/examples/reason-react-example/src/interop/MyBannerWrapper.re
+++ b/examples/reason-react-example/src/interop/MyBannerWrapper.re
@@ -2,7 +2,7 @@
   * Wrap component MyBanner to be used from Reason.
   */
 [@genType.import "./MyBanner.component"] /* Module with the JS component to be wrapped. */
-[@bs.module "./MyBannerWrapper.re"] /* This must always be the name of the current module. */
+[@bs.module "./MyBannerWrapper.gen"] /* This must always be the name of the current module. */
 /* The make function will be automatically generated from the types below. */
 external make:
   (~show: bool) =>
diff --git a/examples/reason-react-example/src/interop/MyMath.js b/examples/reason-react-example/src/interop/MyMath.js
index f119bd1fd..7009ac0fa 100644
--- a/examples/reason-react-example/src/interop/MyMath.js
+++ b/examples/reason-react-example/src/interop/MyMath.js
@@ -1,6 +1,6 @@
 /* @flow strict */
 
-const WrapJsValue = require("./WrapJsValue.re");
+const WrapJsValue = require("./WrapJsValue.gen");
 
 export const round: number => number = Math.round;
 
diff --git a/examples/reason-react-example/src/interop/WrapJsValue.bs.js b/examples/reason-react-example/src/interop/WrapJsValue.bs.js
index a09105aba..f350cb520 100644
--- a/examples/reason-react-example/src/interop/WrapJsValue.bs.js
+++ b/examples/reason-react-example/src/interop/WrapJsValue.bs.js
@@ -1,15 +1,15 @@
 // Generated by BUCKLESCRIPT VERSION 4.0.7, PLEASE EDIT WITH CARE
 'use strict';
 
-var WrapJsValueRe = require("./WrapJsValue.re");
+var WrapJsValueGen = require("./WrapJsValue.gen");
 
 function myArea(prim) {
-  return WrapJsValueRe.area(prim);
+  return WrapJsValueGen.area(prim);
 }
 
-var roundedNumber = WrapJsValueRe.round(1.8);
+var roundedNumber = WrapJsValueGen.round(1.8);
 
-var areaValue = WrapJsValueRe.area(/* record */[
+var areaValue = WrapJsValueGen.area(/* record */[
       /* x */3,
       /* y */undefined
     ]);
diff --git a/examples/reason-react-example/src/interop/WrapJsValue.re.js b/examples/reason-react-example/src/interop/WrapJsValue.gen.js
similarity index 100%
rename from examples/reason-react-example/src/interop/WrapJsValue.re.js
rename to examples/reason-react-example/src/interop/WrapJsValue.gen.js
diff --git a/examples/reason-react-example/src/interop/WrapJsValue.re b/examples/reason-react-example/src/interop/WrapJsValue.re
index e65630acb..e78dfb875 100644
--- a/examples/reason-react-example/src/interop/WrapJsValue.re
+++ b/examples/reason-react-example/src/interop/WrapJsValue.re
@@ -2,7 +2,7 @@
   * Wrap JS values to be used from Reason
   */
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external round: float => float = "";
 
@@ -13,7 +13,7 @@ type point = {
 };
 
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external area: point => int = "";
 
@@ -30,12 +30,12 @@ let areaValue = area({x: 3, y: None});
 type myArray('a);
 
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external getValueAtIndex: (myArray(string), int) => string = "";
 
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external functionWithRenamedArgument:
   string => [@genType.as "ArgRenamed"] ((~argToRename: string) => string) =
diff --git a/examples/reason-react-example/src/nested/Nested.re.js b/examples/reason-react-example/src/nested/Nested.gen.js
similarity index 97%
rename from examples/reason-react-example/src/nested/Nested.re.js
rename to examples/reason-react-example/src/nested/Nested.gen.js
index 3f499bc23..1e9c394f8 100644
--- a/examples/reason-react-example/src/nested/Nested.re.js
+++ b/examples/reason-react-example/src/nested/Nested.gen.js
@@ -10,7 +10,7 @@ const CreateBucklescriptBlock = require('bs-platform/lib/js/block.js');
 // $FlowExpectedError: Reason checked type sufficiently
 const NestedBS = require('./Nested.bs');
 
-import type {variant as Component2_variant} from '../../src/basics/Component2.re';
+import type {variant as Component2_variant} from '../../src/basics/Component2.gen';
 
 export opaque type VariantA = mixed;
 
diff --git a/examples/reason-react-example/webpack.config.js b/examples/reason-react-example/webpack.config.js
index 4c86ed1b0..2a344a0be 100644
--- a/examples/reason-react-example/webpack.config.js
+++ b/examples/reason-react-example/webpack.config.js
@@ -26,12 +26,6 @@ module.exports = {
             ]
           }
         }
-      },
-      {
-        loader: "extension-replace-loader",
-        query: {
-          exts: [{ from: ".re", to: ".re.js" }]
-        }
       }
     ]
   }
diff --git a/examples/typescript-react-example/bsconfig.json b/examples/typescript-react-example/bsconfig.json
index 70078f39e..aaf4048d0 100644
--- a/examples/typescript-react-example/bsconfig.json
+++ b/examples/typescript-react-example/bsconfig.json
@@ -9,8 +9,7 @@
       "all": false,
       "basic": false
     },
-    "exportInterfaces": false,
-    "generatedFileExtension": ""
+    "exportInterfaces": false
   },
   "name": "sample-typescript-app",
   "reason": {
diff --git a/examples/typescript-react-example/clean.js b/examples/typescript-react-example/clean.js
index 38290821a..18b872a0f 100644
--- a/examples/typescript-react-example/clean.js
+++ b/examples/typescript-react-example/clean.js
@@ -4,7 +4,7 @@ const child_process = require("child_process");
 
 glob.glob("src/**/*.bs.js", function(er, files) {
   files.forEach(fileBsJs => {
-    const fileTsx = fileBsJs.substring(0, fileBsJs.length - 6) + ".tsx";
+    const fileTsx = fileBsJs.substring(0, fileBsJs.length - 6) + ".gen.tsx";
     fs.unlink(fileTsx, err => {
       return;
     });
diff --git a/examples/typescript-react-example/src/Enums.tsx b/examples/typescript-react-example/src/Enums.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/Enums.tsx
rename to examples/typescript-react-example/src/Enums.gen.tsx
diff --git a/examples/typescript-react-example/src/FirstClassModules.tsx b/examples/typescript-react-example/src/FirstClassModules.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/FirstClassModules.tsx
rename to examples/typescript-react-example/src/FirstClassModules.gen.tsx
diff --git a/examples/typescript-react-example/src/MyBannerWrapper.bs.js b/examples/typescript-react-example/src/MyBannerWrapper.bs.js
index 8529bc49f..a8a743188 100644
--- a/examples/typescript-react-example/src/MyBannerWrapper.bs.js
+++ b/examples/typescript-react-example/src/MyBannerWrapper.bs.js
@@ -2,11 +2,11 @@
 'use strict';
 
 var Js_primitive = require("bs-platform/lib/js/js_primitive.js");
-var MyBannerWrapper = require("./MyBannerWrapper");
+var MyBannerWrapperGen = require("./MyBannerWrapper.gen");
 
 function make(prim, prim$1, prim$2) {
-  return MyBannerWrapper.make(prim, prim$1 !== undefined ? Js_primitive.valFromOption(prim$1) : undefined, prim$2);
+  return MyBannerWrapperGen.make(prim, prim$1 !== undefined ? Js_primitive.valFromOption(prim$1) : undefined, prim$2);
 }
 
 exports.make = make;
-/* ./MyBannerWrapper Not a pure module */
+/* ./MyBannerWrapper.gen Not a pure module */
diff --git a/examples/typescript-react-example/src/MyBannerWrapper.tsx b/examples/typescript-react-example/src/MyBannerWrapper.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/MyBannerWrapper.tsx
rename to examples/typescript-react-example/src/MyBannerWrapper.gen.tsx
diff --git a/examples/typescript-react-example/src/MyBannerWrapper.re b/examples/typescript-react-example/src/MyBannerWrapper.re
index 65e9f31f8..38cd427e2 100644
--- a/examples/typescript-react-example/src/MyBannerWrapper.re
+++ b/examples/typescript-react-example/src/MyBannerWrapper.re
@@ -6,7 +6,7 @@
 type message = {text: string};
 
 [@genType.import "./MyBanner"] /* Module with the JS component to be wrapped. */
-[@bs.module "./MyBannerWrapper"] /* This must always be the name of the current module. */
+[@bs.module "./MyBannerWrapper.gen"] /* This must always be the name of the current module. */
 /* The make function will be automatically generated from the types below. */
 external make:
   (~show: bool, ~message: option(message)=?, 'a) =>
diff --git a/examples/typescript-react-example/src/NestedModules.tsx b/examples/typescript-react-example/src/NestedModules.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/NestedModules.tsx
rename to examples/typescript-react-example/src/NestedModules.gen.tsx
diff --git a/examples/typescript-react-example/src/NestedModulesInSignature.tsx b/examples/typescript-react-example/src/NestedModulesInSignature.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/NestedModulesInSignature.tsx
rename to examples/typescript-react-example/src/NestedModulesInSignature.gen.tsx
diff --git a/examples/typescript-react-example/src/ReasonComponent.tsx b/examples/typescript-react-example/src/ReasonComponent.gen.tsx
similarity index 95%
rename from examples/typescript-react-example/src/ReasonComponent.tsx
rename to examples/typescript-react-example/src/ReasonComponent.gen.tsx
index 68ea89486..feeba40af 100644
--- a/examples/typescript-react-example/src/ReasonComponent.tsx
+++ b/examples/typescript-react-example/src/ReasonComponent.gen.tsx
@@ -14,11 +14,11 @@ const ReasonReact = require('reason-react/src/ReasonReact.js');
 
 import {Mouse_t as ReactEvent_Mouse_t} from '../src/shims/ReactEvent.shim';
 
-import {coord as Records_coord} from '../src/nested/Records';
+import {coord as Records_coord} from '../src/nested/Records.gen';
 
 import {list} from '../src/shims/ReasonPervasives.shim';
 
-import {t as Types_t} from '../src/nested/Types';
+import {t as Types_t} from '../src/nested/Types.gen';
 
 // tslint:disable-next-line:interface-over-type-literal
 export type person<a> = {
diff --git a/examples/typescript-react-example/src/TestImmutableArray.tsx b/examples/typescript-react-example/src/TestImmutableArray.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/TestImmutableArray.tsx
rename to examples/typescript-react-example/src/TestImmutableArray.gen.tsx
diff --git a/examples/typescript-react-example/src/UseWrapJsValue.tsx b/examples/typescript-react-example/src/UseWrapJsValue.gen.tsx
similarity index 93%
rename from examples/typescript-react-example/src/UseWrapJsValue.tsx
rename to examples/typescript-react-example/src/UseWrapJsValue.gen.tsx
index c85a146e7..281bde75e 100644
--- a/examples/typescript-react-example/src/UseWrapJsValue.tsx
+++ b/examples/typescript-react-example/src/UseWrapJsValue.gen.tsx
@@ -3,9 +3,9 @@
 // tslint:disable-next-line:no-var-requires
 const UseWrapJsValueBS = require('./UseWrapJsValue.bs');
 
-import {AbsoluteValue_t as WrapJsValue_AbsoluteValue_t} from './WrapJsValue';
+import {AbsoluteValue_t as WrapJsValue_AbsoluteValue_t} from './WrapJsValue.gen';
 
-import {stringFunction as WrapJsValue_stringFunction} from './WrapJsValue';
+import {stringFunction as WrapJsValue_stringFunction} from './WrapJsValue.gen';
 
 export const useGetProp: (_1:WrapJsValue_AbsoluteValue_t) => number = UseWrapJsValueBS.useGetProp;
 
diff --git a/examples/typescript-react-example/src/WrapJsValue.bs.js b/examples/typescript-react-example/src/WrapJsValue.bs.js
index 0374f92c2..5b0f763a7 100644
--- a/examples/typescript-react-example/src/WrapJsValue.bs.js
+++ b/examples/typescript-react-example/src/WrapJsValue.bs.js
@@ -1,11 +1,11 @@
 // Generated by BUCKLESCRIPT VERSION 4.0.7, PLEASE EDIT WITH CARE
 'use strict';
 
-var WrapJsValue = require("./WrapJsValue");
+var WrapJsValueGen = require("./WrapJsValue.gen");
 
-var roundedNumber = WrapJsValue.round(1.8);
+var roundedNumber = WrapJsValueGen.round(1.8);
 
-var areaValue = WrapJsValue.area(/* record */[
+var areaValue = WrapJsValueGen.area(/* record */[
       /* x */3,
       /* y */undefined
     ]);
diff --git a/examples/typescript-react-example/src/WrapJsValue.tsx b/examples/typescript-react-example/src/WrapJsValue.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/WrapJsValue.tsx
rename to examples/typescript-react-example/src/WrapJsValue.gen.tsx
diff --git a/examples/typescript-react-example/src/WrapJsValue.re b/examples/typescript-react-example/src/WrapJsValue.re
index f867e4bbb..4f5940176 100644
--- a/examples/typescript-react-example/src/WrapJsValue.re
+++ b/examples/typescript-react-example/src/WrapJsValue.re
@@ -2,7 +2,7 @@
   * Wrap JS values to be used from Reason
   */
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external round: float => float = "";
 
@@ -13,7 +13,7 @@ type point = {
 };
 
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external area: point => int = "";
 
diff --git a/examples/typescript-react-example/src/components/ManyComponents.tsx b/examples/typescript-react-example/src/components/ManyComponents.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/components/ManyComponents.tsx
rename to examples/typescript-react-example/src/components/ManyComponents.gen.tsx
diff --git a/examples/typescript-react-example/src/index.tsx b/examples/typescript-react-example/src/index.tsx
index 2583b2d1b..6fc2e8799 100644
--- a/examples/typescript-react-example/src/index.tsx
+++ b/examples/typescript-react-example/src/index.tsx
@@ -1,17 +1,17 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import App from "./App";
-import * as Enums from "./Enums";
+import * as Enums from "./Enums.gen";
 import "./index.css";
 import * as MyMath from "./MyMath";
-import * as Records from "./nested/Records";
-import * as Types from "./nested/Types";
-import { Universe_Nested2_Nested3_nested3Value } from "./NestedModules";
-import ReasonComponent from "./ReasonComponent";
-import { A, B, minus, tToString } from "./ReasonComponent";
-import { t, TA, TB } from "./ReasonComponent";
+import * as Records from "./nested/Records.gen";
+import * as Types from "./nested/Types.gen";
+import { Universe_Nested2_Nested3_nested3Value } from "./NestedModules.gen";
+import ReasonComponent from "./ReasonComponent.gen";
+import { A, B, minus, tToString } from "./ReasonComponent.gen";
+import { t, TA, TB } from "./ReasonComponent.gen";
 import registerServiceWorker from "./registerServiceWorker";
-import * as WrapJsValue from "./WrapJsValue";
+import * as WrapJsValue from "./WrapJsValue.gen";
 
 const minusOne: number = minus({ second: 1 });
 
@@ -37,9 +37,9 @@ const businesses = [
 
 const addresses = Records.findAllAddresses(businesses);
 
-import { roundedNumber } from "./WrapJsValue";
+import { roundedNumber } from "./WrapJsValue.gen";
 consoleLog("index.tsx roundedNumber:", roundedNumber);
-import { areaValue } from "./WrapJsValue";
+import { areaValue } from "./WrapJsValue.gen";
 consoleLog("index.tsx areaValue:", areaValue);
 
 ReactDOM.render(
diff --git a/examples/typescript-react-example/src/nested/Records.tsx b/examples/typescript-react-example/src/nested/Records.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/nested/Records.tsx
rename to examples/typescript-react-example/src/nested/Records.gen.tsx
diff --git a/examples/typescript-react-example/src/nested/Tuples.tsx b/examples/typescript-react-example/src/nested/Tuples.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/nested/Tuples.tsx
rename to examples/typescript-react-example/src/nested/Tuples.gen.tsx
diff --git a/examples/typescript-react-example/src/nested/Types.tsx b/examples/typescript-react-example/src/nested/Types.gen.tsx
similarity index 100%
rename from examples/typescript-react-example/src/nested/Types.tsx
rename to examples/typescript-react-example/src/nested/Types.gen.tsx
diff --git a/examples/untyped-react-example/bsconfig.json b/examples/untyped-react-example/bsconfig.json
index b1cd7f8f8..0e7213b2f 100644
--- a/examples/untyped-react-example/bsconfig.json
+++ b/examples/untyped-react-example/bsconfig.json
@@ -3,9 +3,9 @@
     "language": "untyped",
     "shims": {},
     "debug": {
-      "all": false,
-      "basic": false
-    }
+      "all": false
+    },
+    "exportInterfaces": false
   },
   "name": "reason-react-example",
   "bsc-flags": ["-bs-super-errors"],
diff --git a/examples/untyped-react-example/clean.js b/examples/untyped-react-example/clean.js
new file mode 100644
index 000000000..6daa9b73d
--- /dev/null
+++ b/examples/untyped-react-example/clean.js
@@ -0,0 +1,18 @@
+const glob = require("glob");
+const fs = require("fs");
+const child_process = require("child_process");
+
+glob.glob("src/**/*.bs.js", function(er, files) {
+  files.forEach(fileBsJs => {
+    const fileTsx = fileBsJs.substring(0, fileBsJs.length - 6) + ".gen.js";
+    fs.unlink(fileTsx, err => {
+      return;
+    });
+  });
+});
+
+const isWindows = /^win/i.test(process.platform);
+
+child_process
+  .spawn("bsb", ["-clean-world"], { stdio: "inherit", stderr: "inherit", shell: isWindows })
+  .on("exit", code => process.exit(code));
diff --git a/examples/untyped-react-example/package-lock.json b/examples/untyped-react-example/package-lock.json
index 2a9d1cae7..ac97b41c1 100644
--- a/examples/untyped-react-example/package-lock.json
+++ b/examples/untyped-react-example/package-lock.json
@@ -1217,7 +1217,8 @@
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
-      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q=="
+      "integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
+      "dev": true
     },
     "binary-extensions": {
       "version": "1.11.0",
@@ -1936,7 +1937,8 @@
     "emojis-list": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
-      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
+      "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
+      "dev": true
     },
     "encoding": {
       "version": "0.1.12",
@@ -2147,14 +2149,6 @@
         }
       }
     },
-    "extension-replace-loader": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/extension-replace-loader/-/extension-replace-loader-0.0.1.tgz",
-      "integrity": "sha1-nfqEf2vdlMyc8Rq3IizFEil6aI4=",
-      "requires": {
-        "loader-utils": "^0.2.14"
-      }
-    },
     "extglob": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@@ -3479,7 +3473,8 @@
     "json5": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
-      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE="
+      "integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
+      "dev": true
     },
     "kind-of": {
       "version": "6.0.2",
@@ -3514,17 +3509,6 @@
       "integrity": "sha1-9IKuqC1UPgeSFwDVpG7yb9rGuKI=",
       "dev": true
     },
-    "loader-utils": {
-      "version": "0.2.17",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
-      "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
-      "requires": {
-        "big.js": "^3.1.3",
-        "emojis-list": "^2.0.0",
-        "json5": "^0.5.0",
-        "object-assign": "^4.0.1"
-      }
-    },
     "locate-path": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
diff --git a/examples/untyped-react-example/package.json b/examples/untyped-react-example/package.json
index 6a86b0a1e..df1a8bd21 100644
--- a/examples/untyped-react-example/package.json
+++ b/examples/untyped-react-example/package.json
@@ -7,7 +7,7 @@
   "scripts": {
     "build": "node ../run_bsb.js -make-world",
     "start": "node ../run_bsb.js -make-world -w",
-    "clean": "bsb -clean-world",
+    "clean": "node clean.js",
     "test": "exit 0",
     "webpack": "webpack -w",
     "webpack:production": "webpack --env.NODE_ENV=production"
@@ -16,7 +16,6 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "extension-replace-loader": "^0.0.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "reason-react": "^0.5.3"
diff --git a/examples/untyped-react-example/src/App.re.js b/examples/untyped-react-example/src/App.gen.js
similarity index 100%
rename from examples/untyped-react-example/src/App.re.js
rename to examples/untyped-react-example/src/App.gen.js
diff --git a/examples/untyped-react-example/src/main.js b/examples/untyped-react-example/src/main.js
index 00972dd34..f4637561a 100644
--- a/examples/untyped-react-example/src/main.js
+++ b/examples/untyped-react-example/src/main.js
@@ -1,7 +1,7 @@
 const ReactDOM = require("react-dom");
 const React = require("react");
 
-const App = require("./App.re").default;
+const App = require("./App.gen").default;
 
 const Main = () => (
   <div>
diff --git a/examples/untyped-react-example/webpack.config.js b/examples/untyped-react-example/webpack.config.js
index db202133e..688da1655 100644
--- a/examples/untyped-react-example/webpack.config.js
+++ b/examples/untyped-react-example/webpack.config.js
@@ -25,12 +25,6 @@ module.exports = {
             ]
           }
         }
-      },
-      {
-        loader: "extension-replace-loader",
-        query: {
-          exts: [{ from: ".re", to: ".re.js" }]
-        }
       }
     ]
   }
diff --git a/src/EmitTyp.re b/src/EmitTyp.re
index 7a4d0c5ec..e8bf01a56 100644
--- a/src/EmitTyp.re
+++ b/src/EmitTyp.re
@@ -17,12 +17,7 @@ let fileHeader = (~config) =>
 let generatedFilesExtension = (~config) =>
   switch (config.generatedFileExtension) {
   | Some(s) => s
-  | None =>
-    switch (config.language) {
-    | Flow
-    | Untyped => ".re"
-    | TypeScript => ""
-    }
+  | None => ".gen"
   };
 
 let outputFileSuffix = (~config) =>
@@ -32,8 +27,7 @@ let outputFileSuffix = (~config) =>
   | TypeScript => generatedFilesExtension(~config) ++ ".tsx"
   };
 
-let generatedModuleExtension = (~config) =>
-  generatedFilesExtension(~config);
+let generatedModuleExtension = (~config) => generatedFilesExtension(~config);
 
 let shimExtension = (~config) =>
   switch (config.language) {