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.
@mgusmano
The ExtReact v7.2.0 documentation identifies that we should use
ExtWebpackPluginfrom 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:
Removing @sencha/ext-react-babel-plugin from babel.config.json and from package.json leads us to yet another error, this time:
The way we've found to gain a successful build/compile is to use
ExtWebpackPluginfrom 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
ExtWebpackPluginfrom @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.