Webpack/Babel Configuration Guide Leads to Compilation Errors

[jasel-lewis]

@mgusmano

The ExtReact v7.2.0 documentation identifies that we should use ExtWebpackPlugin from the @sencha/ext-react-webpack-plugin package when setting up Webpack and Babel. The same page further identifies that we should add @sencha/ext-react-babel-plugin to the "plugins" array configuration in our .babelrc/babel.config.json file.

When adding @sencha/ext-react-babel-plugin to package.json, the highest version available to us is v7.0.0. Following that documentation page and when adding in v7.0.0, such results in a compilation error with a stacktrace of:

Module build failed (from D:/Repos/XXX/XXX/src/XXX/node_modules/babel-loader/lib/index.js):
TypeError: [BABEL] D:\Repos\XXX\XXX\src\XXX\Scripts\src\index.jsx: Cannot read property 'includes' of undefined (While processing: "D:\\Repos\\XXX\\XXX\\src\\XXX\\node_modules\\@sencha\\ext-react-babel-plugin\\dist\\index.js")
    at module.exports (D:\Repos\XXX\XXX\src\XXX\node_modules\@sencha\ext-react-babel-plugin\dist\index.js:46:33)
    at D:\Repos\XXX\XXX\src\XXX\node_modules\@babel\core\lib\config\full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (D:\Repos\XXX\XXX\src\XXX\node_modules\@babel\core\lib\gensync-utils\async.js:26:3)
    at Generator.next (<anonymous>)
    at step (D:\Repos\XXX\XXX\src\XXX\node_modules\gensync\index.js:254:32)
    at evaluateAsync (D:\Repos\XXX\XXX\src\XXX\node_modules\gensync\index.js:284:5)
    at Function.errback (D:\Repos\XXX\XXX\src\XXX\node_modules\gensync\index.js:108:7)
    at errback (D:\Repos\XXX\XXX\src\XXX\node_modules\@babel\core\lib\gensync-utils\async.js:70:18)
    at async (D:\Repos\XXX\XXX\src\XXX\node_modules\gensync\index.js:183:31)
    at onFirstPause (D:\Repos\XXX\XXX\src\XXX\node_modules\gensync\index.js:209:13)
    at Generator.next (<anonymous>)
    at cachedFunction (D:\Repos\XXX\XXX\src\XXX\node_modules\@babel\core\lib\config\caching.js:68:46)
    at cachedFunction.next (<anonymous>)
    at loadPluginDescriptor (D:\Repos\XXX\XXX\src\XXX\node_modules\@babel\core\lib\config\full.js:235:43)
    at loadPluginDescriptor.next (<anonymous>)
i ｢wdm｣: Failed to compile.

Removing @sencha/ext-react-babel-plugin from babel.config.json and from package.json leads us to yet another error, this time:

...
i [ext]: Completed ext-webpack-plugin processing
× ｢wdm｣: Time: 14816ms
Built at: 06/24/2020 5:30:51 PM
                                       Asset       Size  Chunks  Chunk Names
                                     main.js     21 MiB    main  main
                   resources/images/XXX1.svg     13 KiB
                   resources/images/XXX2.jpg    282 KiB
                   resources/images/XXX3.svg   6.46 KiB
                   resources/images/XXX4.png   17.4 KiB
                   resources/images/XXX5.gif   7.19 KiB
                     resources/manifest.json  336 bytes
Entrypoint main = main.js

ERROR in _compilation: TypeError: Cannot read property 'tap' of undefined
i ｢wdm｣: Failed to compile.

The way we've found to gain a successful build/compile is to use ExtWebpackPlugin from the @sencha/ext-webpack-plugin package, NOT the @sencha/ext-react-webpack-plugin which the documentation illustrates. Interestingly, the most recent version available to us of the non-working package (@sencha/ext-react-webpack-plugin) is v6.7.0 whereas the working package (@sencha/ext-webpack-plugin) is inline with the rest of our ExtReact versions (v7.2.0).

I know that was a lot. To recap, if we follow the ExtReact v7.2.0 documentation and use one or both of @sencha/ext-react-webpack-plugin or @sencha/ext-react-webpack-plugin, we run into compilation errors. Getting rid of both and using ExtWebpackPlugin from @sencha/ext-webpack-plugin, we can successfully build and run our application.

Not requesting an engineering effort since we can get a successful compilation/run out of using the @sencha/ext-webpack-plugin at a version inline with our ExtReact version. Rather, requesting the documentation be updated to remove a non-working configuration of Webpack and Babel.