Pages

Sunday, 2 June 2019

CurlScan is a product lookup and barcode scanner web application that checks if hair care products are suitable for people with curly hair. It's mobile friendly and supports searching by product name or by UPC/EAN number. If you don't know what you are looking for you can read through an alphabetised list of approved products.

You just need to implement a customRequest function that accepts an object containing two callback functions: onSuccess, onError and the file to be uploaded. You just need to do whatever custom upload stuff you have to do in this function and then call either onSuccess() or onError() as appropriate when you get your response back. You don't have to pass any parameters to these functions

The whole point of using the isomorphic style loader is to be explicit about which style files are required by each component so your sever can package only the ones required for the initial page render. This is antithetical to what is happening with the babel-import-plugin output, which is just injecting require statements into files and not keeping track of any association with components. If you were using the regular style-loader this would be sufficient to ensure the styles were injected into the head of the html document. If you are using the isomorphic-style-loader then you are generating the html dynamically in your server code and using it's API to insert just the styles in the current React provider context, so none of the Ant styles will get included.

Furthermore, if you are using a common module config in your webpack.config.js file for the server and client then by enabling babel-import-plugin you'll end up trying to require the Ant '.less' files from your node app which will always fail because less syntax is not valid javascript and library code (stuff in /node_modules/ ) is excluded from webpack bundles by default!

So what is the answer?

I found the simplest solution is to use the isomorphic-style-loader withStyles function to wrap the top-level application React component with *all* the styles needed by my app. The downside is that you'll ship more styles than are required for the initial render but probably not that much more, since if you are using Ant in your project, you're probably using it extensively throughout the app. The upside is that the code is explicit. I created a JS module called withAntStyles.js:

import React from 'react'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
// Styles includes
// Include just the styles you are using in your project.
// You'll have to remember to add new ones as you go along
import antdStyles from 'antd/lib/style/index.less'
import layoutStyles from 'antd/lib/layout/style/index.less'
import gridStyles from 'antd/lib/grid/style/index.less'
...
import badgeStyles from 'antd/lib/badge/style/index.less'
import uploadStyles from 'antd/lib/upload/style/index.less'
function withAntStyles(AntStyledComponent) {
return withStyles(
antdStyles,
layoutStyles,
gridStyles,
...
badgeStyles,
uploadStyles
)(AntStyledComponent)
}
export default withAntStyles

So now all you have to do is wrap your top most application React Component, e.g.: