Как устранить ошибку сборки накопительного пакета при использовании эмоций: 'default' не экспортируется @emotion \ memoize \ dist \ memoize.cjs.js

Я пытаюсь создать стандартизированный компонент кнопки реакции для нашей корпоративной библиотеки. Я хочу иметь возможность использовать @ эмоциональность / стиль для создания стилизованного компонента реакции. Мы используем накопительный пакет в качестве нашего конструктора пакетов, который переносит текст из машинописного текста в esm и commonjs. Когда я запускаю сборку, я получаю следующую ошибку: Error: 'default' is not exported by node_modules\@emotion\memoize\dist\memoize.cjs.js node_modules\@emotion\is-prop-valid\dist\is-prop-valid.esm.js (1:7) 1: import memoize from '@emotion/memoize';

Я все еще изучаю тонкости сборки с помощью объединения и машинописного текста, поэтому я не могу сказать, делаю ли я что-то не так, или есть реальная проблема с библиотеками @emotion.

Я пробовал установить:

commonjs({
    include: ['/node_modules/**', '../../../node_modules/**'],
    namedExports: {
        'node_modules/@emotion/memoize/dist/memoize.cjs.js': ['memoize']
    }
})

а также

commonjs({
    include: ['/node_modules/**', '../../../node_modules/**'],
    namedExports: {
        'node_modules/@emotion/memoize/dist/memoize.cjs.js': ['default']
    }
})

Но ни то, ни другое не работает. Я пробовал устанавливать разные версии @emotions, от 10.0.0 до 10.0.10, и это происходит со всеми версиями. Я также пробовал напрямую установить @ emoize / memoize, но это тоже не сработало.

Вот мои настройки и код сборки:

custom-button.tsx

import React from 'react';
import CustomButtonProps from './custom-button-props';
import styled, { StyledComponent } from '@emotion/styled';
import { StyleConstants } from '@enterprise-api/constants';

export class CustomButton extends React.PureComponent<CustomButtonProps> {
    public constructor(props: CustomButtonProps) {
        super(props);
    }

    private DefaultButton: StyledComponent<any, any, any> = styled.button`
        height: 2rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        ${StyleConstants.defaultButton}
    `;

    public render(): React.ReactNode {
        if (this.props.style) {
            return (
                <button style={this.props.style} onClick={this.props.onClick}>
                    {this.props.text}
                </button>
            );
        }
        return <this.DefaultButton onClick={this.props.onClick}>{this.props.text}</this.DefaultButton>;
    }
}

export default CustomButton;

пользовательские кнопки props.tsx

import { MouseEvent, KeyboardEvent, CSSProperties } from 'react';

export interface CustomButtonProps {
    text: string;
    onClick: (event: MouseEvent | KeyboardEvent) => void;
    style?: CSSProperties;
}

export default CustomButtonProps;

rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import pkg from './package.json';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    input: 'src/index.ts',
    output: [
        {
            file: pkg.main,
            format: 'cjs',
            exports: 'named'
        },
        {
            file: pkg.module,
            format: 'es',
            compact: true
        }
    ],
    external: [...Object.keys(pkg.peerDependencies || {})],

    plugins: [
        typescript({
            typescript: require('typescript')
        }),
        resolve(),
        commonjs({
            include: ['/node_modules/**', '../../../node_modules/**']
        })
    ]
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./lib/", // path to output directory
        "sourceMap": false, // allow sourcemap support
        "strictNullChecks": true, // enable strict null checks as a best practice
        "module": "es6", // specify module code generation
        "jsx": "react", // use typescript to transpile jsx to js
        "target": "es5", // specify ECMAScript target version
        "allowJs": false, // allow a partial TypeScript and JavaScript codebase
        "strict": true,
        "declaration": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noImplicitThis": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "**/__tests__/*"]
}

package.json

{
    "name": "@custom-component/button",
    "version": "0.0.0",
    "description": "",
    "main": "lib/index.js",
    "types": "lib/index.d.ts",
    "module": "lib/index.esm.js",
    "scripts": {
        "test": "jest --config jestconfig.json --coverage",
        "document": "typedoc --out documentation --hideGenerator --includeDeclarations --exclude \"**/node_modules/**\" src/",
        "compile": "rollup -c",
        "audit": "yarn audit --registry=https://registry.npmjs.org --json > audit-results.json",
        "build": "yarn run clean && yarn run document && yarn run compile",
        "clean": "shx rm -rf lib documentation",
        "prepublishOnly": "yarn run build && yarn version --patch"
    },
    "files": [
        "lib/**/*"
    ],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@emotion/core": "^10.0.0",
        "@emotion/styled": "^10.0.0",
        "@types/jest": "^24.0.3",
        "@types/react": "^16.8.8",
        "@typescript-eslint/eslint-plugin": "^1.1.0",
        "@typescript-eslint/parser": "^1.1.0",
        "awesome-typescript-loader": "^5.2.1",
        "eslint": "^5.12.0",
        "jest": "^24.5.0",
        "react": "^16.8.5",
        "rollup": "^1.7.2",
        "rollup-plugin-commonjs": "^9.2.0",
        "rollup-plugin-node-resolve": "^4.0.0",
        "rollup-plugin-typescript2": "^0.20.1",
        "shx": "^0.3.2",
        "ts-jest": "^24.0.0",
        "typedoc": "^0.14.2",
        "typescript": "^3.2.4"
    },
    "peerDependencies": {
        "@types/react": "^16.8.8",
        "react": "^16.8.5"
    },
    "dependencies": {
        "@emotion/core": "^10.0.0",
        "@emotion/styled": "^10.0.0",
        "@enterprise-api/constants": "^0.0.8-beta"
    }
}

Я смогу собрать этот компонент без каких-либо проблем, но вместо этого я получаю указанную выше ошибку.

Спасибо!


person Steve    schedule 29.03.2019    source источник


Ответы (1)


Попробуйте следующий способ, надеюсь, он сработает

commonjs({
        include: 'node_modules/**',
        namedExports: {
        'node_modules/@emotion/memoize/dist/memoize.cjs.js':['memoize']'
        },
}),
person jShubh    schedule 30.03.2019
comment
Извините, я увидел, что вставил текст, не переключая \ на / в том, что я пробовал. На самом деле это одна из тех вещей, которые я пробовал, но безуспешно. Спасибо хоть. - person Steve; 30.03.2019
comment
Не могли бы вы очистить ur devDependencies, я вижу дублирующуюся зависимость для @ эмоции / ядра, эмоции / стиля. Также можете установить эмоцию как зависимость и попробовать перестроить - person jShubh; 30.03.2019
comment
Ссылки могут помочь: github.com/rollup/ rollup / wiki / github.com/rollup/rollup-plugin- commonjs / issues / 206 - person jShubh; 30.03.2019
comment
Следование ветке в этой проблеме помогло мне собрать пакет, установив include: [/node_modules/] в качестве регулярного выражения. Однако, когда я пытаюсь использовать компонент, я получаю сообщение об ошибке, в котором говорится, что memoize_cjs не является функцией во встроенном пакете. - person Steve; 30.03.2019
comment
В накопительном пакете есть открытая ошибка, которая еще не решена. вам придется делать импорт некрасивым способом. github.com/rollup/rollup/issues/3011#issuecomment-516947459 - person Ahmed Abdelrahman; 21.08.2019
comment
Привет, у меня не было такой проблемы, как у вас, но когда я внедрил EmotionJS в свою библиотеку компонентов, у меня возникли проблемы. Я сделал то, что сказал Стив, и это устранило мою проблему. Я использовал commonjs; Я изменил commonjs({ include: ['node_modules/**'], ...)} на commonjs({ include: [/node/modules/], ...)} - person radihuq; 13.02.2020