How to resolve aliases in Storybook?

Storybook can’t resolve aliases defined in webpack. The app works fine though. To be clear:

import Foo from "components/foo" => crash import Foo from "../../components/foo" => ok 

I have added my aliases manually to the storybook config, but I get the error:

Unexpected token r in JSON at position 27

Here is the main.js file:

const path = require("path"); module.exports = { stories: ["../**/stories.tsx"], webpackFinal: (config) => { return { ...config, resolve: { alias: { api: path.resolve(__dirname, "src/api/"), assets: path.resolve(__dirname, "src/assets/"), components: path.resolve(__dirname, "src/components/"), containers: path.resolve(__dirname, "src/containers/"), i18n: path.resolve(__dirname, "src/i18n/"), models: path.resolve(__dirname, "src/models/"), pages: path.resolve(__dirname, "src/pages/"), src: path.resolve(__dirname, "src/"), stores: path.resolve(__dirname, "src/stores/"), utils: path.resolve(__dirname, "src/utils/"), }, }, module: { ...config.module, rules: [ { test: /.(ts|js)x?$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /.css$/, use: ["style-loader", "css-loader"] }, { test: /.(png|jpg|gif)$/, use: ["file-loader"] }, { test: /.svg$/, use: [ { loader: "babel-loader", }, { loader: "react-svg-loader", options: { jsx: true, }, }, ], }, ], }, }; }, typescript: { check: false, checkOptions: {}, reactDocgen: "react-docgen-typescript", reactDocgenTypescriptOptions: { shouldExtractLiteralValuesFromEnum: true, propFilter: (prop) => prop.parent ? !/node_modules/.test(prop.parent.fileName) : true, }, }, }; 

And my webpack config:

/* eslint-env node */ const path = require("path"); const TerserPlugin = require("terser-webpack-plugin"); const Dotenv = require("dotenv-webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const isProductionMode = (mode) => mode === "production"; module.exports = () => { const env = require("dotenv").config({ path: __dirname + "/.env" }); const nodeEnv = env.parsed.NODE_ENV; return { mode: "development", entry: "./src/index.tsx", output: { path: path.join(__dirname, "./dist"), filename: "[name].[contenthash].bundle.js", publicPath: "/", }, resolve: { extensions: [".ts", ".tsx", ".js", "jsx", ".json"], alias: { api: path.resolve(__dirname, "src/api/"), assets: path.resolve(__dirname, "src/assets/"), components: path.resolve(__dirname, "src/components/"), containers: path.resolve(__dirname, "src/containers/"), i18n: path.resolve(__dirname, "src/i18n/"), models: path.resolve(__dirname, "src/models/"), pages: path.resolve(__dirname, "src/pages/"), src: path.resolve(__dirname, "src/"), stores: path.resolve(__dirname, "src/stores/"), utils: path.resolve(__dirname, "src/utils/"), }, }, module: { rules: [ { test: /.(ts|js)x?$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /.css$/, use: ["style-loader", "css-loader"] }, { test: /.(png|jpg|jpeg|gif)$/, use: ["file-loader"] }, { test: /.svg$/, use: [ { loader: "babel-loader", }, { loader: "react-svg-loader", options: { jsx: true, }, }, ], }, ], }, devServer: { historyApiFallback: true, port: 3000, inline: true, hot: true, }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", }), new Dotenv(), ], optimization: { minimize: isProductionMode(nodeEnv), minimizer: isProductionMode(nodeEnv) ? [new TerserPlugin()] : [], splitChunks: { chunks: "all" }, }, }; }; 

My app structure looks like this:

-client -storybook -main.js -preview.js -src -components -pages -webpack.config.js 

Thanks a lot for your help!

submitted by /u/MonsieurLeland
[link] [comments]