undefined when used with webpack

[taoqf]

Do you want to request a feature or report a bug?

A bug.

What is the current behavior?

When I used this lib without next, just together with webpack and babel, my code was transformed into

const style_1 = __webpack_require__(/*! styled-jsx/style */ "./node_modules/styled-jsx/style.js");
...
React.createElement(style_1.default, { id: "1733442698" }, [".cls1.jsx-1733442698{color:#f00;}"]);

, and I check the source code and find there is no default exported in this lab.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

1. create a react project.
2. install this lab.
3. create .babelrc. with content

{
	"presets": [
		"@babel/preset-env"
	],
	"plugins": [
		"@babel/plugin-transform-runtime",
		[
			"styled-jsx/babel",
			{
				"optimizeForSpeed": true
			}
		]
	]
}

4. create webpack.config.js

const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');

const path = require('path')
const webpack = require('webpack')

module.exports = (env, argv) => ({
	mode: 'development',

	entry: {
		ui: './src/ui/ui.tsx', 
		code: './src/main/main.ts'
	},
	module: {
		rules: [
			{
				test: /\.tsx$/,
				exclude: /(node_modules|bower_components)/,
				use: 'babel-loader'
			},
		],
	},

	// Webpack tries these extensions for you if you omit the extension like "import './file'"
	resolve: {
		extensions: ['.tsx', '.ts', '.jsx', '.js']
	},

	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist'), // Compile into a folder called "dist"
	},

	// Tells Webpack to generate "ui.html" and to inline "ui.ts" into it
	plugins: [
		new webpack.DefinePlugin({
			'global': {} 
		}),
		new HtmlWebpackPlugin({
			template: './src/ui/ui.html',
			filename: 'ui.html',
			inject: 'body',
			chunks: ['ui'],
		}),
		new HtmlInlineScriptPlugin(),
		new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/ui/]),
	],
})

What is the expected behavior?

Environment (include versions)

• Version of styled-jsx (or next.js if it's being used): v5.0.0
• Browser: chromium
• OS: Linux

Did this work in previous versions?

I tried v4, with no luck.

[taoqf]

I removed "module": "commonjs", in tsconfig.json, it seems going to work. but I still didn't know what causing this.

[taoqf]

I tried use styled-jsx and typescript with webpack. ts-loader seems works no good.

rules: [
	// Converts TypeScript code to JavaScript
	{
		test: /\.tsx?$/,
		exclude: /node_modules/,
		use: [{
			// 	loader: 'babel-loader',
			// }, {
			loader: 'ts-loader'
		}]
	},
	{
		// I want styled-jsx transform the code with babel's plugin
		test: /\.[jt]sx?$/,
		enforce: 'post',
		exclude: /(node_modules|bower_components)/,
		use: 'babel-loader'
	},
]

What's the problem with my use case?

[huozhi]

Could you provide a reproduction repo? It's hard to tell the actuall root cause based on the code snippets