我正在尝试为我们的企业库构建标准化的 react 按钮组件。我希望能够使用 @emotion/styled 生成样式化的 react 组件。我们使用 rollup 作为我们的包构建器,它从 typescript 转换为 esm 和 commonjs。当我运行构建时,我收到以下错误:
错误:node_modules\@emotion\memoize\dist\memoize.cjs.js 未导出“默认”
node_modules\@emotion\is-prop-valid\dist\is-prop-valid.esm.js (1:7)
1:从'@emotion/memoize'导入memoize;
我仍在学习使用 rollup 和 typescript 进行构建的细节,所以我无法判断我是否只是做错了什么,或者 @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,所有版本都会发生这种情况。 我也尝试过直接安装@emotion/memoize,但也不起作用。
这是我的build设置和代码:
自定义按钮.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"
}
}
我应该能够毫无问题地构建这个组件,但我却收到了上面的错误。
谢谢!
最佳答案
尝试下面的方法,希望它会起作用
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/@emotion/memoize/dist/memoize.cjs.js': ['memoize']
}
}),
关于reactjs - 如何解决使用情感: 'default' is not exported by @emotion\memoize\dist\memoize. cjs.js时汇总构建错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55425458/