0

我正在为组件库创建组件，并希望它们使用我们现有的.scss框架来设置它们的样式。所以我试图在我的文件中包含一个.scss文件，styleguide.config.js以便我的组件可以按照说明书所述进行访问。

我收到以下错误：

TypeError: Cannot read property 'indexOf' of undefined
TypeError: Cannot read property 'indexOf' of undefined
    at resolver.hooks.file.tapAsync (/Users/carnowdev/dev/octane/react-app/node_modules/react-dev-utils/ModuleScopePlugin.js:31:39)
    at AsyncSeriesBailHook.eval [as callAsync] (eval at create (/Users/carnowdev/dev/octane/react-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:67:1)
    at Resolver.doResolve (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/Resolver.js:282:16)
    at resolver.getHook.tapAsync (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/TryNextPlugin.js:19:14)
    at AsyncSeriesBailHook.eval [as callAsync] (eval at create (/Users/carnowdev/dev/octane/react-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:277:1)
    at Resolver.doResolve (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/Resolver.js:282:16)
    at resolver.getHook.tapAsync (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/FileKindPlugin.js:21:14)
    at AsyncSeriesBailHook.eval [as callAsync] (eval at create (/Users/carnowdev/dev/octane/react-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Resolver.doResolve (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/Resolver.js:282:16)
    at resolver.getHook.tapAsync (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/NextPlugin.js:18:14)
    at _next0 (eval at create (/Users/carnowdev/dev/octane/react-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:8:1)
    at _fn0 (eval at create (/Users/carnowdev/dev/octane/react-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:30:1)
    at DescriptionFileUtils.loadDescriptionFile (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:41:16)
    at forEachBail (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/DescriptionFileUtils.js:67:14)
    at args (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/forEachBail.js:30:14)
    at resolver.fileSystem.readJson (/Users/carnowdev/dev/octane/react-app/node_modules/enhanced-resolve/lib/DescriptionFileUtils.js:24:52)

这是我的全部内容styleguide.config.js：（底部的相关部分）：

const path = require('path');

module.exports = {
    // A glob pattern that matches the component modules to load into the guide
    // Can be an array of glob patterns
    components: 'src/components/ui/**/[A-Z]*.tsx',
    // Necessary to load TS prop types automatically
    propsParser: require('react-docgen-typescript').withCustomConfig(
        './tsconfig.json'
    ).parse,
    // Render one section or component per page
    pagePerSection: true,
    // Determines the sections in the left nav bar
    sections: [
        {
            name: 'CarNow Component Library',
            content: 'src/components/ui/docs/styleguidist.md'
        },
        {
            name: 'UI Components',
            content: 'src/components/ui/docs/ui.md',
            components: 'src/components/ui/**/[A-Z]*.tsx',
            sections: [
                {
                    name: 'Common Components',
                    content: 'src/components/ui/common-elements/CommonElements.md',
                },
                {
                    name: 'Styled Search',
                }
            ],
            sectionDepth: 2
        },
    ],
    ignore: ['src/components/ui/common-elements/CommonElements.tsx'],
    skipComponentsWithoutExample: true,
    require: [
        path.join(__dirname, '../public/static/scss/cnx-agent/cnx-agent-styles.scss')
    ]
};

一些上下文：

  • 反应应用程序是用npx create-react-app my-app --template typescript
  • 文件的位置.scss：在我的公司，我们正在迁移到 React 并创建一个组件库，我们正在使用react-styleguidist. 因此，我们有一个现有的 SASS 框架，它存在于 react 应用程序（和 styleguidist）所在的同级文件夹中
  • 我尝试导入生成的 CSS 文件并得到相同的错误
  • 当我指向一个不存在的文件时，我得到一个不同的错误：
multi ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ../public/static/scss/cnx-agent/asdf.scss ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js ./node_modules/react-dev-utils/webpackHotDevClient.js
Module not found: Can't resolve '/Users/carnowdev/dev/octane/public/static/scss/cnx-agent/asdf.scss' in '/Users/carnowdev/dev/octane/react-app'
multi (webpack)-dev-server/client?http://localhost (webpack)/hot/dev-server.js ./node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ../public/static/scss/cnx-agent/asdf.scss ./node_modules/react-styleguidist/lib/client/index ./node_modules/react-dev-utils/webpackHotDevClient.js
Module not found: Can't resolve '/Users/carnowdev/dev/octane/public/static/scss/cnx-agent/asdf.scss' in '/Users/carnowdev/dev/octane/react-app'

有任何想法吗？

4

0 回答 0