fix(absolute imports): handle base url and paths defined in tsconfig

fix #71
RyanClementsHax · May 24, 2022 · 1225567 · 1225567
1 parent 83fb3ff
commit 1225567
Show file tree

Hide file tree

Showing 22 changed files with 870 additions and 524 deletions.
diff --git a/README.md b/README.md
@@ -536,7 +536,18 @@ module.exports = {
 
 ### Typescript
 
-There is no special thing this addon does to support [Typescript](https://www.typescriptlang.org/) because Storybook already supports it out of the box. I just listed it in the [supported features](#supported-features) for completeness and not to confuse anyone comparing the list of "out of the box" [features](https://nextjs.org/docs/getting-started) Next.js has with this addon.
+Storybook handles most [Typescript](https://www.typescriptlang.org/) configurations, but this addon adds additional support for Next.js's support for [Absolute Imports and Module path aliases](https://nextjs.org/docs/advanced-features/module-path-aliases). In short, it takes into account your `tsconfig.json`'s [baseUrl](https://www.typescriptlang.org/tsconfig#baseUrl) and [paths](https://www.typescriptlang.org/tsconfig#paths). Thus, a `tsconfig.json` like the one below would work out of the box.
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/components/*": ["components/*"]
+    }
+  }
+}
+```
 
 ### next.config.js
 

diff --git a/examples/nextv10/components/MyOtherComponent.js b/examples/nextv10/components/MyOtherComponent.js
@@ -0,0 +1,2 @@
+/** @type {import('react').FC} */
+export const MyOtherComponent = ({ children }) => <div>{children}</div>
diff --git a/examples/nextv10/pages/absoluteImports.js b/examples/nextv10/pages/absoluteImports.js
@@ -1,5 +1,6 @@
 import { Header } from 'components/Header'
 import { MyComponent } from 'components/MyComponent'
+import { MyOtherComponent } from '@/components/MyOtherComponent'
 import Head from 'next/head'
 
 export default function AbsoluteImports() {
@@ -11,8 +12,13 @@ export default function AbsoluteImports() {
       </Head>
       <Header />
       <main>
-        <p>This uses an absolute import:</p>
-        <MyComponent>Im absolutely imported</MyComponent>
+        <p>Below are components imported using absolute imports:</p>
+        <MyComponent>
+          Im absolutely imported off of the base url in tsconfig.json
+        </MyComponent>
+        <MyOtherComponent>
+          Im absolutely imported off of a path in tsconfig.json
+        </MyOtherComponent>
       </main>
     </div>
   )

diff --git a/examples/nextv10/tsconfig.json b/examples/nextv10/tsconfig.json
@@ -18,7 +18,10 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["node_modules", ".next", "out", "storybook-static"],
   "include": [

diff --git a/examples/nextv11_0/components/MyOtherComponent.js b/examples/nextv11_0/components/MyOtherComponent.js
@@ -0,0 +1,2 @@
+/** @type {import('react').FC} */
+export const MyOtherComponent = ({ children }) => <div>{children}</div>
diff --git a/examples/nextv11_0/pages/absoluteImports.js b/examples/nextv11_0/pages/absoluteImports.js
@@ -1,5 +1,6 @@
 import { Header } from 'components/Header'
 import { MyComponent } from 'components/MyComponent'
+import { MyOtherComponent } from '@/components/MyOtherComponent'
 import Head from 'next/head'
 
 export default function AbsoluteImports() {
@@ -11,8 +12,13 @@ export default function AbsoluteImports() {
       </Head>
       <Header />
       <main>
-        <p>This uses an absolute import:</p>
-        <MyComponent>Im absolutely imported</MyComponent>
+        <p>Below are components imported using absolute imports:</p>
+        <MyComponent>
+          Im absolutely imported off of the base url in tsconfig.json
+        </MyComponent>
+        <MyOtherComponent>
+          Im absolutely imported off of a path in tsconfig.json
+        </MyOtherComponent>
       </main>
     </div>
   )

diff --git a/examples/nextv11_0/tsconfig.json b/examples/nextv11_0/tsconfig.json
@@ -18,7 +18,10 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["node_modules", ".next", "out", "storybook-static"],
   "include": [

diff --git a/examples/nextv11_1/components/MyOtherComponent.js b/examples/nextv11_1/components/MyOtherComponent.js
@@ -0,0 +1,2 @@
+/** @type {import('react').FC} */
+export const MyOtherComponent = ({ children }) => <div>{children}</div>
diff --git a/examples/nextv11_1/pages/absoluteImports.js b/examples/nextv11_1/pages/absoluteImports.js
@@ -1,5 +1,6 @@
 import { Header } from 'components/Header'
 import { MyComponent } from 'components/MyComponent'
+import { MyOtherComponent } from '@/components/MyOtherComponent'
 import Head from 'next/head'
 
 export default function AbsoluteImports() {
@@ -11,8 +12,13 @@ export default function AbsoluteImports() {
       </Head>
       <Header />
       <main>
-        <p>This uses an absolute import:</p>
-        <MyComponent>Im absolutely imported</MyComponent>
+        <p>Below are components imported using absolute imports:</p>
+        <MyComponent>
+          Im absolutely imported off of the base url in tsconfig.json
+        </MyComponent>
+        <MyOtherComponent>
+          Im absolutely imported off of a path in tsconfig.json
+        </MyOtherComponent>
       </main>
     </div>
   )

diff --git a/examples/nextv11_1/tsconfig.json b/examples/nextv11_1/tsconfig.json
@@ -18,7 +18,10 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["node_modules", ".next", "out", "storybook-static"],
   "include": [

diff --git a/examples/nextv12/components/MyOtherComponent.js b/examples/nextv12/components/MyOtherComponent.js
@@ -0,0 +1,2 @@
+/** @type {import('react').FC} */
+export const MyOtherComponent = ({ children }) => <div>{children}</div>
diff --git a/examples/nextv12/pages/absoluteImports.js b/examples/nextv12/pages/absoluteImports.js
@@ -1,5 +1,6 @@
 import { Header } from 'components/Header'
 import { MyComponent } from 'components/MyComponent'
+import { MyOtherComponent } from '@/components/MyOtherComponent'
 import Head from 'next/head'
 
 export default function AbsoluteImports() {
@@ -11,8 +12,13 @@ export default function AbsoluteImports() {
       </Head>
       <Header />
       <main>
-        <p>This uses an absolute import:</p>
-        <MyComponent>Im absolutely imported</MyComponent>
+        <p>Below are components imported using absolute imports:</p>
+        <MyComponent>
+          Im absolutely imported off of the base url in tsconfig.json
+        </MyComponent>
+        <MyOtherComponent>
+          Im absolutely imported off of a path in tsconfig.json
+        </MyOtherComponent>
       </main>
     </div>
   )

diff --git a/examples/nextv12/tsconfig.json b/examples/nextv12/tsconfig.json
@@ -18,7 +18,10 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["node_modules", ".next", "out", "storybook-static"],
   "include": [

diff --git a/examples/nextv12/yarn.lock b/examples/nextv12/yarn.lock
@@ -2498,6 +2498,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
 "@types/mdast@^3.0.0":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
@@ -4756,6 +4761,14 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enhanced-resolve@^5.7.0:
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
+  integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
 enhanced-resolve@^5.9.2:
   version "5.9.2"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
@@ -7065,6 +7078,11 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
+minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
@@ -9330,6 +9348,11 @@ strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   dependencies:
     ansi-regex "^5.0.1"
 
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
+  integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
+
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@@ -9628,6 +9651,25 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tsconfig-paths-webpack-plugin@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths-webpack-plugin/-/tsconfig-paths-webpack-plugin-3.5.2.tgz#01aafff59130c04a8c4ebc96a3045c43c376449a"
+  integrity sha512-EhnfjHbzm5IYI9YPNVIxx1moxMI4bpHD2e0zTXeDNQcwjjRaGepP7IhTHJkyDBG0CAOoxRfe7jCG630Ou+C6Pw==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^5.7.0"
+    tsconfig-paths "^3.9.0"
+
+tsconfig-paths@^3.9.0:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
 tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"

diff --git a/examples/nextv9/components/MyOtherComponent.js b/examples/nextv9/components/MyOtherComponent.js
@@ -0,0 +1,2 @@
+/** @type {import('react').FC} */
+export const MyOtherComponent = ({ children }) => <div>{children}</div>
diff --git a/examples/nextv9/pages/absoluteImports.js b/examples/nextv9/pages/absoluteImports.js
@@ -1,5 +1,6 @@
 import { Header } from 'components/Header'
 import { MyComponent } from 'components/MyComponent'
+import { MyOtherComponent } from '@/components/MyOtherComponent'
 import Head from 'next/head'
 
 export default function AbsoluteImports() {
@@ -11,8 +12,13 @@ export default function AbsoluteImports() {
       </Head>
       <Header />
       <main>
-        <p>This uses an absolute import:</p>
-        <MyComponent>Im absolutely imported</MyComponent>
+        <p>Below are components imported using absolute imports:</p>
+        <MyComponent>
+          Im absolutely imported off of the base url in tsconfig.json
+        </MyComponent>
+        <MyOtherComponent>
+          Im absolutely imported off of a path in tsconfig.json
+        </MyOtherComponent>
       </main>
     </div>
   )

diff --git a/examples/nextv9/tsconfig.json b/examples/nextv9/tsconfig.json
@@ -17,7 +17,10 @@
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,
     "lib": ["dom", "dom.iterable", "esnext"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["node_modules", ".next", "out", "storybook-static"],
   "include": [

diff --git a/package.json b/package.json
@@ -48,7 +48,8 @@
     "postcss-loader": "^6.2.1",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",
-    "semver": "^7.3.5"
+    "semver": "^7.3.5",
+    "tsconfig-paths-webpack-plugin": "^3.5.2"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.4.13",
@@ -79,8 +80,8 @@
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
-    "@storybook/addons": "^6.0.0",
     "@storybook/addon-actions": "^6.0.0",
+    "@storybook/addons": "^6.0.0",
     "next": "^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"

diff --git a/src/absoluteImports/webpack.ts b/src/absoluteImports/webpack.ts
diff --git a/src/imports/webpack.ts b/src/imports/webpack.ts
@@ -0,0 +1,16 @@
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
+import { Configuration as WebpackConfig } from 'webpack'
+
+export const configureImports = (baseConfig: WebpackConfig): void => {
+  baseConfig.resolve = baseConfig.resolve ?? {}
+
+  const plugin = new TsconfigPathsPlugin({
+    extensions: ['.js', '.jsx', '.ts', '.tsx']
+  })
+
+  if (baseConfig.resolve.plugins) {
+    baseConfig.resolve.plugins.push(plugin)
+  } else {
+    baseConfig.resolve.plugins = [plugin]
+  }
+}
diff --git a/src/preset.ts b/src/preset.ts
@@ -4,7 +4,7 @@ import { StorybookConfig } from '@storybook/core-common'
 import { TransformOptions } from '@babel/core'
 import { configureConfig } from './config/webpack'
 import { configureCss } from './css/webpack'
-import { configureAbsoluteImports } from './absoluteImports/webpack'
+import { configureImports } from './imports/webpack'
 import { configureRouting } from './routing/webpack'
 import { configureStyledJsx } from './styledJsx/webpack'
 import { configureStyledJsxTransforms } from './styledJsx/babel'
@@ -33,7 +33,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
   const nextConfig = await configureConfig(baseConfig, nextConfigPath)
 
   configureRuntimeNextjsVersionResolution(baseConfig)
-  configureAbsoluteImports(baseConfig)
+  configureImports(baseConfig)
   configureCss(baseConfig, nextConfig)
   configureImages(baseConfig)
   configureRouting(baseConfig)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/** @type {import('react').FC} */
		export const MyOtherComponent = ({ children }) => <div>{children}</div>