故事书/反应/打字稿和情感的组件选择器错误

编程问答 2022-08-13

问题描述

我正在尝试让Emotion与组件选择器一起玩。

但是当我这样做时：

const Test = styled.div`
  color: blue;
`;

const Test2 = styled.div`
  ${Test} {
    color: red;
  }
`;

然后我得到这个错误： Component selectors can only be used in conjunction with babel-plugin-emotion.

而且我似乎无法解决它-在情感仓库上看到了类似的问题，但是尝试解决问题的@emotion/styled/macro似乎没有效果。

也许应该提到我也在使用情感主题。

我的.babelrc文件：

{
  "presets": ["@babel/react","@babel/preset-env","@babel/preset-typescript"],"plugins": [
    "@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties","@babel/plugin-proposal-object-rest-spread",[
      "transform-inline-environment-variables",{
        "include": ["NODE_ENV"]
      }
    ],"emotion"
  ]
}

tsconfig.js：

{
  "compilerOptions": {
    "outDir": "dist","module": "esnext","lib": ["dom","esnext"],"moduleResolution": "node","jsx": "react","sourceMap": true,"declaration": true,"esModuleInterop": true,"noImplicitReturns": true,"noImplicitThis": true,"noImplicitAny": true,"strictnullchecks": true,"suppressImplicitAnyIndexErrors": true,"noUnusedLocals": true,"noUnusedParameters": true,"allowSyntheticDefaultImports": true,"resolveJsonModule": true
  },"include": ["src"],"exclude": ["node_modules","dist","**/__mocks__/*"]
}

在webpack中使用babel-loader：

      {
        test: /\.(ts|js)x?$/,use: 'babel-loader',exclude: /node_modules/,},

和故事书main.js设置：

const path = require('path');

module.exports = {
  stories: ['../src/components/**/*.stories.tsx'],addons: [
    '@storybook/addon-actions','@storybook/addon-links','@storybook/addon-knobs','@storybook/addon-actions/register','@storybook/addon-viewport/register','@storybook/addon-storysource','@storybook/addon-backgrounds/register',],webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,loader: require.resolve('babel-loader'),options: {
        plugins: ['emotion'],presets: [['react-app',{ flow: false,typescript: true }]],});

    config.resolve.extensions.push('.ts','.tsx');
    return config;
  },};

最后是package.json中的所有devPackages：

    "@babel/cli": "^7.8.4","@babel/core": "^7.9.6","@babel/plugin-external-helpers": "^7.8.3","@babel/plugin-proposal-class-properties": "^7.8.3","@babel/plugin-proposal-object-rest-spread": "^7.9.6","@babel/plugin-transform-runtime": "^7.10.0","@babel/preset-env": "^7.10.0","@babel/preset-react": "^7.10.0","@babel/preset-typescript": "^7.9.0","@emotion/core": "^10.0.28","@emotion/styled": "^10.0.27","@storybook/addon-actions": "^6.0.21","@storybook/addon-backgrounds": "^6.0.21","@storybook/addon-knobs": "^6.0.21","@storybook/addon-links": "^6.0.21","@storybook/addon-storysource": "^6.0.21","@storybook/addon-viewport": "^6.0.21","@storybook/addons": "^6.0.21","@storybook/react": "^6.0.21","@svgr/webpack": "^5.4.0","@testing-library/jest-dom": "^5.10.1","@testing-library/react": "^10.0.4","@types/jest": "^25.2.3","@types/react": "^16.9.35","@types/react-dom": "^16.9.8","@types/react-test-renderer": "^16.9.2","@types/styled-system": "^5.1.9","@typescript-eslint/eslint-plugin": "^3.3.0","@typescript-eslint/parser": "^3.3.0","autoprefixer": "^9.8.0","babel-jest": "^26.0.1","babel-loader": "^8.1.0","babel-plugin-emotion": "^10.0.33","babel-plugin-external-helpers": "^6.22.0","babel-plugin-macros": "^2.8.0","babel-plugin-named-asset-import": "^0.3.6","babel-plugin-transform-inline-environment-variables": "^0.4.3","babel-preset-env": "^1.7.0","babel-preset-preact": "^2.0.0","babel-preset-react-app": "^9.1.2","clean-webpack-plugin": "^3.0.0","copy-webpack-plugin": "^6.0.1","cross-env": "^7.0.2","css-loader": "^3.5.3","eslint": "^7.2.0","eslint-config-prettier": "^6.11.0","eslint-plugin-prettier": "^3.1.4","eslint-plugin-react": "^7.20.5","eslint-plugin-react-hooks": "^4.0.8","html-webpack-plugin": "^4.3.0","husky": "^4.2.5","jest": "^26.0.1","jest-canvas-mock": "^2.2.0","jest-matchmedia-mock": "^1.0.1","lint-staged": "^10.2.6","node-sass": "^4.14.1","postcss-loader": "^3.0.0","prettier": "^2.0.5","react": "^16.13.1","react-dom": "^16.13.1","react-spring": "^8.0.27","react-test-renderer": "^16.13.1","react-use-gesture": "^7.0.15","sass-loader": "^8.0.2","semver": "^7.3.2","style-loader": "^1.2.1","styled-system": "^5.1.5","svg-react-loader": "^0.4.6","typescript": "^3.9.3","url-loader": "^4.1.0","webpack": "^4.43.0","webpack-bundle-analyzer": "^3.8.0","webpack-cli": "^3.3.11","webpack-dev-server": "^3.11.0","webpack-merge": "^4.2.2"

解决方法

好吧，从其他位置导入styled时，显然这是一个已知问题，如此处所示： https://emotion.sh/docs/typescript#define-a-theme

结论： https://github.com/emotion-js/emotion/issues/1305#issuecomment-660401782

emotionreactjsreactjsstorybooktypescripttypescript