import { createSpaConfig } from '@rocket/building-rollup';
import { absoluteBaseUrlNetlify } from '@rocket/core/helpers';
import { rocketLaunch } from '@rocket/launch';
import { copy } from '@web/rollup-plugin-copy';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import merge from 'deepmerge';
import {
addPlugin,
adjustPluginOptions,
} from 'plugins-manager';
import postcss from 'rollup-plugin-postcss';
import svgo from 'rollup-plugin-svgo';
import visualizer from 'rollup-plugin-visualizer';
const baseConfig = createSpaConfig({
absoluteBaseUrl: absoluteBaseUrlNetlify(
'http://localhost:8080'
),
// development mode creates a non-minified build for debugging or development
developmentMode: process.env.ROLLUP_WATCH === 'true',
// set to true to inject the service worker registration into your index.html
injectServiceWorker: false,
// if you use createSpaConfig, you can use your index.html as entrypoint,
// any <script type="module"> inside will be bundled by rollup
input: 'index.html',
// alternatively, you can use your JS as entrypoint for rollup and
// optionally set a HTML template manually
// input: './app.js',
// use the outputdir option to modify where files are output
output: { dir: 'build' },
presets: [rocketLaunch()],
});
export default merge(baseConfig, {
output: {
assetFileNames: 'assets/[name]-[hash][extname]',
chunkFileNames: 'static/js/chunks/[name]-[hash].js',
// TODO: rename to [hash].js before deploymentout
entryFileNames: 'static/js/[name]-[hash].js',
format: 'es',
},
setupBuildPlugins: [
addPlugin({
name: 'copy',
options: { patterns: 'assets/css/**/*' },
plugin: copy,
}),
addPlugin({
name: 'postcss',
options: {
extract: true,
plugin: [autoprefixer(), cssnano()],
},
plugin: postcss,
}),
addPlugin({
name: 'svgo',
options: {
// See https://github.com/svg/svgo#what-it-can-do
removeAttributesBySelector: true,
removeOffCanvasPaths: true,
removeRasterImages: true,
reusePaths: true,
sortAttrs: true,
},
plugin: svgo,
}),
addPlugin({
name: 'visualizer',
options: {
brotliSize: true,
gzipSize: true,
template: 'treemap',
},
plugin: visualizer,
}),
adjustPluginOptions('importMetaAssets', {
transform: (assetBuffer, assetPath) => {
return assetPath.endsWith('.svg')
? svgo
.optimize(assetBuffer.toString())
.then(({ data }) => data)
: assetBuffer;
},
}),
// workaround for development vs build relative paths
adjustPluginOptions('html', {
transform: (html) =>
html.replace(/href="\.\/public\//g, 'href="./'),
}),
],
});
yarn build
yarn run v1.22.5
$ rimraf build && tsc && rocket -c rocket.config.mjs
(node:23104) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'includes' of undefined
at RocketCli.considerPlugin (file:///C:/Users/ateyar/Documents/GitHub/x-wc/node_modules/@rocket/cli/src/RocketCli.js:188:28)
at RocketCli.run (file:///C:/Users/ateyar/Documents/GitHub/x-wc/node_modules/@rocket/cli/src/RocketCli.js:145:16)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:23104) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:23104) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Done in 10.61s.
I went through the doc couples of times but can't figure out why I am getting that. Could you please advise on how to make this work, and ways I could improve this config?