Cannot resolve core-js on addon compiling

[khats]

Describe the bug
Compiling addon with typescript fails on absence babel presets

Module not found: Error: Can't resolve 'core-js/modules/es.array.sort' in '/subrepo2/i18n'
@ ../subrepo2/i18n/languages.ts 1:0-39
@ ./.storybook/i18n-addon/register.js

To Reproduce
Monorepo structure is following:

./build/storybook/*
./subrepo1/
./subrepo1/./storybook/i18n-addon/register.js
./subrepo2/i18n/languages.ts

./subrepo1/node_modules/./bin/start-storybook is symlink to ./build/storybook/node_modules/@storybook/react

languages.ts code is:

export enum LanguageCode {
    Russian = "ru",
    English = "en",
}
export const languageCodes = Object.values(LanguageCode).sort();

register.js code is:

import { initI18nAddon } from "./i18n";
import { languageCodes } from "../../subrepo2/i18n/languages";
initI18nAddon(languageCodes);

Expected behavior

• install required packages(babel presets) to ./build/storybook/packages.json where storybook with other addons installed
• add ./babelrc in ./subrepo1/./storybook with required configuration

Workaround 1
(for me it's not good solution, because i have const enum and need to add babel plugins for it)
Disable useBuiltIns option for preset-env
Add to ./storybook/main:

module.exports = {
babel: async (config, options) => {
        config.presets = config.presets.map(preset => {
            if (Array.isArray(preset)
                && preset.find(presItem => typeof presItem === "string"
                                            && presItem.includes("preset-env"))
                                            && preset.length > 1
                                            && typeof preset[1] === "object") {
                preset[1].useBuiltIns = false;
            }
        });
        return config;
    },

Workaround 2
Use ts-loader(i am already have it in webpack rules), just was need it to patch config of managerWebpack
./storybook/main.js:

const patchWebpackConfig = async (defaultConfig, options) => {
defaultConfig.module.rules.push({
         test: /\.(jsx?|tsx?)$/,
         exclude: /node_modules/,
         use: [
                  {
                    loader: "ts-loader",
                    options: {
                        transpileOnly: true,
                        compilerOptions: {
                           module: "esnext",
                           jsx: "react",
                           declaration: true,
                        },
                    },
                  },
                 ],
})
}
module.exports = {
    managerWebpack: patchWebpackConfig,
    webpackFinal: patchWebpackConfig
    ....
}

Workaround 3

• Install core-js to ./subrepo1 devDependencies
  Move languages.ts to ./subrepo1 folder

Workaround 4

• Install core-js to ./subrepo2 devDependencies
  But it not obvious for developers why this package should have core-js dependency

As i understand useBuiltIns: usage option for force babel to load imports from closest node_modules folder
https://babeljs.io/docs/en/babel-preset-env#usebuiltins
This means core-js will be resolved relative to the file itself and needs to be accessible.

System

 System:
    OS: macOS 11.0.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.67
    Firefox: 76.0.1
    Safari: 14.0.1
  npmPackages:
    @storybook/addon-actions: ^6.1.6 => 6.1.6 
    @storybook/addon-essentials: ^6.1.6 => 6.1.6 
    @storybook/addon-knobs: ^6.1.6 => 6.1.6 
    @storybook/addon-links: ^6.1.6 => 6.1.6 
    @storybook/addon-viewport: ^6.1.6 => 6.1.6 
    @storybook/react: ^6.1.6 => 6.1.6 

Similar issue is #12479

[khats]

it's not clear how storybook compile addons(with ts files) and how add plugins/presets to manager. I have found babel-loader-manager.ts has predefined plugins here, but there is no way to extend this configuration:
https://github.com/storybookjs/storybook/blob/54b14cfe83742cf8198f40b4cd81200b8e58c6b2/lib/core/src/server/manager/babel-loader-manager.ts

[khats]

i have found preset-env is used with useBuiltIns, commenting this flag solves all compilation uses without need to do any other changes

export const presets = [
  [
    require.resolve('@babel/preset-env'),
    { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' },
  ],
  require.resolve('@babel/preset-typescript'),
];

https://github.com/storybookjs/storybook/blob/ba768ffb87a8c5449fd2a6daa78f37ee9c1f3c75/lib/core/src/server/common/babel.ts

why do we need this flag?

[shilman]

cc @ndelangen

[merceyz]

Should be fixed by #13055

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Closing this for now. Please let me know if there's more to be done here!