Semantic-ui-react: TypeError: instance.render is not a function

[the-simian]

Solution

See #comment

Bug Report

Steps

This is an error related to using the latest version 0.80.0 that is not present in 0.79.0. During the build process with a typical webpack build you get the error: TypeError: instance.render is not a function

Expected Result

A build as it was in 0.79.0, which is completely stable with the exact same build process.

Actual Result

The actual result that happened 💣

Version

0.80.0
Webpack 4
Build is essentially the same as create-react-app, but with webpack 4 and decorators. Babel is using babel core 7.0.0-beta.48

Here is the babel pipeline:

    "@babel/core": "7.0.0-beta.48",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.48",
    "@babel/plugin-proposal-class-properties": "7.0.0-beta.48",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.48",
    "@babel/plugin-syntax-dynamic-import": "7.0.0-beta.48",
    "@babel/plugin-transform-classes": "7.0.0-beta.48",
    "@babel/plugin-transform-destructuring": "7.0.0-beta.48",
    "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.48",
    "@babel/plugin-transform-react-display-name": "7.0.0-beta.48",
    "@babel/plugin-transform-regenerator": "7.0.0-beta.48",
    "@babel/plugin-transform-runtime": "7.0.0-beta.48",
    "@babel/preset-env": "7.0.0-beta.48",
    "@babel/preset-flow": "7.0.0-beta.48",
    "@babel/preset-react": "7.0.0-beta.48",
    "babel-plugin-macros": "2.2.1",
    "babel-plugin-transform-dynamic-import": "2.0.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.13"

configured like this:

require('babel-plugin-macros'),
require('@babel/plugin-transform-destructuring').default,
[require('@babel/plugin-proposal-decorators'), { legacy: true }],
[require('@babel/plugin-proposal-class-properties').default,{loose: true}],
[require('@babel/plugin-proposal-object-rest-spread').default,{useBuiltIns: true}],
[require('@babel/plugin-transform-runtime').default,{
          helpers: false,
          polyfill: false,
          regenerator: true}],
require('@babel/plugin-syntax-dynamic-import').default

Stacktrace

Uncaught TypeError: instance.render is not a function
    at finishClassComponent (react-dom.development.js:13085)
    at updateClassComponent (react-dom.development.js:13047)
    at beginWork (react-dom.development.js:13715)
    at performUnitOfWork (react-dom.development.js:15741)
    at workLoop (react-dom.development.js:15780)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:15194)
    at renderRoot (react-dom.development.js:15840)
    at performWorkOnRoot (react-dom.development.js:16437)
    at performWork (react-dom.development.js:16358)
    at performSyncWork (react-dom.development.js:16330)
    at requestWork (react-dom.development.js:16230)
    at scheduleWork$1 (react-dom.development.js:16096)
    at scheduleRootUpdate (react-dom.development.js:16663)
    at updateContainerAtExpirationTime (react-dom.development.js:16690)
    at updateContainer (react-dom.development.js:16717)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17000)
    at react-dom.development.js:17140
    at unbatchedUpdates (react-dom.development.js:16557)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:17136)
    at Object.render (react-dom.development.js:17195)
    at Object../src/index.js (index.js:27)
    at __webpack_require__ (bootstrap:767)
    at fn (bootstrap:141)
    at Object.0 (validator-list.js:81)
    at __webpack_require__ (bootstrap:767)
    at checkDeferredModules (bootstrap:43)
    at Array.webpackJsonpCallback [as push] (bootstrap:30)
    at main.chunk.js:1

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[the-simian]

• references: https://github.com/Semantic-Org/Semantic-UI-React/issues/2830
• reverting to 0.79.0 fixes the issue

[layershifter]

