Rx JS Несовместимый тип с машинописью - PullRequest
Новая
       2

Rx JS Несовместимый тип с машинописью

1 голос
/ 19 марта 2020

Я использую два репо, назовите его web-common и A-frontend. Я обычно npm link web-common от A-frontend. Оба имеют несколько одинаковых зависимостей: React, Typescript, Google Maps, MobX и т. Д. c. У меня никогда не было проблем с этим рабочим процессом. Когда я добавил Rx JS, я начал получать ошибки вроде этого: 

TS2345: Argument of type 'import("/Users/fharvey/code/monolith/A-frontend/node_modules/rxjs/internal/types").OperatorFunction<import("/Users/fharvey/code/monolith/web-common/services/scaffold/replay_pb").ReplayAllMessagesResult, import("/Users/fharvey/code/monolith/A-frontend/src/app/components/pages/RobotReporting/index").TypeSiloCollec...' is not assignable to parameter of type 'import("/Users/fharvey/code/monolith/web-common/node_modules/rxjs/internal/types").OperatorFunction<import("/Users/fharvey/code/monolith/web-common/services/scaffold/replay_pb").ReplayAllMessagesResult, import("/Users/fharvey/code/monolith/A-frontend/src/app/components/pages/RobotReporting/index").TypeSiloCollecti...'.
  Types of parameters 'source' and 'source' are incompatible.

, что вкратце говорит, что ~"A-frontend/node_modules/rxjs/internal/types".OperatorFunction - это не то же самое, что ~"web-common/node_modules/rxjs/internal/types".OperatorFunction. Я многое видел по этому поводу:

Здесь есть одна сложная часть, и это то, что это работает в моей сборке dev, но не в моей сборке prod.

Common Webpack Config 

const path = require('path')
const webpack = require('webpack')
const CircularDependencyPlugin = require('circular-dependency-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const GitRevisionPlugin = require('git-revision-webpack-plugin')
const gitRevisionPlugin = new GitRevisionPlugin({
    /*
     * The gist of this command is
     * 1) Make -rc.X tags sort after main tags (so v3.0.2 is a higher version than v3.0.2-rc.3)
     * 2) Get all tags that point to the current commit, sort by version
     * 3) Return the first (i.e. most recent) tag name
     */
    versionCommand: 'config versionsort.suffix --add "-rc"; git tag --points-at HEAD --sort=-version:refname | head -n 1'
})
// Paths are relative to the client folder, not to this config file, as this is where node is run from

const commonConfig = {
    context: path.resolve('./src'),
    entry: {
        // 'sign-in': 'sign-in',
        // 'app': 'app',
        // home: 'home',                // Signed-out bundle
        'index': 'global'           // Signed-in bundle
    },
    module: {
        rules: [
            {
                test: /\.md$/, use: [
                    { loader: 'html-loader' },
                    { loader: 'markdown-loader' }
                ]
            },
            {
                test: /\.tsx?$/,
                loader: 'ts-loader'
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: { importLoaders: 1 }
                    },
                    { loader: 'postcss-loader' },
                    {
                        loader: 'less-loader',
                        options: {
                            javascriptEnabled: true
                        }
                    }
                ],
                // fallback: 'style-loader'
            },
            {
                test: /\.ttf$/,
                use: 'file-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(svg|png)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    },
    output: {
        publicPath: '/static/',
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // don't bundle unnecessary moment.js bloat
        new webpack.IgnorePlugin(/\.test\.tsx?/),
        new CircularDependencyPlugin({
            exclude: /a\.js|node_modules/,
            failOnError: true
        }),
        gitRevisionPlugin,
        new webpack.EnvironmentPlugin({
            VERSION: gitRevisionPlugin.version()
        })
    ],
    resolve: {
        extensions: ['.js', '.ts', '.tsx'],
        modules: [
            path.resolve('./src'),
            'node_modules'
        ],
        symlinks: false,    // linked dependency peer dependencies resolve correctly
        alias: {
            rxjs: path.resolve('./node_modules/rxjs'),
        },
    },
    optimization: {
        splitChunks: {
            // include all types of chunks
            chunks: 'all',
            cacheGroups: {
                react: {
                    test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
                    name: 'vendor-react',
                    chunks: 'all',
                },
                antd: {
                    test: /[\\/]node_modules[\\/](antd)[\\/]/,
                    name: 'vendor-antd',
                    chunks: 'all',
                }
            }
        }
    },
    target: 'web'
}

module.exports = commonConfig

Dev Webpack Config 

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

const commonConfig = require('./common.config')

const devConfig = Object.assign(commonConfig, {
    mode: 'development',
    devtool: 'eval-cheap-source-map',
    output: Object.assign(commonConfig.output, {
        filename: '[name].js', // [name] resolves to name of bundle (e.g., home, customer)
        chunkFilename: '[name].js',
        path: path.resolve('./build/static')
    }),
    stats: {
        warnings: false
    },
    module: {
        rules: [{
            test: /\.md$/,
            use: [{
                loader: 'html-loader'
            },
            {
                loader: 'markdown-loader'
            }
            ]
        },
        {
            test: /\.tsx?$/,
            use: [{
                loader: 'cache-loader'
            }, // caches typescript compilation,
            {
                loader: 'ts-loader',
                options: {
                    // disables type-checking so it can be handled by fork-ts-checker-webpack-plugin
                    transpileOnly: true
                }
            }
            ]
        },
        {
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1
                    }
                },
                {
                    loader: 'postcss-loader'
                },
                {
                    loader: 'less-loader',
                    options: {
                        javascriptEnabled: true
                    }
                }
            ]
        },
        {
            test: /\.ttf$/,
            use: 'file-loader'
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(svg|png)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192
                }
            }]
        }
        ]
    },
    plugins: commonConfig.plugins.concat(
        new MiniCssExtractPlugin({
            filename: '[name].css'
        }),
        // Move typescript type checking to a separate process to speed up compile time
        new ForkTsCheckerWebpackPlugin({
            tsconfig: '../tsconfig.json',
            useTypescriptIncrementalApi: true, // uses incremental compilation api from typescript (2.7+)
            async: true // Used for docker
        }),
        new HtmlWebpackPlugin({
            filename: '../index.html',
            template: 'signed-in-template.html',
            favicon: 'assets/images/favicon.ico'
        }),
        new webpack.EnvironmentPlugin({
            //  some stuff 
        })
    )
})

