Allow using React in dev?

[Gerrit Alex]

Hi,

I've been trying for a while now to use React in dev and Preact only in prod with React 17 but sadly to no avail. This is solely because I prefer the react devtools by far over the Preact devtools. However, with React 17 I'm not getting beyond this error when building:

ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '...\src\pages'

Since it's included in preact/compat, I figured I could just add it to the existing aliases:

    aliases.react = aliases['react-dom'] = 'preact/compat';
    aliases['react/jsx-runtime'] = 'preact/jsx-runtime';

leading to the same error.

Anyways, this is the entire fn I'm applying in next.config.js currently:

const withPreact = (config, options) => {
  if (!options.dev) {
    const splitChunks = config.optimization && config.optimization.splitChunks;

    if (splitChunks) {
      const { cacheGroups } = splitChunks;
      const test = /[/\\]node_modules[/\\](preact|preact-render-to-string|preact-context-provider)[/\\]/u;
      if (cacheGroups.framework) {
        cacheGroups.preact = { ...cacheGroups.framework, test };
      }
    }

    if (options.isServer) {
      config.externals.push(
        /^(preact|preact-render-to-string|preact-context-provider)([/\\]|$)/u,
      );
    }

    const aliases = config.resolve.alias || (config.resolve.alias = {});
    // eslint-disable-next-line no-multi-assign
    aliases.react = aliases['react-dom'] =
      'preact/compat';
  }
};

which works fine in dev, but not in prod, clearly, so I'm locked to 16.14.0 atm.

Considering there's a bit more going on in the plugin here and abstracting this topic away seems like a good idea in general:

• is this possible at all with React 17?
• would it be possible to add a flag to withPreact from the plugin enabling that behaviour conditionally? could just be withPreact({ ...defaultConfig, preactEnabled: bool }, options }) defaulting to true

[Sven]

Hey @ljosberinn

Would you be able to provide a repro?

What version of preact do you have installed?

Did you try to conditionally apply this plugin? Something along these lines should allow you to:

(config, options) => {
  if (!options.dev) {
    return withPreact()(config);
  }
}

[Sven]

Closing as this is currently not a focus for the plugin

[Selene Blok]

Ran into this issue myself, you can add preact's devtools by adding the following to next.config.js

//next.config.js
const nextConfig = {
  // ...
  webpack(config, { dev, isServer }) {
    config = preactModifications({ config, dev, isServer })
    return config
  },
}

function preactModifications({ config, dev, isServer }) {
  // inject Preact DevTools
  if (dev && !isServer) {
    const entry = config.entry;
    config.entry = () =>
      entry().then((entries) => {
        entries["main.js"] = ["preact/debug"].concat(entries["main.js"] || []);
        return entries;
      });
  }
  return config;
}