0.80.0 uses Babel 7 (#2750), I think the problem is there.

However, this issue is still not have steps to reproduce, please add them. Actually, I don't see what we should fix. I will reopen the issue when it will be ready.

[the-simian]

@layershifter
I am also using Babel 7, as I mentioned its "7.0.0-beta.48", I posted the entire build pipeline in the issue which is the exact steps to reproduce, build it with 0.79.0 - works. build with 0.80.0 - it doesn't.

Would you take this more seriously if I put this in a sample repo and told you to type 'yarn install && yarn start'?

Even if you're not sure what's actionable, this is your second user report, and I wanted to provide details. You closed the first issue within minutes and no investigation so I wasn't sure if my report would even be seen there.

...and you did the same here. Look I love this project but heads up - this latest version breaks for some reason. Thought you might want to know.

[the-simian]

OK here is a repro:

https://github.com/the-simian/example-semanticu-ui-broke-repo

yarn install && yarn start you'll get:

Here is the package.json

{
  "name": "semantic-working",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-scripts": "1.1.4",
    "semantic-ui-react": "^0.80.1" <----------------
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

[layershifter]

@the-simian Thanks for the attention to this issue.

You closed the first issue within minutes and no investigation

You're not right there, I've go to codesandbox and test it, it worked fine :confused: Then I tested it locally and it failed :hankey:

Let's reduce the degree of the discussion, everyone has the right to a mistake :+1: I'm working on it right now.

[the-simian]

Its cool, I am honestly just trying to help out here, I use this library daily, Its my favorite react-ui library. Let me know if I can do more to help.

[taku-k]

I also have this same bug.
When I add @babel/[email protected] to the dependencies, it works.
It seems that @babel/[email protected] causes this bug.

[the-simian]

@taku-k it seems to also break on babel 6.x.x as well. When I made the repo to repro I ejected to get the current versions. I'm going to push that up now so ya'll can see.

heres what that uses:

   "babel-core": "6.26.0",
   "babel-plugin-dynamic-import-node": "1.1.0",
    "babel-plugin-syntax-dynamic-import": "6.18.0",
    "babel-plugin-transform-class-properties": "6.24.1",
    "babel-plugin-transform-es2015-destructuring": "6.23.0",
    "babel-plugin-transform-object-rest-spread": "6.26.0",
    "babel-plugin-transform-react-constant-elements": "6.23.0",
    "babel-plugin-transform-react-jsx": "6.24.1",
    "babel-plugin-transform-react-jsx-self": "6.22.0",
    "babel-plugin-transform-react-jsx-source": "6.22.0",
    "babel-plugin-transform-regenerator": "6.26.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-preset-env": "1.6.1",
    "babel-preset-react": "6.24.1"

[layershifter]

The problem is caused by the recent release of @[email protected], the immediately fix is below.

1. Add following lines to the package.json

+"resolutions": {
+  "@babel/runtime": "7.0.0-beta.46"
+},

1. Run yarn
2. Restart yarn start

---

PR with deps updates is comming.

[layershifter]

The matching PR was merged, I hope that it will be released soon :raised_hands:

Thanks folks :+1:

[johnrees]

Thanks for the quick solution @layershifter!

It might(?) be worth keeping this issue open for a few hours so it appears at the top of the issues list. That being said I am guilty of not searching for instance.render is not a function before opening my issue... I guess I didn't expect it to have been opened/fixed/closed so quickly! :clap:

[layershifter]

@johnrees I will keep this issue open, thanks for suggestion :+1:

[hitendramalviya]

When we can expect new version in place?

[levithomason]

Probably in ~12 minutes

[levithomason]

Released in [email protected]. Please verify the fix and we can close this issue.

[johannwagner]

We have the same issue, testing right now, if it is fixed. @martenwallewein

[johannwagner]

@levithomason Fix is working for us. Thanks for the fast fix!

[OmarKhattab]

Just tested it and Its working I had the same error as OP. @levithomason

[levithomason]

Thanks, everyone for the rapid reporting, investigation, and testing. This community is amazing!

[livingmine]

Thanks for the quick fix! Almost nuked my project to clean state, the thrill of living on the edge :)

[theCuriousOne]

Just to add my two cents since I also didn't find the issue and created my own (I admit with much less details/explanation) $2849.

What I would like to suggest is the following.

1. I know you (Semantic-UI) have a disclaimer that the version is still not stable and that breaks are possible, even during minor version number changes., but would recommend doing your usual commits in a different branch (ex. 'development') and push to 'master' branch only versions that are completed (with change-log).
2. When publishing a new version don't change it, unless you upgrade the build number (connected to 1)
3. (to @layershifter) and to others: when testing the release, not to have a f**k-up with different on server and locally, clear npm cache -- that is why I also detected the bug a little bit latter then I needed.

Otherwise great library, really appreciate what you have achieved so far.

[levithomason]

...would recommend doing your usual commits in a different branch (ex. 'development') and push to 'master' branch only versions that are completed (with change-log).

Note, when installing the package you are not installing from our master branch. You are installing the latest release from the npm registry. All released versions have gone through extensive automated and manual testing. Occasionally, there are bugs and we are quick to fix them.

We never merge a PR to master that is not ready. The master branch is maintained in release ready state at all times. Each PR goes through extensive automated and manual testing before it can be merged to master.

The CHANGELOG.md currently lists all breaking changes as BREAKING(scope): message. Breaking changes are linked to PRs which include release notes and upgrade instructions. The change log could be better and we welcome help, #2675.

When publishing a new version don't change it, unless you upgrade the build number (connected to 1)

I'm not sure what is meant by this. Each version we publish increments either the minor (breaking) or the patch (features and fixes) version. Once a package is published with a certain version, that version never changes. It is impossible to publish a new npm package under the same version as a previous one. The npm registry will not allow it.

(to @layershifter) and to others: when testing the release, not to have a f**k-up with different on server and locally, clear npm cache -- that is why I also detected the bug a little bit latter then I needed.

We don't use NPM, we use yarn. All node_modules are automatically checked for consistency with the package.json on every run of the docs and tests. Locally, the proper modules are installed if necessary _before_ any task starts. On CI, if the package.json isn't a perfect match with the node_modules (including all peer deps) an error is thrown and the build fails. See satisfied. There is never a mismatch between package.json and the node_modules in this project.

[levithomason]

New issues are welcome on this topic, closing this one as it is resolved.