module.exports = devConfig

Prod Webpack Config 

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserJSPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const commonConfig = require('./common.config')

const prodConfig = Object.assign(commonConfig, {
    mode: 'production',
    devtool: false,
    output: Object.assign(commonConfig.output, {
        filename: '[name].[contenthash].js', // [name] resolves to name of bundle (e.g., home, customer)
        chunkFilename: '[name].[contenthash].js',
        path: path.resolve('./prod/static')
    }),
    plugins: commonConfig.plugins.concat(
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        }),
        new ForkTsCheckerWebpackPlugin({
            tsconfig: '../tsconfig.json',
            useTypescriptIncrementalApi: true, // uses incremental compilation api from typescript (2.7+)
            async: true // Makes docker work
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        new HtmlWebpackPlugin({
            filename: '../index.html',
            template: 'signed-in-template.html',
            favicon: 'assets/images/favicon.ico'
        }),
        new webpack.EnvironmentPlugin({
            // some stuff
        })
    ),
    optimization: Object.assign(commonConfig.optimization, {
        minimizer: [
            new TerserJSPlugin({
                parallel: true
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    })
})

module.exports = prodConfig

tsconfig 

{
    "compilerOptions": {
        "skipLibCheck": true,
        "alwaysStrict": true,
        "baseUrl": "src",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "jsx": "react",
        "module": "esnext",
        "moduleResolution": "node",
        "lib": [
            "dom",
            "es2015" // Promise, classes, etc. tsc injects shims for ES5 browsers
        ],
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strictNullChecks": true,
        "target": "es5",
        "types": [
            "reflect-metadata",
            "googlemaps",
            "google.analytics",
            "jest",
            "jest-enzyme"
        ],
        "paths": {
            "*": [
                "node_modules/@types/*",
                "*"
            ],
            "rxjs": [
                "node_modules/rxjs"
            ],
            "rxjs/*": [
                "node_modules/rxjs/*"
            ]
        },
    },
    "exclude": [
        "node_modules",
        "src/**/*.test.ts",
        "src/**/*.test.tsx",
        "node_modules/web-common/node_modules/*"
    ],
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "typings/*.d.ts"
    ]
}

Я прошу прощения за то, что не сократил мою вставку, на данный момент у меня буквально нет Идея, почему это происходит, и думал, что я просто включил бы все. Я не использую любой import ... from "rxjs/internal", но это происходит за кулисами. Этого не происходит, и никогда не случалось, с любой другой зависимостью. Я попытался установить web-common вместо ссылки, без игры в кости.

1 Ответ

1 голос
/ 21 марта 2020

Я думаю, что это также ошибка для вашей сборки dev, но она не сработает при ошибке TS, потому что вы установили transpileOnly: true в конфигурации загрузчика dev. Ts.

Типы всегда несовместимы, поскольку они поступают из 2 различных установок Rx JS - как 2 отдельных модуля. Единственный простой способ исправить это, о котором я могу подумать, - это физически установить web-common в ваш проект, по крайней мере, до создания производственной сборки.

Это всего лишь ошибка Typescript, и до тех пор, пока 2 установки Rx JS являются совместимыми версиями, фактически созданный код JS, вероятно, будет работать нормально.

Тем не менее, веб-пакет, вероятно, думает об этом так же, и , вероятно, добавит 2 версии Rx JS в комплект - 1 используется web-common, а другая используется A-frontend.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...