Transition does nothing

[szahn]

The transition does nothing. Am I doing something wrong here? Can't share the code because the sandbox (https://codesandbox.io/s/zrqyz7pr44) works fine, but within my actual application, it doesn't work and I can't share the app code itself. Tried putting a break point on renderPropertyTable function when routeDetails is not null but it appears that render function is never called. Why is that?

using v5.3.17

<Transition native from={{ opacity: 0}} enter={{ opacity: 1}} leave={{ opacity: 0}} routeDetails={this.state.routeDetails} onInfoTableClose={this.onInfoTableClose}>
                {routeDetails && this.renderPropertyTable}
</Transition>

    renderPropertyTable({onInfoTableClose, routeDetails, ...styles}){
        return <animated.div style={styles}>
            <PropertyTable 
                columnCount={2}
                properties={routeDetails.responseContent} 
                title={routeDetails.name} 
                onClose={onInfoTableClose}/>
        </animated.div>;
    }

[drcmda]

That looks correct. If it works in csb, some local Babel stuff interfering perhaps?

[szahn]

Actually using Typescript, this is the transpiled output:

React__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(
    react_spring__WEBPACK_IMPORTED_MODULE_26__["Transition"], 
    {   native: true, 
        from: { opacity: 0 }, 
        enter: { opacity: 1 }, 
        leave: { opacity: 0 }, 
        routeDetails: routeDetails, 
        onInfoTableClose: this.onInfoTableClose 
    }, 
    routeDetails && this.renderPropertyTable)

Package.json:

{
  "name": "ui",
  "version": "1.0.0",
  "description": "front end",
  "scripts": {
    "copyLibs": "node copyLibs.js",
    "dev": "./node_modules/.bin/webpack-cli --config webpack.dev.config --mode development",
    "prod": "./node_modules/.bin/webpack-cli --config webpack.prod.config --mode production",
    "deploy": "npm run copyLibs && npm run prod"
  },
  "private": true,
  "devDependencies": {
    "@types/bluebird": "^3.5.20",
    "@types/immutable": "^3.8.7",
    "@types/jquery": "^3.3.3",
    "@types/lodash": "^4.14.110",
    "@types/react": "^16.4.0",
    "@types/react-dom": "^16.0.6",
    "@types/react-router": "^4.0.26",
    "@types/react-router-dom": "^4.2.7",
    "@types/react-virtualized": "^9.7.13",
    "@types/redux": "^3.6.0",
    "@types/redux-thunk": "^2.1.0",
    "awesome-typescript-loader": "^4.0.1",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "bluebird": "^3.5.1",
    "bootstrap": "^4.0.0",
    "cldr-data": "^32.0.1",
    "css-loader": "^0.28.10",
    "dom-helpers": "^3.3.1",
    "es6-promise": "^4.2.4",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.6",
    "immutable": "^3.8.2",
    "install": "^0.10.4",
    "jquery": "^3.3.1",
    "lodash": "^4.17.5",
    "oidc-client": "^1.4.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.7",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-virtualized": "^9.19.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.3.0",
    "style-loader": "^0.20.3",
    "typescript": "^2.9.2",
    "webpack": "^4.12.0",
    "webpack-cli": "^2.1.5"
  },
  "dependencies": {
    "babel-polyfill": "^6.26.0",
    "cldr": "^4.10.0",
    "moment": "^2.22.1",
    "react-spring": "^5.3.17"
  }
}

This is my webpack:

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    watch: true,
    mode: 'development',
    entry: "./src/index.tsx",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, 'wwwroot')
    },
    devtool: 'source-map', 
    resolve: {
        extensions: ['.js', '.json', '.ts', '.tsx'],
    },
    externals: {
        React: 'React',
        'react-dom': 'ReactDOM',
        redux:"Redux",
        'react-redux':"ReactRedux",
        'react-router': "ReactRouter",
        'jquery':'jQuery',
        '$':'jQuery',
        "bluebird": "Bluebird",
        "moment":"moment",
        "axios":"axios"
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                loader: "awesome-typescript-loader"
            },       
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                    },
                ],
            },
            {
              test: /\.html$/,
              use: [
                {
                  loader: "html-loader",
                  options: { minimize: false }
                }
              ]
            }
        ]
    },
    plugins: [
      new HtmlWebPackPlugin({
        template: "./src/index.dev.html",
        filename: "./index.html",
        hash: true
      })      
    ]    
};

[szahn]

For some reason, it just started working again. Wierd.