WebpackOptionsValidationError:故事书中的无效配置对象

时间:2019-07-09 18:55:48

标签: reactjs typescript webpack storybook

我的Storybook Webpack配置出现配置错误。

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[0].include should be one of these:
ERR!    RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? } | [RegExp | string | function | [(recursive)] | object { and?, exclude?, include?, not?, or?, test? }]

我尝试导入的一组Webpack规则似乎有问题。此工作在我的另一个版本中进行,但是由于某种原因在这里不起作用?!

我尝试将webpack / storybook版本更改为稍旧的版本,并确保NPM软件包与我以前的版本匹配。

webpack.config.js(在.storybook文件夹中)

const { resolve } = require('path');

module.exports = (baseConfig, env, defaultConfig) => {
    const rulesFn = require('../.webpack/rules.js').rules;
    const rules = rulesFn(
        {
            outputLegacy: '',
            generated: '',
            output: '',
            src: '',
        },
        input => input['development'],
        input => input['modern'],
    );
    delete rules[1].include;
    defaultConfig.module.rules = rules;
    defaultConfig.resolve.extensions = ['.ts', '.tsx', '.js'];

    return defaultConfig;
};

rules.js在.webpack文件夹中

const { configureBabel } = require('../_babel.config');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

/**
 * @param themePaths {ThemePaths}
 * @param selectMode {SelectMode}
 * @param selectTarget {SelectTarget}
 * @returns {*[]}
 */
function rules(themePaths, selectMode, selectTarget) {
    const babelOptions = configureBabel(selectMode, selectTarget);
    const babelEnvDeps = require('webpack-babel-env-deps');
    return [
        {
            include: [
                path.resolve(__dirname, '..', 'server'),
                path.resolve(__dirname, '..', 'runtime'),
                themePaths.src,
                themePaths.generated,
                path.resolve(__dirname, '..', 'node_modules', 'debug'),
                babelEnvDeps.include(),
            ],
            // exclude: [/node_modules/],
            test: /\.(ts|tsx|mjs|js|svg|graphql)$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: babelOptions,
                },
            ],
        },
        {
            test: [/\.scss$/],
            use: [
                selectMode({ development: 'style-loader' }),
                selectMode({ production: MiniCssExtractPlugin.loader }),
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1,
                        localIdentName: '[name]-[local]-[hash:base64:3]',
                        modules: false,
                    },
                },
                {
                    loader: 'sass-loader',
                    options: {
                        data: `
                        @import "_vars";
                        @import "_mixins";
                        @import "_normalize";
                        @import "_reset";
                        `,
                        includePaths: ['src/scss'],
                    },
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [require('autoprefixer')()],
                    },
                },
                'resolve-url-loader',
            ].filter(Boolean),
        },
        {
            test: /\.(jpe?g|png|svg|gif)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {},
                },
            ],
        },
        {
            test: /\.(woff2?)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]',
                    },
                },
            ],
        },
    ];
}

module.exports.rules = rules;

package.json 在根中

{
  "name": "eat",
  "version": "1.0.0",
  "description": "Killer Storybook Config",
  "scripts": {
    "start": "HTTPS=true webpack-dev-server --mode development --open --hot",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9001 -c .storybook",
    "precommit": "lint-staged",
    "eslint:global": "eslint src -c src/.eslintrc.js --ext .js,.jsx,.tsx,.ts",
    "eslint:global:fix": "eslint --fix src -c src/.eslintrc.js --ext .js,.jsx,.tsx,.ts"
  },
  "lint-staged": {
    "src/**/*.{js,jsx,tsx,json,css}": [
      "prettier --write",
      "git add"
    ]
  },
  "keywords": [
    "Storybook",
    "Webpack",
    "React",
    "Typescript"
  ],
  "author": "Harry Ghazni",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@types/jest": "24.0.0",
    "@types/node": "10.12.24",
    "@types/react": "^16.8.14",
    "@types/react-dom": "^16.8.0",
    "@types/react-router-dom": "^4.3.1",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "body-parser": "^1.18.3",
    "classnames": "^2.2.6",
    "concurrently": "^4.1.0",
    "cors": "^2.8.5",
    "mongoose": "^5.4.9",
    "nodemon": "1.18.9",
    "open": "^6.2.0",
    "open-cli": "^1.0.5",
    "postcss-sass-loader": "^1.1.0",
    "postcss-scss": "^2.0.0",
    "react": "^16.8.1",
    "react-dom": "^16.8.1",
    "react-modal": "^3.8.1",
    "react-router": "^4.3.1",
    "react-scripts": "2.1.3",
    "react-transition-group": "^4.0.1",
    "resolve-url-loader": "^3.1.0",
    "st": "^1.2.2",
    "webpack-babel-env-deps": "^1.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/node": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@csstools/postcss-sass": "^4.0.0",
    "@storybook/addon-knobs": "4.0.4",
    "@storybook/react": "^4.0.7",
    "@types/storybook__addon-knobs": "5.0.1",
    "@types/storybook__react": "^4.0.2",
    "@types/webpack-env": "^1.13.9",
    "@typescript-eslint/eslint-plugin": "^1.11.0",
    "@typescript-eslint/parser": "^1.11.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-loader": "8.0.4",
    "connect": "^3.6.6",
    "crossbow": "^4.3.3",
    "css-loader": "^2.1.0",
    "eslint": "^6.0.1",
    "express": "^4.16.4",
    "file-loader": "^3.0.1",
    "fs": "0.0.1-security",
    "html-webpack-plugin": "^3.2.0",
    "https": "^1.0.0",
    "lint-staged": "^8.2.1",
    "mini-css-extract-plugin": "^0.7.0",
    "node-sass": "4.11.0",
    "postcss-loader": "^3.0.0",
    "react-router-dom": "^4.3.1",
    "sass-loader": "7.1.0",
    "style-loader": "^0.23.1",
    "typescript": "^3.3.3",
    "webpack": "^4.28.4",
    "webpack-cli": "3.3.1",
    "webpack-dev-server": "3.3.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "main": "index.js",
  "repository": "git@github.com:hghazni/killer-storybook-config.git"
}

我希望能够摆脱该错误并运行能够使用全局scss变量的故事书。希望有人能看到我所缺少的!

0 个答案:

没有答案