Wrapping a React component in a subclass of FormField

Add ons
#1

Hello!
I’m looking for some help in creating a FormField subclass that wraps a React component. No code has been written on this project as of yet, as I do not have the most basic question answered as of yet.

I’m pleased to note that you yourselves at Silverstripe are taking or have taken a similar course of action with a ColorPicker module. My basic question is: Why, in your module, would the component ColorPickerField be mounted inside the div.color-picker-field as opposed to, say, appending it to the end of the document? Can you please point me to some documentation (either by SilverStripe or by Facebook/React) or to a specific file and line? Thank you!!!

#2

I have followed the example of the ColorPicker. What I am trying to do now is build the module. I have worked all day to make sure that my build process—yarn run build—has an exit code of 0. Furthermore, the contents of my webpack.config.js file are:

const Path = require('path');
const webpackConfig = require('@silverstripe/webpack-config');
const {
  resolveJS,
  externalJS,
  moduleJS,
  pluginJS,
  moduleCSS,
  pluginCSS,
} = webpackConfig;

const ENV = process.env.NODE_ENV;
const PATHS = {
  MODULES: 'node_modules',
  FILES_PATH: '../',
  ROOT: Path.resolve(),
  SRC: Path.resolve('client/src'),
  DIST: Path.resolve('client/dist'),
};

const externals = externalJS(ENV, PATHS);
delete externals.reactstrap;

const config = [
  {
    name: 'js',
    entry: {
      bundle: `${PATHS.SRC}/bundles/bundle.js`,
    },
    output: {
      path: PATHS.DIST,
      filename: 'js/[name].js',
    },
    devtool: (ENV !== 'production') ? 'source-map' : '',
    resolve: resolveJS(ENV, PATHS),
    externals,
    module: moduleJS(ENV, PATHS),
    plugins: pluginJS(ENV, PATHS),
  },
  {
    name: 'css',
    entry: {
      bundle: `${PATHS.SRC}/bundles/bundle.scss`,
    },
    output: {
      path: PATHS.DIST,
      filename: 'styles/[name].css',
    },
    devtool: (ENV !== 'production') ? 'source-map' : '',
    module: moduleCSS(ENV, PATHS),
    plugins: pluginCSS(ENV, PATHS),
  },
];

// Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
module.exports = (process.env.WEBPACK_CHILD)
  ? config.find((entry) => entry.name === process.env.WEBPACK_CHILD)
  : module.exports = config;

Given that this is true, I would expect that there would be a folder inside client called dist, and that that folder would have a file called bundle.js inside it. But the screenshot shows that there is no such folder or file, even though the terminal window shows yarn build with an exit code of 0. I really hope that SOMEBODY can help me, given that it is always 5 PM somewhere in the world. I was really impressed with your answer speed on my other forum post, but not this one.

Capture

#3

I was really impressed with your answer speed on my other forum post, but not this one.

@ssimo3lsuhsc I think people with experience using React with SilverStripe are a bit rare and in the case of SS Ltd’s open source dev team, maybe a bit too overloaded with their own work to spend much time on here - as much as I’m sure they want to!