Preact+Typescirpt not working on clean nextjs project (dependencies were not found)

[vladnicula]

server.js

// server.js
require('@zeit/next-preact/alias')()
const { createServer } = require('http')
const next = require('next')

const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handle = app.getRequestHandler()
const port = process.env.PORT || 3000

app.prepare()
.then(() => {
  createServer(handle)
  .listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`)
  })
})
.catch((err) => {
  console.log('error startig up server', err)
})

package.json (no dev dependencies, this is all)

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-preact": "^0.0.6",
    "@zeit/next-typescript": "^0.0.11",
    "next": "^5.1.0",
    "preact": "^8.2.7",
    "preact-compat": "^3.18.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "typescript": "^2.8.1"
  }

next.config.js (maybe I'm doing this wrong? have tried various combination based on main docs of nextjs)

const withTypescript = require('@zeit/next-typescript')
const withPreact = require('@zeit/next-preact')

module.exports = withTypescript(withPreact())

tsconfig.json (copy paste from ts script example)

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "lib": [
      "dom",
      "es2016"
    ]
  }
}

But I get this error:

 ERROR  Failed to compile with 9 errors                                                                                                                        20:22:23

These dependencies were not found:

* react in ./node_modules/next/dist/client/index.js, ./node_modules/next/dist/lib/error-debug.js and 6 others
* react-dom in ./node_modules/next/dist/client/index.js

To install them, you can run: npm install --save react react-dom
(node:63725) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
> Ready on http://localhost:3000

Maybe the alias created by the preact plugin will help debug this:

the client

resolve:
   { extensions: [ '.js', '.jsx', '.json', '.ts', '.tsx' ],
     modules:
      [ '/Users/vladnicula/Projects/one-percent/ssr-ecommerce-storefront/node_modules/next/node_modules',
        'node_modules' ],
     alias:
      { next: '/Users/vladnicula/Projects/one-percent/ssr-ecommerce-storefront/node_modules/next',
        'react$': 'react/cjs/react.development.js',
        'react-dom$': 'react-dom/cjs/react-dom.development.js',
        react: 'preact-compat',
        'react-dom': 'preact-compat' } }

and the server

resolve:
   { extensions: [ '.js', '.jsx', '.json', '.ts', '.tsx' ],
     modules:
      [ '/Users/vladnicula/Projects/one-percent/ssr-ecommerce-storefront/node_modules/next/node_modules',
        'node_modules' ],
     alias:
      { next: '/Users/vladnicula/Projects/one-percent/ssr-ecommerce-storefront/node_modules/next',
        'react$': 'react/cjs/react.development.js',
        'react-dom$': 'react-dom/cjs/react-dom.development.js',
        react: 'preact-compat',
        'react-dom': 'preact-compat' } }

[standy]

Same issue on css + typescript

(node:4344) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead
Error: Module parse failed: Unexpected token (7:1)
You may need an appropriate loader to handle this file type.

My bad, wrong next.config.js, that works fine:

const withTypescript = require('@zeit/next-typescript');
const withCSS = require('@zeit/next-css');
module.exports = withCSS(withTypescript());

Just ignore my comment

[ItsRevolt]

I don't think Typescript is causing this issue, since without it I am running into the same exact error.

[timneutkens]

Fix released as @zeit/next-preact@0.0.7

[horodnicdragos]

Your commit did indeed solve the alias problem but for some reason the components do not render. I have an index.js containing this:

export default () => <div>Test</div>

What I end up with on the client is the following:

<div id="__next">
  <undefined></undefined>
</div>

Here are my environment info:

macOS Sierra 10.13.3

> $ yarn --version
1.5.1

> $ node --version
v8.9.4

// package.json
{
  "dependencies": {
    "@zeit/next-preact": "^0.0.7",
    "next": "^5.1.0",
    "preact": "^8.2.7",
    "preact-compat": "^3.18.0",
    "react": "^16.3.0",
    "react-dom": "^16.3.0"
  },
  "scripts": {
    "dev": "next"
  }
}

Did I just omit something?

[vladnicula]

@horodnicdragos @timneutkens

There's an issue with preact-compat in general, it's the same issue horodnicdragos mentioned. I have the same issue as well.

preactjs/preact-compat#416

[cdaringe]

@vladnicula @horodnicdragos @timneutkens, i checked the referenced the preact-compat issue, and they say "its probably an aliasing issue." i stepped thru my config, and confirmed all aliases point to preact-compat. so that's good. i also confirmed that there's no react* lib in my node_modules--just pure preact goodness.

do any of us have a working preact solution? i also agree w--it's likely unrelated to anything ts.