I'm trying to add tests to volto-form-block and figured the best place to start would be the current best-practise for addon testing by using the docker and Makefile configuration for isolated testing as noted in the effective volto training. I ran yo @plone/volto:addon with the latest update available for the generator to generate a clean addon and copied across all the new and changes files into volto-form-block. I am trying to get this working with Volto 16.
Trying to run the setup commands (make dev), I'm met with the following exception whilst docker is running the yarn start command to run the development frontend:
volto-form-block-addon-dev-1 | Module build failed (from ./node_modules/razzle/config/babel-loader/razzle-babel-loader.js):
volto-form-block-addon-dev-1 | Error: Cannot find module '@babel/plugin-proposal-export-default-from'
volto-form-block-addon-dev-1 | Require stack:
volto-form-block-addon-dev-1 | - /app/node_modules/@babel/core/lib/config/files/plugins.js
volto-form-block-addon-dev-1 | - /app/node_modules/@babel/core/lib/config/files/index.js
volto-form-block-addon-dev-1 | - /app/node_modules/@babel/core/lib/index.js
volto-form-block-addon-dev-1 | - /app/node_modules/babel-loader/lib/index.js
volto-form-block-addon-dev-1 | - /app/node_modules/razzle/config/babel-loader/razzle-babel-loader.js
volto-form-block-addon-dev-1 | - /app/node_modules/loader-runner/lib/loadLoader.js
volto-form-block-addon-dev-1 | - /app/node_modules/loader-runner/lib/LoaderRunner.js
volto-form-block-addon-dev-1 | - /app/node_modules/webpack/lib/NormalModule.js
volto-form-block-addon-dev-1 | - /app/node_modules/webpack/lib/NormalModuleFactory.js
volto-form-block-addon-dev-1 | - /app/node_modules/webpack/lib/Compiler.js
volto-form-block-addon-dev-1 | - /app/node_modules/webpack/lib/webpack.js
volto-form-block-addon-dev-1 | - /app/node_modules/razzle/scripts/start.js
volto-form-block-addon-dev-1 |
volto-form-block-addon-dev-1 | Make sure that all the Babel plugins and presets you are using
volto-form-block-addon-dev-1 | are defined as dependencies or devDependencies in your package.json
volto-form-block-addon-dev-1 | file. It's possible that the missing plugin is loaded by a preset
volto-form-block-addon-dev-1 | you are using that forgot to add the plugin to its dependencies: you
volto-form-block-addon-dev-1 | can workaround this problem by explicitly adding the missing package
volto-form-block-addon-dev-1 | to your top-level package.json.
volto-form-block-addon-dev-1 |
volto-form-block-addon-dev-1 | 1133 | /***/ (function(module, exports) {
volto-form-block-addon-dev-1 | 1134 |
volto-form-block-addon-dev-1 | > 1135 | throw new Error("Module build failed (from ./node_modules/razzle/config/babel-loader/razzle-babel-loader.js):\nError: Cannot find module '@babel/plugin-proposal-export-default-from'\nRequire stack:\n- /app/node_modules/@babel/core/lib/config/files/plugins.js\n- /app/node_modules/@babel/core/lib/config/files/index.js\n- /app/node_modules/@babel/core/lib/index.js\n- /app/node_modules/babel-loader/lib/index.js\n- /app/node_modules/razzle/config/babel-loader/razzle-babel-loader.js\n- /app/node_modules/loader-runner/lib/loadLoader.js\n- /app/node_modules/loader-runner/lib/LoaderRunner.js\n- /app/node_modules/webpack/lib/NormalModule.js\n- /app/node_modules/webpack/lib/NormalModuleFactory.js\n- /app/node_modules/webpack/lib/Compiler.js\n- /app/node_modules/webpack/lib/webpack.js\n- /app/node_modules/razzle/scripts/start.js\n\nMake sure that all the Babel plugins and presets you are using\nare defined as dependencies or devDependencies in your package.json\nfile. It's possible that the missing plugin is loaded by a preset\nyou are using that forgot to add the plugin to its dependencies: you\ncan workaround this problem by explicitly adding the missing package\nto your top-level package.json.\n\n at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)\n at resolve (node:internal/modules/cjs/helpers:125:19)\n at tryRequireResolve (/app/node_modules/@babel/core/lib/config/files/plugins.js:121:11)\n at resolveStandardizedNameForRequire (/app/node_modules/@babel/core/lib/config/files/plugins.js:155:19)\n at resolveStandardizedName (/app/node_modules/@babel/core/lib/config/files/plugins.js:170:12)\n at loadPlugin (/app/node_modules/@babel/core/lib/config/files/plugins.js:52:20)\n at loadPlugin.next (<anonymous>)\n at createDescriptor (/app/node_modules/@babel/core/lib/config/config-descriptors.js:140:16)\n at createDescriptor.next (<anonymous>)\n at evaluateSync (/app/node_modules/gensync/index.js:251:28)\n at /app/node_modules/gensync/index.js:31:34\n at Array.map (<anonymous>)\n at Function.sync (/app/node_modules/gensync/index.js:31:22)\n at Function.all (/app/node_modules/gensync/index.js:210:24)\n at Generator.next (<anonymous>)\n at createDescriptors (/app/node_modules/@babel/core/lib/config/config-descriptors.js:102:41)\n at createDescriptors.next (<anonymous>)\n at createPluginDescriptors (/app/node_modules/@babel/core/lib/config/config-descriptors.js:99:17)\n at createPluginDescriptors.next (<anonymous>)\n at /app/node_modules/@babel/core/lib/gensync-utils/functional.js:13:65\n at Generator.next (<anonymous>)\n at mergeChainOpts (/app/node_modules/@babel/core/lib/config/config-chain.js:349:34)\n at mergeChainOpts.next (<anonymous>)\n at chainWalker (/app/node_modules/@babel/core/lib/config/config-chain.js:316:14)\n at chainWalker.next (<anonymous>)\n at loadFileChain (/app/node_modules/@babel/core/lib/config/config-chain.js:191:24)\n at loadFileChain.next (<anonymous>)\n at buildRootChain (/app/node_modules/@babel/core/lib/config/config-chain.js:77:27)\n at buildRootChain.next (<anonymous>)\n at loadPrivatePartialConfig (/app/node_modules/@babel/core/lib/config/partial.js:72:62)\n at loadPrivatePartialConfig.next (<anonymous>)\n at loadPartialConfig (/app/node_modules/@babel/core/lib/config/partial.js:115:25)\n at loadPartialConfig.next (<anonymous>)\n at evaluateSync (/app/node_modules/gensync/index.js:251:28)\n at sync (/app/node_modules/gensync/index.js:89:14)\n at stopHiding - secret - don't use this - v1 (/app/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)\n at loadPartialConfigSync (/app/node_modules/@babel/core/lib/config/index.js:37:84)\n at Object.loadPartialConfig (/app/node_modules/@babel/core/lib/config/index.js:46:14)\n at Object.customOptions (/app/node_modules/razzle/config/babel-loader/razzle-babel-loader.js:85:25)\n at Object.<anonymous> (/app/node_modules/babel-loader/lib/index.js:76:52)\n at Generator.next (<anonymous>)\n at asyncGeneratorStep (/app/node_modules/babel-loader/lib/index.js:3:103)\n at _next (/app/node_modules/babel-loader/lib/index.js:4:194)\n at /app/node_modules/babel-loader/lib/index.js:4:364\n at new Promise (<anonymous>)\n at Object.<anonymous> (/app/node_modules/babel-loader/lib/index.js:4:97)\n at Object.loader (/app/node_modules/babel-loader/lib/index.js:48:18)\n at Object.<anonymous> (/app/node_modules/babel-loader/lib/index.js:44:12)");
volto-form-block-addon-dev-1 | 1136 |
volto-form-block-addon-dev-1 | 1137 | /***/ }),
volto-form-block-addon-dev-1 | 1138 |
volto-form-block-addon-dev-1 |
volto-form-block-addon-dev-1 |
volto-form-block-addon-dev-1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:1028:15)
volto-form-block-addon-dev-1 | at resolve (node:internal/modules/cjs/helpers:125:19)
volto-form-block-addon-dev-1 | at tryRequireResolve (/app/node_modules/@babel/core/lib/config/files/plugins.js:121:11)
volto-form-block-addon-dev-1 | at resolveStandardizedNameForRequire (/app/node_modules/@babel/core/lib/config/files/plugins.js:155:19)
volto-form-block-addon-dev-1 | at resolveStandardizedName (/app/node_modules/@babel/core/lib/config/files/plugins.js:170:12)
volto-form-block-addon-dev-1 | at loadPlugin (/app/node_modules/@babel/core/lib/config/files/plugins.js:52:20)
volto-form-block-addon-dev-1 | at loadPlugin.next (<anonymous>)
volto-form-block-addon-dev-1 | at createDescriptor (/app/node_modules/@babel/core/lib/config/config-descriptors.js:140:16)
volto-form-block-addon-dev-1 | at createDescriptor.next (<anonymous>)
volto-form-block-addon-dev-1 | at evaluateSync (/app/node_modules/gensync/index.js:251:28)
volto-form-block-addon-dev-1 | at /app/node_modules/gensync/index.js:31:34
volto-form-block-addon-dev-1 | at Array.map (<anonymous>)
volto-form-block-addon-dev-1 | at Function.sync (/app/node_modules/gensync/index.js:31:22)
volto-form-block-addon-dev-1 | at Function.all (/app/node_modules/gensync/index.js:210:24)
volto-form-block-addon-dev-1 | at Generator.next (<anonymous>)
volto-form-block-addon-dev-1 | at createDescriptors (/app/node_modules/@babel/core/lib/config/config-descriptors.js:102:41)
volto-form-block-addon-dev-1 | at createDescriptors.next (<anonymous>)
volto-form-block-addon-dev-1 | at createPluginDescriptors (/app/node_modules/@babel/core/lib/config/config-descriptors.js:99:17)
volto-form-block-addon-dev-1 | at createPluginDescriptors.next (<anonymous>)
volto-form-block-addon-dev-1 | at /app/node_modules/@babel/core/lib/gensync-utils/functional.js:13:65
volto-form-block-addon-dev-1 | at Generator.next (<anonymous>)
volto-form-block-addon-dev-1 | at mergeChainOpts (/app/node_modules/@babel/core/lib/config/config-chain.js:349:34)
volto-form-block-addon-dev-1 | at mergeChainOpts.next (<anonymous>)
volto-form-block-addon-dev-1 | at chainWalker (/app/node_modules/@babel/core/lib/config/config-chain.js:316:14)
volto-form-block-addon-dev-1 | at chainWalker.next (<anonymous>)
volto-form-block-addon-dev-1 | at loadFileChain (/app/node_modules/@babel/core/lib/config/config-chain.js:191:24)
volto-form-block-addon-dev-1 | at loadFileChain.next (<anonymous>)
volto-form-block-addon-dev-1 | at buildRootChain (/app/node_modules/@babel/core/lib/config/config-chain.js:77:27)
volto-form-block-addon-dev-1 | at buildRootChain.next (<anonymous>)
volto-form-block-addon-dev-1 | at loadPrivatePartialConfig (/app/node_modules/@babel/core/lib/config/partial.js:72:62)
volto-form-block-addon-dev-1 | at loadPrivatePartialConfig.next (<anonymous>)
volto-form-block-addon-dev-1 | at loadPartialConfig (/app/node_modules/@babel/core/lib/config/partial.js:115:25)
volto-form-block-addon-dev-1 | at loadPartialConfig.next (<anonymous>)
volto-form-block-addon-dev-1 | at evaluateSync (/app/node_modules/gensync/index.js:251:28)
volto-form-block-addon-dev-1 | at sync (/app/node_modules/gensync/index.js:89:14)
volto-form-block-addon-dev-1 | at stopHiding - secret - don't use this - v1 (/app/node_modules/@babel/core/lib/errors/rewrite-stack-trace.js:47:12)
volto-form-block-addon-dev-1 | at loadPartialConfigSync (/app/node_modules/@babel/core/lib/config/index.js:37:84)
volto-form-block-addon-dev-1 | at Object.loadPartialConfig (/app/node_modules/@babel/core/lib/config/index.js:46:14)
volto-form-block-addon-dev-1 | at Object.customOptions (/app/node_modules/razzle/config/babel-loader/razzle-babel-loader.js:85:25)
volto-form-block-addon-dev-1 | at Object.<anonymous> (/app/node_modules/babel-loader/lib/index.js:76:52)
volto-form-block-addon-dev-1 | at Generator.next (<anonymous>)
volto-form-block-addon-dev-1 | at asyncGeneratorStep (/app/node_modules/babel-loader/lib/index.js:3:103)
volto-form-block-addon-dev-1 | at _next (/app/node_modules/babel-loader/lib/index.js:4:194)
volto-form-block-addon-dev-1 | at /app/node_modules/babel-loader/lib/index.js:4:364
volto-form-block-addon-dev-1 | at new Promise (<anonymous>)
volto-form-block-addon-dev-1 | at Object.<anonymous> (/app/node_modules/babel-loader/lib/index.js:4:97)
volto-form-block-addon-dev-1 | at Object.loader (/app/node_modules/babel-loader/lib/index.js:48:18)
volto-form-block-addon-dev-1 | at Object.<anonymous> (/app/node_modules/babel-loader/lib/index.js:44:12)
volto-form-block-addon-dev-1 | at Object../src/index.js (/app/build/server.js:1135:7)
volto-form-block-addon-dev-1 | at __webpack_require__ (/app/webpack/bootstrap:748:1)
volto-form-block-addon-dev-1 | at fn (/app/build/webpack:/webpack/bootstrap:59:1)
volto-form-block-addon-dev-1 | at Object.0 (/app/build/server.js:1148:1)
volto-form-block-addon-dev-1 | at __webpack_require__ (/app/build/webpack:/webpack/bootstrap:748:1)
volto-form-block-addon-dev-1 | at /app/build/webpack:/webpack/bootstrap:815:1
volto-form-block-addon-dev-1 | at Object.<anonymous> (/app/build/server.js:820:10)
volto-form-block-addon-dev-1 | at Module._compile (node:internal/modules/cjs/loader:1198:14)
volto-form-block-addon-dev-1 | at Object.Module._extensions..js (node:internal/modules/cjs/loader:1252:10)
volto-form-block-addon-dev-1 | at Module.load (node:internal/modules/cjs/loader:1076:32)
volto-form-block-addon-dev-1 |
volto-form-block-addon-dev-1 | sswp> !!! Script exited with code 1
I can confirm that all of the relevant babel plugins are found in node_modules within the docker container. The babel.config.js of the plugin is the default one:
module.exports = function (api) {
api.cache(true);
const presets = ['razzle'];
const plugins = [
[
'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
{
messagesDir: './build/messages/',
},
],
];
return {
plugins,
presets,
};
};
The babel
I'm trying to get this working in Volto 16.30.0 as mentioned before, I don't have any issues with the build when running 17. I don't see why it fails on 16 though, as the generated babel.config.js points straight to @plone/volto/babel (module.exports = require('@plone/volto/babel');) which works fine in a normal 16.30.0 frontend.
I've pushed my progress on a branch if anybody wanted to take a look: GitHub - collective/volto-form-block at testing
However, I don't see any problem in making it work there too, backporting all the docker boilerplate there.