Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Babel CSS Prop Preset: _jsxs is not defined

See original GitHub issue

Current behavior:

Using @emotion/babel-preset-css-prop@10.1.0 with the { runtime: 'automatic' } option, the Next.js build fails with the following error:

[   =] info  - Generating static pages (0/3)
Error occurred prerendering page "/about-us". Read more: https://err.sh/next.js/prerender-error
ReferenceError: _jsxs is not defined
    at MyApp (next-js-example-sep-2020/.next/server/pages/_app.js:174:3)
    at d (next-js-example-sep-2020/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (next-js-example-sep-2020/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (next-js-example-sep-2020/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (next-js-example-sep-2020/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at exports.renderToString (next-js-example-sep-2020/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (next-js-example-sep-2020/node_modules/next/dist/next-server/server/render.js:50:851)
    at Function.getInitialProps (next-js-example-sep-2020/.next/server/pages/_document.js:273:19)
    at loadGetInitialProps (next-js-example-sep-2020/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (next-js-example-sep-2020/node_modules/next/dist/next-server/server/render.js:50:1142)

To reproduce:

Clone this repo and run yarn: https://github.com/upleveled/next-js-example-sep-2020
Run yarn build

Information for posterity: the bug can be seen at revision f0488edf42a9daebb78a56d10675d0e1a9560831

Expected behavior:

No error.

Environment information:

react version: 17.0.1
@emotion/core version: 10.1.0
@emotion/babel-preset-css-prop version: 10.1.0

Ref: https://github.com/emotion-js/emotion/issues/2041

Also reported at the vercel/next.js repo: https://github.com/vercel/next.js/issues/18096#issuecomment-720061067

Issue Analytics

State:
Created 3 years ago
Comments:14 (8 by maintainers)

Top GitHub Comments

5reactions

Andaristcommented, Nov 2, 2020

I’ve been debugging this further and all signs point to a bug in Babel’s config loading logic. Trying to get to the bottom of this but might take a while.

3reactions

Andaristcommented, Nov 1, 2020

I plan to figure out a better solution - for now, treat this as a temporary one.

Top Results From Across the Web

Emotion CSS-in-JS ReferenceError: exports is not defined

It looks like @babel/plugin-transform-modules-commonjs has to run after @emotion/babel-preset-css-prop but Babel plugins run before presets.

emotion/babel-preset-css-prop

A Babel preset to automatically enable Emotion's css prop when using the classic JSX runtime. If you want to use the new JSX...

API - esbuild

The main fields setting is set to browser,module,main but with some additional special behavior: if a package provides module and main entry points...

babel/plugin-transform-react-jsx

Though the JSX spec allows this, it is disabled by default since React's JSX does not currently have support for it. You can...

JSX Pragma - Theme UI

Technically Babel also calls jsxs from react/jsx-runtime and jsxDEV from ... Theme UI uses custom create element functions to add the sx and...