styled-jsx is not enabled in rollup's project, it seems that babel is not working?

[shervinchen]

My rollup and babel version: "rollup": "^2.75.7" "@babel/core": "^7.18.6"

My rollup config:

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(),
    babel({
      babelHelpers: 'bundled',
      exclude: '**/node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    }),
    typescript({ tsconfig: './tsconfig.json' }),
    image(),
    postcss(),
    serve({
      contentBase: ['', 'public'],
      host: 'localhost',
      port: 3000,
    }),
    livereload({ watch: 'build' }),
  ],
};

export default config;

My .babelrc.json:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        },
        "modules": false
      }
    ],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
  "plugins": ["styled-jsx/babel"]
}

when I run rollup --config ./rollup.config.js --watch --environment NODE_ENV:development, browser's console reports an error:

Warning: Received `true` for a non-boolean attribute `jsx`.

If you want to write it to the DOM, pass a string instead: jsx="true" or jsx={value.toString()}.

and I find that style tag is still in html, it seems that rollup don't load the babel config? Is there an error in my babel config and how should I change it?

[huozhi]

Not sure how you entire project look like, can you provide a complete reproduction repo? Did you check if the babel configuration are passed down or the styled-jsx plugin is consumed?

[shervinchen]

Not sure how you entire project look like, can you provide a complete reproduction repo? Did you check if the babel configuration are passed down or the styled-jsx plugin is consumed?

My repo is here: https://github.com/shervinchen/raw-ui you can clone it and run pnpm install & pnpm run dev , open localhost:3000 and check the brower console error

[huozhi]

You need to use "jsx": "preserve" in tsconfig.json to let typescript plugin resolve the modules and then pass code down to babel plugin for transform. And also you need to add __dirname: '' to your replace plugin to replace the __dirname in current jsx bundle.

I'll update the document later for this

[shervinchen]

You need to use "jsx": "preserve" in tsconfig.json to let typescript plugin resolve the modules and then pass code down to babel plugin for transform. And also you need to add __dirname: '' to your replace plugin to replace the __dirname in current jsx bundle.

I'll update the document later for this

Thank you very much!