How to resolve rollup build error when using emotion: 'default' is not exported by @emotion\memoize\dist\memoize.cjs.js
Try below way, hopefully it will work
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/@emotion/memoize/dist/memoize.cjs.js': ['memoize']
}
}),
Comments
-
Steve almost 2 years
I'm trying to build a standardized react button component for our enterprise library. I want to be able to use @emotion/styled to generate the styled react component. We are using rollup as our package builder, which is transpiling from typescript to esm and commonjs. When I run the build, I'm getting the following error:
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';
I'm still learning the ins and outs of building with rollup and typescript, so I can't tell if I'm just doing something wrong, or if there's an actual issue with the @emotion libraries.
I've tried setting :
commonjs({ include: ['/node_modules/**', '../../../node_modules/**'], namedExports: { 'node_modules/@emotion/memoize/dist/memoize.cjs.js': ['memoize'] } })
and
commonjs({ include: ['/node_modules/**', '../../../node_modules/**'], namedExports: { 'node_modules/@emotion/memoize/dist/memoize.cjs.js': ['default'] } })
But neither work. I've tried installing different versions of @emotions, from 10.0.0 to 10.0.10, and it happens with all versions. I've also tried installing @emotion/memoize directly, but it also didn't work.
Here are my build settings and code:
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;
custom-button-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" } }
I should be able to build this component without any issue, but instead I get the error above.
Thanks!
-
Steve about 5 yearsSorry, I saw that I had pasted the text in without switching the \ to / in what i had tried. That is actually one of the things I tried, but no luck. Thanks though.
-
jShubh about 5 yearsCan you please clean ur devDependencies, i can see duplicate dependency there for @emotion/core, emotion/styled. Also can you please install emotion as dependency and try rebuilding
-
jShubh about 5 years
-
Steve about 5 yearsFollowing the the thread in that issue helped me to get the package to build by setting
include: [/node_modules/]
as a regex. However, when I try to use the component, I'm now receiving an error stating memoize_cjs is not a function in the built package. -
Ahmed Abdelrahman over 4 yearsThere is an open bug for this at rollup, not resolved yet. you'll have to do the imports the ugly way for now. github.com/rollup/rollup/issues/3011#issuecomment-516947459
-
radihuq about 4 yearsHey I wasn't having the exact problem as you but when I implemented EmotionJS into my component library I was having issues. I did what Steve mentioned and it fixed my issue. I was using commonjs; I changed
commonjs({ include: ['node_modules/**'], ...)}
tocommonjs({ include: [/node/modules/], ...)}
-
nukenin about 2 yearsActually it turns out, if you look at the code, you will see something similar to: 'use strict'; if (process.env.NODE_ENV === "production") { module.exports = require("./unitless.cjs.prod.js"); } else { module.exports = require("./unitless.cjs.dev.js"); } Thus the replace() plugin fix works.