Preact support / documentation

[jmoore34]

Is your feature request related to a problem? Please describe. Preact support could help reduce an app's total bundle size and might be less bolted-down than create-react-app.

Describe the solution you'd like If supported, some setup documentation would be extremely helpful as configuring webpack can be confusing.

Describe alternatives you've considered Perhaps compatibility could be aided with preact-compat, though documentation would still be super helpful.

[jmoore34]

~~Closing, as it seems it may be possible to get around the create-react-app issue with CRACO.~~

[jmoore34]

Reopening, I didn't realize how much smaller the preact bundle size was.

[jmoore34]

Made some progress. This will at least get the runtime working:

preact.config.js (docs used as reference)

export default config => {
  const { options, ...babelLoaderRule } = config.module.rules[0]; // Get the babel rule and options
  config.module.rules[0] = {
    ...babelLoaderRule,
    loader: undefined, // Disable the predefined babel-loader on the rule
    use: [
      {
        loader: 'babel-loader',
        options
      },
      {
        loader: '@compiled/webpack-loader'
      }
    ]
  };
}

The tricky part seems to be getting extraction to work. I tried this:

preact.config.js

const { CompiledExtractPlugin } = require('@compiled/webpack-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

export default config => {
  const { options, ...babelLoaderRule } = config.module.rules[0]; // Get the babel rule and options
  config.module.rules[0] = {
    ...babelLoaderRule,
    loader: undefined, // Disable the predefined babel-loader on the rule
    use: [
      {
        loader: 'babel-loader',
        options
      },
      {
        loader: '@compiled/webpack-loader',
        options: {
          extract: true
        }
      }
    ]
  };
  config.module.rules[1] = {
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
  };
  config.plugins = [new MiniCssExtractPlugin(), new CompiledExtractPlugin()];
};

But got this error while building:

$ preact build
× ERROR TypeError: Invalid value used in weak set
    at WeakSet.add (<anonymous>)
    at MiniCssExtractPlugin.apply ([omitted project path]\node_modules\mini-css-extract-plugin\dist\index.js:385:18)
    at webpack ([omitted]\node_modules\webpack\lib\webpack.js:51:13)
    at prodBuild ([omitted]\node_modules\preact-cli\lib\lib\webpack\run-webpack.js:92:24)
    at async command ([omitted]\node_modules\preact-cli\lib\commands\build.js:100:14)
error Command failed with exit code 1.

Looking up this error, this post claimed downgrading mini-css-extract-plugin to version 1.6.2 should resolve this error. After doing this, I instead got the following error:

$ preact build
× ERROR ../node_modules/@compiled/webpack-loader/css-loader/extract.css?style=._1itkgsw1%7Bbackground-image%3Avar(--_15l2kwy)%7D (../node_modules/@compiled/webpack-loader/dist/css-loader.js!../node_modules/@compiled/webpack-loader/css-loader/extract.css?style=._1itkgsw1%7Bbackground-image%3Avar(--_15l2kwy)%7D)
Module build failed (from ../node_modules/@compiled/webpack-loader/dist/css-loader.js):
ModuleBuildError: Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Didn't get a result from child compiler
    at .\node_modules\mini-css-extract-plugin\dist\loader.js:311:23
    at .\node_modules\webpack\lib\Compiler.js:343:11
    at .\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at .\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (.\node_modules\webpack\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (.\node_modules\webpack\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at .\node_modules\webpack\lib\NormalModule.js:316:20
    at .\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at .\node_modules\loader-runner\lib\LoaderRunner.js:182:20
    at context.callback (.\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at .\node_modules\mini-css-extract-plugin\dist\loader.js:311:14
    at .\node_modules\webpack\lib\Compiler.js:343:11
    at .\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compilation.js:1414:32
 @ ./components/app.tsx 18:0-151
 @ ./index.ts
error Command failed with exit code 1.

[jmoore34]

Tried swapping out

  config.module.rules[1] = {
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
  };

with

  config.module.rules.push({
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
  });

and got this error instead

× ERROR ../node_modules/@compiled/webpack-loader/css-loader/extract.css?style=._1itkgsw1%7Bbackground-image%3Avar(--_15l2kwy)%7D (../node_modules/@compiled/webpack-loader/dist/css-loader.js!../node_modules/@compiled/webpack-loader/css-loader/extract.css?style=._1itkgsw1%7Bbackground-image%3Avar(--_15l2kwy)%7D)
Module build failed (from ../node_modules/@compiled/webpack-loader/dist/css-loader.js):
ModuleBuildError: Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (.\node_modules\css-loader\dist\index.js:31:27)
    at .\node_modules\webpack\lib\NormalModule.js:316:20
    at .\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at .\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at .\node_modules\webpack\lib\NormalModule.js:316:20
    at .\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at .\node_modules\loader-runner\lib\LoaderRunner.js:182:20
    at context.callback (.\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at .\node_modules\mini-css-extract-plugin\dist\loader.js:300:14
    at .\node_modules\webpack\lib\Compiler.js:343:11
    at .\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:24:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (.\node_modules\tapable\lib\Hook.js:154:20)
    at .\node_modules\webpack\lib\Compilation.js:1414:32
 @ ./components/app.tsx 18:0-151
 @ ./index.ts
error Command failed with exit code 1.

Leading me here. I'm not quite sure how to resolve this one.

[jackmoore]

Any progress on supporting Preact?