Using next-plugin-preact with emotion

[Nick Rutten]

I'm trying to get Next.js working with both next-plugin-react and emotion.

In the with-emotion an example babel configuration is provided that overrides the @babel/preset-react importSource with @emotion/react which points to a patched version for the new jsx-runtime to work with Emotion.

When I try to combine that Babel configuration with the using-preact example that uses this plugin, I get the following error in the console: Module not found: Can't resolve 'react/jsx-dev-runtime'. This is imported in @emotion/react/jsx-runtime and @emotion/react/jsx-dev-runtime.

I would have expected the react aliases from next-plugin-preact to pick up on this and resolve correctly but that doesn't seem to be the case. What would be good way to make sure Emotion and Preact can be used together in Next.js?

[Jesse Onolememen]

Hey, I had this exact issue so my workaround was just using the babel-preset-css-prop preset.
My .babelrc.js file looks like this:

module.exports = {
  presets: ['next/babel', '@emotion/babel-preset-css-prop'],
  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
};

that was the only way I could get it to work.
Of course this means you won't be able to use the JSX runtimes, but it's a decent workaround for now.

You might want to look into this library: https://www.npmjs.com/package/preact-jsx-runtime
I'll take a look at it also and see if it works.

[Nick Rutten]

I've been using the JSX pragma that's included with @emotion/react. It works, but I'm not entirely sure what the effect is on the JSX runtime used for those files.

[Sven]

Looks like emotion is looking for a jsx-dev-runtime that's currently not included in preact. Could you try to copy node_modules/preact/compat/jsx-runtime.js to node_modules/preact/compat/jsx-dev-runtime.js and give it another go?

[Sven]

This will be fixed with preactjs/preact#2920. Until this is released, you can add the following snippet to your next.config.js:

require("fs").copyFileSync(
  "./node_modules/preact/compat/jsx-runtime.js",
  "./node_modules/preact/compat/jsx-dev-runtime.js"
);

[Nick Rutten]

@sventschui Applying that advice strangely leads to the following error when trying to build:

> Build error occurred
Error: `pages/404` can not have getInitialProps/getServerSideProps, https://err.sh/next.js/404-get-initial-props
    at /Users/nickrutten/dev/emotion-preact-404/node_modules/next/dist/build/index.js:15:5061
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Promise.all (index 0)
    at async /Users/nickrutten/dev/emotion-preact-404/node_modules/next/dist/build/index.js:15:2667
    at async /Users/nickrutten/dev/emotion-preact-404/node_modules/next/dist/build/tracer.js:1:525
error Command failed with exit code 1.

This only occurs when you have pages/404.[js/tsx]. I've made a reduced test case here where the same behavior occurs:

https://github.com/nickrttn/emotion-preact-404

[Sven]

Fix will land with preactjs/compat-alias-package#1

Until this is released you can work around this by adding another bunch of copy statements to your next.config.js:

require("fs").copyFileSync(
  "./node_modules/preact/compat/jsx-runtime.js",
  "./node_modules/react/jsx-runtime.js"
);
require("fs").copyFileSync(
  "./node_modules/preact/compat/jsx-runtime.js",
  "./node_modules/react/jsx-dev-runtime.js"
);

Sorry for these weird workarounds 🙃

[Sven]

The second issue should now be fixed if you upgrade to @preact/compat@0.0.4. The first issue needs a fresh release of preact that will be published soon I guess.

[Nick Rutten]

Sorry for these weird workarounds 🙃

It's fine, to be expected when you use a slightly unusual setup. I really appreciate the help!

It works now, upgrading preact/compat to 0.0.4 (what's up with that version number? It says 4.0.0 in the package.json) and adding the initial hack to the next.config.js.

[Nick Rutten]

If I read the release notes of preact@10.5.10 correctly, I should have been able to remove the fs.fileCopySync statement after upgrading to that version, correct?

I'm asking because I'm still seeing the error after the upgrade (and removing the fs.fileCopySync). I've reported it here: preactjs/preact#2930

[Sven]

Forgot to add the runtime to published files. @marvinhagemeister did so now and next release should be fine