From 37f5d27f282a12f3275f03d6d43f35358ec686c7 Mon Sep 17 00:00:00 2001 From: Filipp Riabchun Date: Sat, 4 Jan 2020 19:37:46 +0000 Subject: [PATCH 1/2] Fix jsconfig support with CRA --- app/react/src/server/cra-config.test.ts | 22 +---------------- app/react/src/server/cra-config.ts | 32 ++++++------------------- 2 files changed, 8 insertions(+), 46 deletions(-) diff --git a/app/react/src/server/cra-config.test.ts b/app/react/src/server/cra-config.test.ts index 4c4425dd8482..656f39dcfd2c 100644 --- a/app/react/src/server/cra-config.test.ts +++ b/app/react/src/server/cra-config.test.ts @@ -1,12 +1,7 @@ /* eslint-disable jest/no-mocks-import */ import fs from 'fs'; import path from 'path'; -import { - applyCRAWebpackConfig, - getModulePath, - getReactScriptsPath, - getTypeScriptRules, -} from './cra-config'; +import { applyCRAWebpackConfig, getReactScriptsPath, getTypeScriptRules } from './cra-config'; import mockRules from './__mocks__/mockRules'; import mockConfig from './__mocks__/mockConfig'; @@ -95,21 +90,6 @@ exit $ret` rules.every(rule => rule.include.find(filePath => filePath.includes('.storybook'))) ).toBe(true); }); - - it('should get the baseUrl from a tsconfig.json', () => { - jest.spyOn(path, 'join').mockImplementation(() => 'project/tsconfig.json'); - jest.mock( - 'project/tsconfig.json', - () => ({ - compilerOptions: { - baseUrl: 'src', - }, - }), - { virtual: true } - ); - expect(getModulePath()).toEqual('src'); - path.join.mockRestore(); - }); }); describe('when used with react-scripts < 2.1.0', () => { diff --git a/app/react/src/server/cra-config.ts b/app/react/src/server/cra-config.ts index a614d4a7f16e..02fc0da84cfa 100644 --- a/app/react/src/server/cra-config.ts +++ b/app/react/src/server/cra-config.ts @@ -6,9 +6,6 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin'; import { normalizeCondition } from 'webpack/lib/RuleSet'; import { logger } from '@storybook/node-logger'; -const JSCONFIG = 'jsconfig.json'; -const TSCONFIG = 'tsconfig.json'; - const appDirectory = fs.realpathSync(process.cwd()); const cssExtensions = ['.css', '.scss', '.sass']; const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass']; @@ -114,23 +111,6 @@ export const getTypeScriptRules = (webpackConfigRules: RuleSetRule[], configDir: }, [] as RuleSetRule[]); }; -export const getModulePath = () => { - // As with CRA, we only support `jsconfig.json` if `tsconfig.json` doesn't exist. - let configName; - if (fs.existsSync(path.join(appDirectory, TSCONFIG))) { - configName = TSCONFIG; - } else if (fs.existsSync(path.join(appDirectory, JSCONFIG))) { - configName = JSCONFIG; - } - - if (configName) { - // eslint-disable-next-line import/no-dynamic-require,global-require - const config = require(path.join(appDirectory, configName)); - return config.compilerOptions && config.compilerOptions.baseUrl; - } - return false; -}; - function mergePlugins(basePlugins: Plugin[], additionalPlugins: Plugin[]) { return [...basePlugins, ...additionalPlugins].reduce((plugins, plugin) => { if ( @@ -171,10 +151,6 @@ export function applyCRAWebpackConfig(baseConfig: Configuration, configDir: stri const tsExtensions = hasTsSupport ? typeScriptExtensions : []; const extensions = [...cssExtensions, ...tsExtensions]; - // Support for this was added in `react-scripts@3.0.0`. - // https://github.com/facebook/create-react-app/pull/6656 - const modulePath = isReactScriptsInstalled('3.0.0') && getModulePath(); - // Remove any rules from baseConfig that test true for any one of the extensions const filteredBaseRules = baseConfig.module.rules.filter( rule => !rule.test || !extensions.some(normalizeCondition(rule.test)) @@ -205,7 +181,13 @@ export function applyCRAWebpackConfig(baseConfig: Configuration, configDir: stri resolve: { ...baseConfig.resolve, extensions: [...baseConfig.resolve.extensions, ...tsExtensions], - modules: baseConfig.resolve.modules.concat(modulePath || []), + modules: Array.from( + new Set([...baseConfig.resolve.modules, ...craWebpackConfig.resolve.modules]) + ), + alias: { + ...baseConfig.resolve.alias, + ...craWebpackConfig.resolve.alias, + }, }, resolveLoader: { modules: ['node_modules', path.join(getReactScriptsPath(), 'node_modules')], From b2dae4089f22c7a5933f1d086ea07c65630116d8 Mon Sep 17 00:00:00 2001 From: Filipp Riabchun Date: Sat, 4 Jan 2020 20:20:02 +0000 Subject: [PATCH 2/2] Fix tests --- app/react/src/server/__snapshots__/cra-config.test.ts.snap | 2 ++ app/react/src/server/cra-config.ts | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/react/src/server/__snapshots__/cra-config.test.ts.snap b/app/react/src/server/__snapshots__/cra-config.test.ts.snap index 73d95cb829ec..94715a0f78ef 100644 --- a/app/react/src/server/__snapshots__/cra-config.test.ts.snap +++ b/app/react/src/server/__snapshots__/cra-config.test.ts.snap @@ -41,6 +41,7 @@ Object { "resolve": Object { "alias": Object { "baseAlias": "base-alias", + "react-native": "react-native-web", }, "extensions": Array [ ".js", @@ -109,6 +110,7 @@ Object { "resolve": Object { "alias": Object { "baseAlias": "base-alias", + "react-native": "react-native-web", }, "extensions": Array [ ".js", diff --git a/app/react/src/server/cra-config.ts b/app/react/src/server/cra-config.ts index 02fc0da84cfa..7f1ba3f27cfe 100644 --- a/app/react/src/server/cra-config.ts +++ b/app/react/src/server/cra-config.ts @@ -182,7 +182,7 @@ export function applyCRAWebpackConfig(baseConfig: Configuration, configDir: stri ...baseConfig.resolve, extensions: [...baseConfig.resolve.extensions, ...tsExtensions], modules: Array.from( - new Set([...baseConfig.resolve.modules, ...craWebpackConfig.resolve.modules]) + new Set([...baseConfig.resolve.modules, ...(craWebpackConfig.resolve.modules || [])]) ), alias: { ...baseConfig.resolve.alias,