Importing @wordpress/dataviews causes Javascript to stop working

sage
,
1

I’m encountering an issue when trying to use the @wordpress/dataviews module in a Sage 10 theme with Bedrock. When I import DataViews from @wordpress/dataviews in my app.js file, the entire JavaScript application stops working. There are no error messages in the browser console or in the PHP error log, making it difficult to diagnose.

Steps

  1. Install package npm install @wordpress/dataviews --save
  2. Import the DataViews module in app.js with:
import domReady from '@roots/sage/client/dom-ready';
import { DataViews } from '@wordpress/dataviews';
console.log('DataViews', DataViews);

/**
 * Application entrypoint
 */
domReady(async () => {
  console.log('Hello world!');
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);
  1. Run the build process and load the page where this script is included. Nothing will be logged
  2. Comment out the import and first console.log:
...
// import { DataViews } from '@wordpress/dataviews';
// console.log('DataViews', DataViews);
...
  1. Run build again and Hello world! gets logged.

Questions:

  1. Has anyone else experienced this issue when using @wordpress/dataviews with Sage?
  2. Are there any additional configurations or changes needed for Bud or Sage bundling settings to get this working?
  3. What are the best practices for debugging issues like this where the import of a module causes the script to silently fail without any errors in the console or logs? Are there specific tools or techniques within Sage, Webpack, or WordPress development that could help identify the root cause?
2

@wordpress/dataviews is a package that needs to be used in the editor, so attempting to use it within the app.js file isn’t likely to work since that file is executed on the front-end of your WP site

Can you try using it in editor.js? Or in a block or editor plugin?

1 Like
3

Thanks for the suggestion! I tried to use @wordpress/dataviews in editor.js. Unfortunately, this didn’t work either it still fails without any errors.

entrypoints.json

{
  "app": {
    "js": [
      "js/runtime.js",
      "js/app.js"
    ],
    "dependencies": []
  },
  "editor": {
    "js": [
      "js/runtime.js",
      "js/editor.js"
    ],
    "dependencies": [
      "wp-dataviews",
      "wp-data",
      "wp-hooks"
    ]
  }
}
4

The WordPress developer blog has a tutorial on how to use Data Views