@emotion/styled with esbuild - import_styled11.default.div is not a function

Question

I am currently trying to build a site using esbuild, react and emotion/MUI. It's all going well except the last hurdle is getting the styled component from @emotion/styled working.

uncaught TypeError: import_styled11.default.div is not a function

I am copying this from projects I have done in the past (webpack, remix, gatsby, etc), so I know it works, therefore I believe the error is with my esbuild configuration.

I have been reading about esbuild automatic jsx runtime changes from 2021, so I don't think that should be an issue - but perhaps I am missing a config option?

Is this possible to do without babel or webpack? esbuild is great as my build time is around 15 seconds currently compared to 1 minute+ with webpack. Is there anyway to get @emotion/styled working with esbuild?

Header.tsx:

import React, { useState } from "react";
import styled from "@emotion/styled";
import {Box} from "@mui/material";


const Header = () => {
    return (
        <Styles>
            <Box component="header">
                this should be red
            </Box>
        </Styles>
    );
};

const Styles = styled.div`
    header {
        background: red;
    }
`;

export default Header;

Also if it helps:

dev-server.cjs (from esbuild-server) with node dev-server.cjs --watch to run:

require('esbuild-server')
    .createServer(
        {
            bundle: true,
            entryPoints: ['src/app.tsx'],
            watch: true,
            outfile: "public/bundle.js",
            define: {
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? 'development')
            },
            jsxImportSource: '@emotion/react',
            jsxFactory: `jsx`,
        },
        {
            static: 'public',
            historyApiFallback: true
        }
    )
    .start();

ts-config.json:

{
    "compilerOptions": {
        "target": "es2018",
        "jsx": "react-jsx",
        "jsxImportSource": "@emotion/react",
        "module": "commonjs",
        "rootDir": "src",
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "strict": true,
        "skipLibCheck": true
    }
}

score 1 · Answer 1 · answered Sep 14 '22 at 10:47

Renaming my server file from dev-server.cjs to dev-server.js gave me the following error:

require('esbuild-server')
^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/lukebrown/Projects/rp-react-dashboard/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

Removing the requirement from "type": "module" in my project, then removing "type": "module" from my package.json and running node dev-server.js --watch allowed @emotion/styled to work.

You can read more about what "type": "module" does here.

Not sure why removing this from my package.json helped specifically but happy for someone to comment! Thank you.

@emotion/styled with esbuild - import_styled11.default.div is not a function

1 Answers1