preactjs / preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
http://npm.im/preact-compat
MIT License
950 stars 148 forks source link

Uncaught (in promise) TypeError: Cannot assign to read only property 'nodeName' of object '#<HTMLInputElement> #528

Closed didymu5 closed 5 years ago

didymu5 commented 5 years ago

I've set up preact-compat in a custom webpack config. I'm using webpack 4. Importing react and react-dom works without error. However when I'm importing a React based component I'm getting the following error:

preact.module.js:1 Uncaught (in promise) TypeError: Cannot assign to read only property 'nodeName' of object '#<HTMLInputElement>

Sample code:

import * as preact from 'preact'
import { useState, useEffect, useRef } from 'preact/hooks'
import { GoogleMap, Marker } from 'react-google-maps' <-- error disappears when I remove the import

export default function Gmap () {
  return (
    <div style={{ height: '89vh', width: '100%' }}>
        why?
    </div>
  )
}

I've tried importing other react based components and still receive the same errors so I don't thing it's the third-party issue.

package.json

"preact": "^10.0.0-beta.1",
"preact-compat": "^3.17.0", <-- I've used the 3.18x and still get the same issue.

...
"@babel/core": "^7.1.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-jsx": "^7.3.0",
"@babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.9.1",

This is not a preact-cli set up project. I had to get a legacy project up to date and customized the preact-compat and so I had to manually set up the necessary preact configurations. I've tried an isolated project by setting up a preact-cli generated project and had no issues with importing react-based components. I'm guessing something is off with my configuration, but I'm not exactly sure. Any help is much appreciated.

webpack alias:

react: 'preact-compat',
'react-dom': 'preact-compat',
'create-react-class': 'preact-compat/lib/create-react-class',
'react-dom-factories': 'preact-compat/lib/react-dom-factories',
marvinhagemeister commented 5 years ago

This issue is very likely caused by mixing Preact X with preact-compat with the latter being specifically written for Preact 8.x. With Preact X the compat package was moved into core. To resolve the situation do:

1) Uninstall preact-compat 2) Change preact-compat aliasing to preact/compat

didymu5 commented 5 years ago

@marvinhagemeister Thanks I will try this! How did i totally miss that detail.

didymu5 commented 5 years ago

@marvinhagemeister That took care of my issue. Thanks.