upgrade to next 12

test/fixture/next-webpack5/next.config.js

@@ -2,49 +2,12 @@ const withPrefresh = require('@prefresh/next');
 const path = require('path');
 
 const config = {
-	experimental: {
-		modern: true,
-    polyfillsOptimization: true,
-  },
-  future: {
-    webpack5: true,
-  },
 	webpack(config, { dev, isServer }) {
-		const splitChunks = config.optimization && config.optimization.splitChunks;
-		if (splitChunks && isServer && splitChunks.cacheGroups) {
-			const cacheGroups = splitChunks.cacheGroups;
-			const preactModules = /[\\/]node_modules[\\/](preact|preact-render-to-string|preact-context-provider)[\\/]/;
-
-			if (cacheGroups.framework) {
-				cacheGroups.preact = Object.assign({}, cacheGroups.framework, {
-					test: preactModules
-				});
-				cacheGroups.commons.name = 'framework';
-			} else {
-				cacheGroups.preact = {
-					name: 'commons',
-					chunks: 'all',
-					test: preactModules
-				};
-			}
-		}
-
 		// Install webpack aliases:
 		const aliases = config.resolve.alias || (config.resolve.alias = {});
 		aliases.react = aliases['react-dom'] = 'preact/compat';
 		aliases.preact = path.resolve(__dirname, 'node_modules', 'preact');
-
-		// 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;
-				});
-		}
+		aliases['preact/hooks'] = 'preact/compat'
 
 		return config;
 	}

test/fixture/next-webpack5/package.json

@@ -13,11 +13,11 @@
 	},
 	"dependencies": {
     "goober": "latest",
-		"next": "^10.2.2",
+		"next": "^12.0.0",
 		"preact": "^10.5.7",
 		"preact-render-to-string": "^5.1.12",
-		"react": "github:preact-compat/react#1.0.0",
-		"react-dom": "github:preact-compat/react-dom#1.0.0",
+		"react": "npm:@preact/compat",
+		"react-dom": "npm:@preact/compat",
     "react-ssr-prepass": "npm:preact-ssr-prepass@^1.0.1",
     "webpack": "^5.0.0"
 	}

test/fixture/next-webpack5/src/app.jsx

@@ -1,13 +1,13 @@
+import { createElement } from 'react'
 import { useCounter } from './useCounter'
-import { h } from 'preact'
 import { Greeting } from './greeting.jsx';
 import { StoreProvider } from './context.jsx';
 import { Products } from './products.jsx';
 import { Effect } from './effect.jsx';
 import { Style } from './styles';
 import { setup } from 'goober';
 
-setup(h);
+setup(createElement);
 
 function Test() {
   const [count, increment] = useCounter();

test/fixture/next-webpack5/src/context.jsx

@@ -1,5 +1,4 @@
-import { h, createContext } from 'preact';
-import { useState } from 'preact/hooks';
+import { createContext, useState } from 'react';
 
 export const StoreContext = createContext();
 

test/fixture/next-webpack5/src/effect.jsx

@@ -1,5 +1,4 @@
-import { h } from 'preact';
-import { useEffect, useState } from 'preact/hooks';
+import { useEffect, useState } from 'react';
 
 export const Effect = () => {
   const [state, setState] = useState('');

test/fixture/next-webpack5/src/greeting.jsx

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact'
+import { Component } from 'react'
 
 export class Greeting extends Component {
   constructor(props) {

test/fixture/next-webpack5/src/products.jsx

@@ -1,5 +1,4 @@
-import { h } from 'preact';
-import { useContext } from 'preact/hooks';
+import { useContext } from 'react';
 import { StoreContext } from './context.jsx';
 
 const products = ['apple', 'peach']

test/fixture/next-webpack5/src/useCounter.js

@@ -1,4 +1,4 @@
-import { useState } from 'preact/hooks';
+import { useState } from 'react';
 
 export const useCounter = () => {
 	const [state, setState] = useState(0);