Rollup项目中styled-jsx未启用，疑似Babel未生效问题排查

你的问题核心是styled-jsx的Babel插件未生效，导致组件中的<style jsx>标签未被编译，原生React将jsx属性识别为普通DOM属性触发警告，同时样式也无法正常注入。以下是具体问题点和修改方案：

问题根源 #

1. Rollup插件顺序错误：你将babel插件放在typescript插件之前，导致TypeScript编译后的代码覆盖了Babel的处理结果，styled-jsx的转换逻辑完全没机会生效。
2. Babel目标环境配置错误：@babel/preset-env的targets设置为node: current，但你实际是在浏览器环境运行代码，编译目标不匹配可能导致后续处理异常。

修改步骤 #

1. 调整Rollup插件顺序 #

将typescript插件移至babel插件之前，确保TypeScript先将TS/TSX转译为JS/JSX，再由Babel处理styled-jsx转换：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { babel } from '@rollup/plugin-babel';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import image from '@rollup/plugin-image';
import replace from '@rollup/plugin-replace';
import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

const config = {
  input: 'src/index.tsx',
  output: {
    file: 'build/index.js',
    format: 'umd',
    sourcemap: true,
  },
  plugins: [
    replace({
      preventAssignment: true,
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    resolve(),
    commonjs(),
    // 先处理TypeScript转译
    typescript({ tsconfig: './tsconfig.json' }),
    // 再用Babel处理styled-jsx和环境兼容
    babel({
      babelHelpers: 'bundled',
      exclude: '**/node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      // 明确指定配置文件，避免自动查找异常
      configFile: './.babelrc.json',
    }),
    image(),
    postcss(),
    serve({
      contentBase: ['', 'public'],
      host: 'localhost',
      port: 3000,
    }),
    livereload({ watch: 'build' }),
  ],
};

export default config;

2. 修正Babel目标环境配置 #

将.babelrc.json中@babel/preset-env的targets改为浏览器兼容目标，替换原有的Node.js配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 0.25%", "not dead"]
        },
        "modules": false
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": ["styled-jsx/babel"]
}

3. 确认TypeScript的JSX配置 #

检查tsconfig.json的compilerOptions，确保JSX模式正确配置（适配React和styled-jsx）：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 或 "react"，根据React版本选择
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

4. 验证依赖完整性 #

确保已安装所有必要依赖：

npm install styled-jsx @babel/preset-react @babel/preset-typescript @babel/preset-env --save-dev

验证效果 #

修改完成后，重新执行你的Rollup命令：

rollup --config ./rollup.config.js --watch --environment NODE_ENV:development

此时浏览器控制台的jsx属性警告会消失，<style jsx>标签也会被styled-jsx正确编译，样式将正常注入页面。

内容的提问来源于stack exchange，提问作者shervinchen