build-react-component ES5 module build bypasses webpack/typescript config

[everscending]

I am attempting to use typescript with nwb. When running "nwb build-react-component", webpack is invoked to build the demo which works fine, but when it comes to producing the cjs/es, I looked around in the code and it appears to bypass webpack entirely, and hence the necessary config for typescript. When I use the --no-demo param it tells me "Creating ES5 build" but nothing ever gets output. I need to use webpack to for its other bundling features including handling scss files.

Why does it bypass webpack when building modules? And is there something else I should be doing to get typescript working in this scenario and also getting sass to bundle properly at the same time?

Here is the nwb code that produces the ES5 module and the demo, notice "runBabel" vs "webpackBuild":

moduleBuild.js, line 166 --

if (userConfig.npm.cjs !== false) {
    tasks.push((cb) => runBabel(
      'ES5',
      {copyFiles, outDir: path.resolve('lib'), src},
      merge(buildConfig.babel, buildConfig.babelDev || {}, {
        // Don't force CommonJS users of the CommonJS build to eat a .require
        commonJSInterop: true,
        // Transpile modules to CommonJS
        modules: 'commonjs',
        // Don't set the path to nwb's babel-runtime, as it will need to be a
        // peerDependency of your module if you use transform-runtime's helpers
        // option.
        setRuntimePath: false,
        // Don't enable webpack-specific plugins
        webpack: false,
      }),
      userConfig,
      cb
    ))
  }

And the snippet that creates the demo build: build-demo.js, line 50 --

function buildDemo(args, cb) {
  runSeries([
    (cb) => cleanDemo(args, cb),
    (cb) => webpackBuild('demo', args, getCommandConfig, cb),
  ], cb)
}

My nwb.config.js looks like ..

module.exports = {
  type: 'react-component',
  npm: {
    cjs: true,
    esModules: false,
  },
  webpack: {
    config(config) {
        config.entry = {
            index: ["./src/index.ts"],
        }
        config.output = {
          path: './lib',
          filename: '[name].js',
          chunkFilename: '[name].js',
        },
        config.resolve.extensions = [".js", ".ts", ".tsx"]
        config.module.rules.push({
            "test": /\.tsx?$/,
            "loader": "awesome-typescript-loader"
        })
    }
  }
}

[everscending]

According to https://iamturns.com/typescript-babel/, babel will transpile .ts files if --extensions '.ts' is passed to the babel-cli, but unfortunately not settable in .babelrc. So webpack really needs to be in the mix to make this work.

[PatrykF3D]

For anyone struggling, I've opened PR that will allow you to pass --extensions flag when building the component.

https://github.com/insin/nwb/pull/561

[matthewgoslett]

Please can we get @PatrykF3D 's change merged in? This solves a real issue where we cannot build our module in TS.