Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FormControlInput is not a constructor

See original GitHub issue

Firstly, I think this repo looks awesome, and I was excited to check it out. But unfortunately I ran into problems right away trying to create a form.

Using NextJS, I created the following test component…

import { FormGroup, Label, FormControl } from 'styled-bootstrap-components'

export default props => (
  <>
    <h1>Test Page</h1>
    <form>
      <FormGroup>
        <Label>Email or Username</Label>
        <FormControl placeholder="Email or Username" />
      </FormGroup>
    </form>
  </>
)

But got this error…

FormControlInput is not a constructor

TypeError: FormControlInput is not a constructor
    at FormControl (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/styled-form-component/lib/components/FormControl.js:96:10)
    at processChild (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:2790:14)
    at resolve (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:2714:5)
    at ReactDOMServerRenderer.render (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:3098:22)
    at ReactDOMServerRenderer.read (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:3057:29)
    at renderToString (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/react-dom/cjs/react-dom-server.node.development.js:3524:27)
    at renderPage (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/next/dist/server/render.js:319:26)
    at Function.getInitialProps (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/.next/server/static/development/pages/_document.js:164:18)
    at _callee$ (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/next/dist/lib/utils.js:86:30)
    at tryCatch (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at /Users/ChrisGeirman/dev/www/fq.next-yoga-prisma/client/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)

To test, I verified that the error goes away if I replace FormControl with the following styled input…

const FormControl = styled.input``

Here’s the versions I have installed…

    "styled-bootstrap-components": "^2.0.0",
    "styled-components": "^4.1.2",
    "styled-system": "^3.1.11",

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

aichbauercommented, Dec 20, 2018

@richardblondet thanks 😀

Right now the only way to use this library completely is to use styled components v3.x.x but I am working on a new version hopefully releasing this week. The library fixed but I have to get some tests to pass. But this new version comes with complete new possibilities to customize this components to fit your needs.

0reactions

aichbauercommented, Dec 24, 2018

closed by #15