Preact: Preact X and hooks

[andrevenancio]

Hi.

I've installed the default template from the latest preact-cli.
I've followed the migration guide and I've updated preact, preact-router and preact-render-to-string using the @next version.

I can run the preact-cli project without any problem. I can try the import { useState } from 'preact/hooks' and it works fine.

The problem is when I try to import a library I made for state management, that is using Hooks (via import { useState } from 'react'. Since Preact X already comes with preact-compat I don't think its an alias issue but preact doesnt correctly map { useState } from 'react' to { useState } from 'preact/hooks'

I get the following error:

‼ WARN ./node_modules/snap-state/dist/snap-state.module.js
12:13-14 "export 'useState' (imported as 'n') was not found in 'react'
 @ ./node_modules/snap-state/dist/snap-state.module.js
 @ ./src/components/app.js
 @ ./src/index.js
 @ ./node_modules/preact-cli/lib/lib/entry.js
 @ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server
‼ WARN ./node_modules/snap-state/dist/snap-state.module.js
16:10-11 "export 'useEffect' (imported as 't') was not found in 'react'
 @ ./node_modules/snap-state/dist/snap-state.module.js
 @ ./src/components/app.js
 @ ./src/index.js
 @ ./node_modules/preact-cli/lib/lib/entry.js
 @ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

[developit]

Hi there. It sounds like you're using preact-cli version 2, which is not compatible with Preact X.
Here's how to upgrade - in your project root, run this:

npm i -D preact-cli@rc && npm i preact@next preact-router@next preact-render-to-string@next
npm rm preact-compat

[andrevenancio]

Hi @developit
I still have this issue.

This were the steps I took

npm uninstall -g preact-cli
npm install -g preact-cli@rc
preact create default my-app
cd my-app
npm i --save preact@next preact-router@next preact-render-to-string@next
npm rm preact-compat
npm i --save snap-state
npm run dev

the errors I see are as follows:

⚠ WARN ./node_modules/snap-state/dist/snap-state.module.js
12:13-14 "export 'useState' (imported as 'n') was not found in 'react'
 @ ./node_modules/snap-state/dist/snap-state.module.js
 @ ./src/components/app.js
 @ ./src/index.js
 @ ./node_modules/preact-cli/lib/lib/entry.js
 @ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server
⚠ WARN ./node_modules/snap-state/dist/snap-state.module.js
16:10-11 "export 'useEffect' (imported as 't') was not found in 'react'
 @ ./node_modules/snap-state/dist/snap-state.module.js
 @ ./src/components/app.js
 @ ./src/index.js
 @ ./node_modules/preact-cli/lib/lib/entry.js
 @ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

I've tried to change the package.json from preact-compat to preact/compat and I still see this errors.
Am I missing something?

[marvinhagemeister]

@andrevenancio the default template installs an older version of preact-cli local to the project. You need to update that too (npm i -D preact-cli@rc).

[andrevenancio]

Oh my bad.
I have my problem sorted. But there's something up with webpack-dev-server now
Out of the box Preact default template now returns a javascript error.

createSocketUrl.js?810d:20 Uncaught TypeError: Cannot read property 'replace' of null
    at createSocketUrl (createSocketUrl.js?810d:20)
    at Object.eval (index.js?21b9:35)
    at eval (index.js:177)
    at Object.../node_modules/webpack-dev-server/client/index.js (bundle.esm.js:1967)
    at __webpack_require__ (bundle.esm.js:1476)
    at fn (bundle.esm.js:833)
    at Object.0 (bundle.esm.js:2236)
    at __webpack_require__ (bundle.esm.js:1476)
    at bundle.esm.js:1617
    at bundle.esm.js:1620

this is my package.json

{
  "private": true,
  "name": "my-app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "per-env",
    "start:production": "npm run -s serve",
    "start:development": "npm run -s dev",
    "build": "preact build",
    "serve": "preact build && preact serve",
    "dev": "preact watch",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "eslint-config-synacor"
  },
  "eslintIgnore": [
    "build/*"
  ],
  "devDependencies": {
    "eslint": "^4.9.0",
    "eslint-config-synacor": "^2.0.2",
    "identity-obj-proxy": "^3.0.0",
    "per-env": "^1.0.2",
    "jest": "^21.2.1",
    "preact-cli": "^3.0.0-rc.4",
    "preact-render-spy": "^1.2.1"
  },
  "dependencies": {
    "preact": "^10.0.0-rc.1",
    "preact-render-to-string": "^5.0.6",
    "preact-router": "^3.0.1",
    "snap-state": "^1.0.3"
  },
  "jest": {
    "verbose": true,
    "setupFiles": [
      "<rootDir>/tests/__mocks__/browserMocks.js"
    ],
    "testRegex": "(/(__tests__|tests)/.*|(\\.|/)(test|spec))\\.jsx?$",
    "testPathIgnorePatterns": [
      "/node_modules/",
      "<rootDir>/tests/__mocks__/*"
    ],
    "testURL": "http://localhost:8080",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "identity-obj-proxy",
      "^./style$": "identity-obj-proxy",
      "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
      "^react$": "preact-compat",
      "^react-dom$": "preact-compat",
      "^create-react-class$": "preact-compat/lib/create-react-class",
      "^react-addons-css-transition-group$": "preact-css-transition-group"
    }
  }
}

[developit]

@andrevenancio hmm, that's an odd one. You restarted the development server since upgrading to preact-cli version 3?

[andrevenancio]

@developit Yeah I did. this is the repo if it helps https://github.com/andrevenancio/test-preact-cli

Nothing new from the default template except I've included a call to the snap-state on the src/components/app.js but even if I don't add that import, I still see this error.

[andrevenancio]

Maybe this issues will all be solved when PreactX and preact-cli get updated. Any estimate on the date? I'm considering reverting to React if I can't get this to work, which is a shame cause I'm really happy with the bundle size that preact gives

[marvinhagemeister]

@andrevenancio Made a PR on your repo: https://github.com/andrevenancio/test-preact-cli/pull/1

Looks like our templates are a bit in a rough state. The current plan is to remove all the injection points and replace them via simple {INJECT_PREACT_HEAD} placeholders, so that issues like that won't pop up anymore :tada:

[andrevenancio]

Oh I see. Alright, I'll have a look at it, massive thanks for the help.

I'll use this for now, and then hopefully when PreactX comes up preact-cli will also be out and about and all will look great.

Massive thanks for this, and maintaining the libraries. Both of you! ❤️