React 16 - Not working

[panbhatt]

Hi Team,
can we have this library for React 16. I see it is using React.createElement and both React.createElement and React.PropTypes has been deprecated.

[AlgusDark]

Maybe we can import create-react-class and prop-types for the moment since we want to create a new major version with styled-components.

@panbhatt want to help us with this ticket?

[panbhatt]

@AlgusDark : Sure, I can help up. I know react (intermediate level) and Bulma. If you can provide me a guidance I can do it.

[AlgusDark]

Thanks @panbhatt.

The first think to do is to upgrade React on package.json to last stable one (right now we're using 15 for docs) on dev-dependencies so we can test it in docs.

Then we can add create-react-class and prop-types to "dependencies" in package.json, that way we can ensure that final users should install those dependencies.

Can you add "peerDependencies " at package.json with React last stable version?

I believe that's the only think that we need. You can test it by npm installing bloomer locally (E.G. npm install <folder>) and see if everything is working :)

A better approach would be to rewrite exports on every element/component/.. in Bloomer, but since we want to implement styled-components, then it's better to go with the approach of package.json changes.

[panbhatt]

I tried that. however i am receiving a number of errors.
ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:3531:19
TS2320: Interface 'Element' cannot simultaneously extend types 'ReactElement' and 'ReactElement'.
Named property 'type' of types 'ReactElement' and 'ReactElement' are not identical.

ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:3532:19
TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}>' and 'Component<any, {}>'.
Named property 'forceUpdate' of types 'Component<any, {}>' and 'Component<any, {}>' are not identical.

ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:3532:19
TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}>' and 'Component<any, {}>'.
Named property 'refs' of types 'Component<any, {}>' and 'Component<any, {}>' are not identical.

ERROR in [at-loader] ./node_modules/@types/react/index.d.ts:3532:19
TS2320: Interface 'ElementClass' cannot simultaneously extend types 'Component<any, {}>' and 'Component<any, {}>'.
Named property 'setState' of types 'Component<any, {}>' and 'Component<any, {}>' are not identical.

ERROR in [at-loader] ./src/bulma.tsx:400:28
TS2605: JSX element type 'Component<T & HTMLProps, ComponentState>' is not a constructor function for JSX elements.
Types of property 'render' are incompatible.
Type '() => ReactNode' is not assignable to type '{ (): ReactNode; (): false | Element; (): false | Element; (): false | Element; (): false | Eleme...'.
Type 'ReactNode' is not assignable to type 'false | Element'.
Type 'string' is not assignable to type 'false | Element'.

ERROR in [at-loader] ./src/bulma.tsx:400:76
TS2605: JSX element type 'Component<T & HTMLProps, ComponentState>' is not a constructor function for JSX elements.

[AlgusDark]

Did you upgraded TypeScript types for React? -> https://github.com/AlgusDark/bloomer/blob/master/package.json#L19

[panbhatt]

i tried after updating all the things.

DEV dependencies is :
"@ types/classnames": "^2.2.3",
"@ types/enzyme": "^3.1.6",
"@ types/jest": "^22.0.1",
"@ types/node": "^8.0.17",
"@ types/react": "^16.0.34",
"@ types/react-dom": "^16.0.3",
"@ types/react-router-dom": "^4.2.3",
"awesome-typescript-loader": "^3.2.1",
......

}
"dependencies": {
"classnames": "^2.2.5",
"create-react-class": "^15.6.2",
"jest-cli": "^22.0.4",
"prop-types": "^15.6.0",
"shx": "^0.2.2",
"tslib": "^1.7.0"
},

I am still getting errors.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3405,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'div' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>', but here has type 'DetailedHTMLProps<HTMLAttributes, HTMLDivElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3406,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'dl' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLDListElement>', but here has type 'DetailedHTMLProps<HTMLAttributes, HTMLDListElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3407,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'dt' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3408,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'em' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3409,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'embed' must be of type 'DetailedHTMLProps<EmbedHTMLAttributes, HTMLEmbedElement>', but here has type 'DetailedHTMLProps<EmbedHTMLAttributes, HTMLEmbedElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3410,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'fieldset' must be of type 'DetailedHTMLProps<FieldsetHTMLAttributes, HTMLFieldSetElement>', but here has type 'DetailedHTMLProps<FieldsetHTMLAttributes, HTMLFieldSetElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3411,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'figcaption' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes, HTMLElement>'.
node_modules/@types/react-dom/node_modules/@types/react/index.d.ts(3412,13): error TS2403: Subsequent variable declarations must have the same type. Variable 'figure' must be of type 'DetailedHTMLProps<HTMLAttributes, HTMLE

[jonasgrunert]

Do you still need help?

[AlgusDark]

@jonasgrunert that would be really helpful, I'm working on the styled-components implementation.

[jonasgrunert]

@AlgusDark Did it today. Should be fine and refined some testing. Love your work .)
Already created a Pull Request #87
If I can support in any other way let me know.

[jonasgrunert]

I found the error in the travis:ci right now and tried to fix ist. My own Travis build crashes due to timeout. What should I do from there?

[jonasgrunert]

Fixed it. Feel free to merge.

[AlgusDark]

Thanks, I'm going to check these :D

[panbhatt]

Thanks Team. :)

[jjwilliams42]

Any update on this?

[AlgusDark]

We need @MDOR help on this one

[jjwilliams42]

Sweet, thanks @AlgusDark and @MDOR!

I just noticed that the last release was nearly a year ago, do you guys have plans to release to NPM? Or maybe you don't store releases in github.