Storybook/React/Typescript 和 Emotion 的组件选择器错误

Question

我正在尝试让 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"

Answer 1

好吧，显然这是从另一个位置导入 styled 时的一个已知问题，就像这里建议的那样： https://emotion.sh/docs/typescript#define-a-theme

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

Storybook/React/Typescript 和 Emotion 的组件选择器错误

Component selector error with Storybook/React/Typescript and Emotion

emotion

typescript

reactjs

storybook