Use sourceMap: true with webpack/ts-loader and inlineSourceMap: true with tsc to support source maps with CodeSandbox

tkrotoff · tkrotoff · commit 9d94fde15bf9 · 2018-04-27T00:46:48.000+02:00
ts-loader and friends don't play nice with inlineSourceMap: true See Error when using inline sourcemaps s-panferov/awesome-typescript-loader#171
diff --git a/examples/ClubMembers/webpack.config.ts b/examples/ClubMembers/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 
 const config: Configuration = {
@@ -17,7 +17,7 @@ const config: Configuration = {
 
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
       { test: /\.js$/, loader: 'source-map-loader' },
       { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
     ]
diff --git a/examples/HTML5Constraints/webpack.config.ts b/examples/HTML5Constraints/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 
 const config: Configuration = {
@@ -17,7 +17,7 @@ const config: Configuration = {
 
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
       { test: /\.js$/, loader: 'source-map-loader' },
       { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
     ]
diff --git a/examples/NoFramework/webpack.config.ts b/examples/NoFramework/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 
 const config: Configuration = {
@@ -17,7 +17,7 @@ const config: Configuration = {
 
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
       { test: /\.js$/, loader: 'source-map-loader' },
       { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
     ]
diff --git a/examples/Password/webpack.config.ts b/examples/Password/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 
 const config: Configuration = {
@@ -17,7 +17,7 @@ const config: Configuration = {
 
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
       { test: /\.js$/, loader: 'source-map-loader' },
       { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }
     ]
diff --git a/examples/PasswordNoState/webpack.config.ts b/examples/PasswordNoState/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 
 const config: Configuration = {
@@ -17,7 +17,7 @@ const config: Configuration = {
 
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
       { test: /\.js$/, loader: 'source-map-loader' },
       { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
     ]
diff --git a/examples/ServerSideRendering/webpack.config.ts b/examples/ServerSideRendering/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 import nodeExternals from 'webpack-node-externals';
 
@@ -9,7 +9,7 @@ const output = {
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
-const tsLoaderRule = { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} };
+const tsLoaderRule = { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} };
 
 const config: Configuration[] = [
   {
diff --git a/examples/SignUp/webpack.config.ts b/examples/SignUp/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 
 const config: Configuration = {
@@ -17,7 +17,7 @@ const config: Configuration = {
 
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
       { test: /\.js$/, loader: 'source-map-loader' },
       { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
     ]
diff --git a/examples/WizardForm/webpack.config.ts b/examples/WizardForm/webpack.config.ts
@@ -1,4 +1,4 @@
-import * as path from 'path';
+import path from 'path';
 import { Configuration } from 'webpack';
 
 const config: Configuration = {
@@ -17,7 +17,7 @@ const config: Configuration = {
 
   module: {
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {onlyCompileBundledFiles: true, compilerOptions: {noEmit: false, module: 'esnext', sourceMap: true}} },
       { test: /\.js$/, loader: 'source-map-loader' },
       { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[name].[ext]'} }
     ]
diff --git a/packages/react-form-with-constraints-bootstrap4/rollup.config.js b/packages/react-form-with-constraints-bootstrap4/rollup.config.js
@@ -34,7 +34,7 @@ export default {
     typescript({
       abortOnError: false,
       clean: true,
-      tsconfigOverride: {compilerOptions: {noEmit: false, module: 'esnext', declaration: false}}
+      tsconfigOverride: {compilerOptions: {noEmit: false, module: 'esnext'}}
     }),
     __PROD__ && uglify(),
     gzip({algorithm: 'zopfli'}),
diff --git a/packages/react-form-with-constraints-bootstrap4/tsconfig.lib.json b/packages/react-form-with-constraints-bootstrap4/tsconfig.lib.json
@@ -2,7 +2,10 @@
   "extends": "./tsconfig",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "lib"
+    "outDir": "lib",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "declaration": true
   },
   "include": []
 }
diff --git a/packages/react-form-with-constraints-native/tsconfig.lib.json b/packages/react-form-with-constraints-native/tsconfig.lib.json
@@ -2,7 +2,10 @@
   "extends": "./tsconfig",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "lib"
+    "outDir": "lib",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "declaration": true
   },
   "include": []
 }
diff --git a/packages/react-form-with-constraints-tools/rollup.config.js b/packages/react-form-with-constraints-tools/rollup.config.js
@@ -34,7 +34,7 @@ export default {
     typescript({
       abortOnError: false,
       clean: true,
-      tsconfigOverride: {compilerOptions: {noEmit: false, module: 'esnext', declaration: false}}
+      tsconfigOverride: {compilerOptions: {noEmit: false, module: 'esnext'}}
     }),
     __PROD__ && uglify(),
     gzip({algorithm: 'zopfli'}),
diff --git a/packages/react-form-with-constraints-tools/tsconfig.lib.json b/packages/react-form-with-constraints-tools/tsconfig.lib.json
@@ -2,7 +2,10 @@
   "extends": "./tsconfig",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "lib"
+    "outDir": "lib",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "declaration": true
   },
   "include": []
 }
diff --git a/packages/react-form-with-constraints/rollup.config.js b/packages/react-form-with-constraints/rollup.config.js
@@ -33,7 +33,7 @@ export default {
     typescript({
       abortOnError: false,
       clean: true,
-      tsconfigOverride: {compilerOptions: {noEmit: false, module: 'esnext', declaration: false}}
+      tsconfigOverride: {compilerOptions: {noEmit: false, module: 'esnext'}}
     }),
     __PROD__ && uglify(),
     gzip({algorithm: 'zopfli'}),
diff --git a/packages/react-form-with-constraints/tsconfig.lib.json b/packages/react-form-with-constraints/tsconfig.lib.json
@@ -2,7 +2,10 @@
   "extends": "./tsconfig",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "lib"
+    "outDir": "lib",
+    "inlineSourceMap": true,
+    "inlineSources": true,
+    "declaration": true
   },
   "include": []
 }
diff --git a/tsconfig-react-es5.json b/tsconfig-react-es5.json
@@ -11,8 +11,6 @@
     "noLib": false,
     "lib": ["dom.iterable", "es2017"],
     "experimentalDecorators": true,
-    "sourceMap": true,
-    "declaration": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
