Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix/12745 babel config loading #15628

Closed
wants to merge 7 commits into from
Closed

Fix/12745 babel config loading #15628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
61d535f
edit docs to tel users the custom babel config should be in the story…
ndelangen Jul 19, 2021
5c24415
add support for babel config file exporting a function
ndelangen Jul 19, 2021
977f0fe
add support for babel.config.ts
ndelangen Jul 19, 2021
0f3a37d
simplify load-custom-babel-config to not do any if|or. just returns w…
ndelangen Jul 19, 2021
094fc12
do not load babel config files from upward directories by default
ndelangen Jul 21, 2021
07576b4
improve support for babel config files written in typescript
ndelangen Jul 21, 2021
a5a58a6
fix tests
ndelangen Jul 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/configure/babel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,7 @@ Check out our [source](https://github.com/storybookjs/storybook/blob/next/lib/co

### Custom config file

If your project has a `.babelrc` file, we'll use that instead of the default config file.

You can also place a `.storybook/.babelrc` file to use a special configuration for Storybook only.
If your project has a `.storybook/.babelrc` file, we'll use that instead of the default config file.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to the code https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/utils/load-custom-babel-config.ts#L79 there are more filenames considered for loading in the .storybook folder

  • .babelrc
  • .babelrc.json
  • .babelrc.js
  • babel.config.json
  • babel.config.js

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Important to note as well that the recommended setting for Babel 7 is to use babel.config.json, lots of people are renaming their configuration file so it would be nice indeed to see that extension in the docs

Ref: https://babeljs.io/docs/en/config-files#6x-vs-7x-babelrc-loading


### Custom configuration

Expand Down
2 changes: 2 additions & 0 deletions lib/core-common/src/utils/babel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@ const presets = [
export const babelConfig: () => TransformOptions = () => {
return {
sourceType: 'unambiguous',
babelrc: false,
configFile: false,
presets: [...presets],
plugins: [...plugins],
};
Expand Down
21 changes: 13 additions & 8 deletions lib/core-common/src/utils/load-custom-babel-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import JSON5 from 'json5';

import { logger } from '@storybook/node-logger';
import { TransformOptions } from '@babel/core';
import { serverRequire } from '..';

function removeReactHmre(presets: TransformOptions['presets']) {
const index = presets.indexOf('react-hmre');
Expand All @@ -25,7 +26,7 @@ function loadFromPath(babelConfigPath: string): TransformOptions {

try {
// eslint-disable-next-line global-require, import/no-dynamic-require
config = require(babelConfigPath);
config = serverRequire(babelConfigPath);
logger.info('=> Loading custom babel config as JS');
} catch (e) {
error.js = e;
Expand All @@ -48,10 +49,16 @@ function loadFromPath(babelConfigPath: string): TransformOptions {
throw error.js;
}

config = { ...config, babelrc: false };
if (config instanceof Function) {
config = config();
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling the config function without an argument could be problematic. Babel calls the function with an api object https://babeljs.io/docs/en/config-files#config-function-api
In my opinion it is ok to stub that api and make sure that calls to the methods don't fail. The env method should be easy to reimplement.

}

config = { ...config, babelrc: false, configFile: false };
}

if (!config) return null;
if (!config) {
return null;
}

// Remove react-hmre preset.
// It causes issues with react-storybook.
Expand All @@ -69,10 +76,7 @@ function loadFromPath(babelConfigPath: string): TransformOptions {
return config;
}

export const loadCustomBabelConfig = async function (
configDir: string,
getDefaultConfig: () => TransformOptions
) {
export const loadCustomBabelConfig = async (configDir: string) => {
// Between versions 5.1.0 - 5.1.9 this loaded babel.config.js from the project
// root, which was an unintentional breaking change. We can add back project support
// in 6.0.
Expand All @@ -81,6 +85,7 @@ export const loadCustomBabelConfig = async function (
loadFromPath(path.resolve(configDir, '.babelrc.json')) ||
loadFromPath(path.resolve(configDir, '.babelrc.js')) ||
loadFromPath(path.resolve(configDir, 'babel.config.json')) ||
loadFromPath(path.resolve(configDir, 'babel.config.ts')) ||
loadFromPath(path.resolve(configDir, 'babel.config.js'));

if (babelConfig) {
Expand All @@ -92,5 +97,5 @@ export const loadCustomBabelConfig = async function (
return babelConfig;
}

return getDefaultConfig();
return null;
};
2 changes: 2 additions & 0 deletions lib/core-server/src/__snapshots__/html-kitchen-sink_preview-dev
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ Object {
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Expand Down
2 changes: 2 additions & 0 deletions lib/core-server/src/__snapshots__/html-kitchen-sink_preview-prod
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ Object {
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Expand Down
2 changes: 2 additions & 0 deletions lib/core-server/src/__snapshots__/vue-3-cli_preview-dev
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ Object {
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Expand Down
2 changes: 2 additions & 0 deletions lib/core-server/src/__snapshots__/vue-3-cli_preview-prod
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ Object {
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Expand Down
2 changes: 2 additions & 0 deletions lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-dev
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ Object {
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Expand Down
2 changes: 2 additions & 0 deletions lib/core-server/src/__snapshots__/web-components-kitchen-sink_preview-prod
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ Object {
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"cacheDirectory": "NODE_MODULES/.cache/storybook/babel",
"configFile": false,
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Expand Down
10 changes: 5 additions & 5 deletions lib/core-server/src/presets/common-preset.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,18 @@ import {
getManagerMainTemplate,
getPreviewMainTemplate,
loadCustomBabelConfig,
babelConfig,
babelConfig as getDefaultBabelConfig,
loadEnvs,
Options,
} from '@storybook/core-common';

export const babel = async (_: unknown, options: Options) => {
const { configDir, presets } = options;

return loadCustomBabelConfig(
configDir,
() => presets.apply('babelDefault', babelConfig(), options) as any
);
const babelConfigFromFile = await loadCustomBabelConfig(configDir);
const defaultBabelConfig = await getDefaultBabelConfig();

return presets.apply('babelDefault', babelConfigFromFile || defaultBabelConfig, options);
};

export const logLevel = (previous: any, options: Options) => previous || options.loglevel || 'info';
Expand Down