Commit a4b6b828ff9 for woocommerce
commit a4b6b828ff9975516fa16565f3a1ebb45692a4af
Author: Manzoor Wani <manzoorwani.jk@gmail.com>
Date: Wed Jul 22 18:10:43 2026 +0530
Fix ESLint errors in the default scaffolded extension (#66788)
A fresh create-woo-extension scaffold (default variant) emits 12 ESLint
errors on first lint:js run. Fix each:
- Allow the extension's own text domain via allowedTextDomain (the
plugin's recommended config hardcodes 'woocommerce'), fixing 8
@wordpress/i18n-text-domain errors. Applies to all variants.
- Turn off @typescript-eslint/no-require-imports for CommonJS config
files (webpack.config.js), fixing 2 errors. Applies to all variants.
- Track the Search component's selection with useState instead of
calling an undefined setInlineSelect, fixing the no-undef error.
- Declare @wordpress/components and @wordpress/element, which the
example page imports, fixing import/no-extraneous-dependencies.
The example source is formatted for the README's example slug
(my-extension-name); other slug lengths may need 'npm run format', an
inherent limit of pre-formatting a template with a variable-length
text domain. Non-default variants have their own separate formatting
debt, tracked as a follow-up.
diff --git a/packages/js/create-woo-extension/changelog/66078-fix-scaffold-lint-clean b/packages/js/create-woo-extension/changelog/66078-fix-scaffold-lint-clean
new file mode 100644
index 00000000000..0ba9fe065c6
--- /dev/null
+++ b/packages/js/create-woo-extension/changelog/66078-fix-scaffold-lint-clean
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix ESLint errors in the default scaffolded extension: allow the extension's own text domain, skip `no-require-imports` on CommonJS config files, declare `@wordpress/components`/`@wordpress/element`, and fix the example page's undefined `setInlineSelect` handler.
diff --git a/packages/js/create-woo-extension/index.js b/packages/js/create-woo-extension/index.js
index e3cd1660a1b..03ec7789188 100644
--- a/packages/js/create-woo-extension/index.js
+++ b/packages/js/create-woo-extension/index.js
@@ -1,6 +1,8 @@
const { join } = require( 'path' );
const defaultDependencies = [
+ '@wordpress/components',
+ '@wordpress/element',
'@wordpress/hooks',
'@wordpress/i18n',
'@woocommerce/components',
diff --git a/packages/js/create-woo-extension/variants/add-report/eslint.config.mjs.mustache b/packages/js/create-woo-extension/variants/add-report/eslint.config.mjs.mustache
index 6ce87643f58..f8c1e5fc44b 100644
--- a/packages/js/create-woo-extension/variants/add-report/eslint.config.mjs.mustache
+++ b/packages/js/create-woo-extension/variants/add-report/eslint.config.mjs.mustache
@@ -5,6 +5,18 @@ export default [
{
rules: {
'react/react-in-jsx-scope': 'off',
+ /* The scaffolded extension ships its own text domain, not WooCommerce's. */
+ '@wordpress/i18n-text-domain': [
+ 'error',
+ { allowedTextDomain: '{{textdomain}}' },
+ ],
+ },
+ },
+ {
+ /* Node config files (e.g. webpack.config.js) use CommonJS require(). */
+ files: [ '**/*.config.js' ],
+ rules: {
+ '@typescript-eslint/no-require-imports': 'off',
},
},
];
diff --git a/packages/js/create-woo-extension/variants/add-task/eslint.config.mjs.mustache b/packages/js/create-woo-extension/variants/add-task/eslint.config.mjs.mustache
index 6ce87643f58..f8c1e5fc44b 100644
--- a/packages/js/create-woo-extension/variants/add-task/eslint.config.mjs.mustache
+++ b/packages/js/create-woo-extension/variants/add-task/eslint.config.mjs.mustache
@@ -5,6 +5,18 @@ export default [
{
rules: {
'react/react-in-jsx-scope': 'off',
+ /* The scaffolded extension ships its own text domain, not WooCommerce's. */
+ '@wordpress/i18n-text-domain': [
+ 'error',
+ { allowedTextDomain: '{{textdomain}}' },
+ ],
+ },
+ },
+ {
+ /* Node config files (e.g. webpack.config.js) use CommonJS require(). */
+ files: [ '**/*.config.js' ],
+ rules: {
+ '@typescript-eslint/no-require-imports': 'off',
},
},
];
diff --git a/packages/js/create-woo-extension/variants/dashboard-section/eslint.config.mjs.mustache b/packages/js/create-woo-extension/variants/dashboard-section/eslint.config.mjs.mustache
index 6ce87643f58..f8c1e5fc44b 100644
--- a/packages/js/create-woo-extension/variants/dashboard-section/eslint.config.mjs.mustache
+++ b/packages/js/create-woo-extension/variants/dashboard-section/eslint.config.mjs.mustache
@@ -5,6 +5,18 @@ export default [
{
rules: {
'react/react-in-jsx-scope': 'off',
+ /* The scaffolded extension ships its own text domain, not WooCommerce's. */
+ '@wordpress/i18n-text-domain': [
+ 'error',
+ { allowedTextDomain: '{{textdomain}}' },
+ ],
+ },
+ },
+ {
+ /* Node config files (e.g. webpack.config.js) use CommonJS require(). */
+ files: [ '**/*.config.js' ],
+ rules: {
+ '@typescript-eslint/no-require-imports': 'off',
},
},
];
diff --git a/packages/js/create-woo-extension/variants/default/eslint.config.mjs.mustache b/packages/js/create-woo-extension/variants/default/eslint.config.mjs.mustache
index 6ce87643f58..f8c1e5fc44b 100644
--- a/packages/js/create-woo-extension/variants/default/eslint.config.mjs.mustache
+++ b/packages/js/create-woo-extension/variants/default/eslint.config.mjs.mustache
@@ -5,6 +5,18 @@ export default [
{
rules: {
'react/react-in-jsx-scope': 'off',
+ /* The scaffolded extension ships its own text domain, not WooCommerce's. */
+ '@wordpress/i18n-text-domain': [
+ 'error',
+ { allowedTextDomain: '{{textdomain}}' },
+ ],
+ },
+ },
+ {
+ /* Node config files (e.g. webpack.config.js) use CommonJS require(). */
+ files: [ '**/*.config.js' ],
+ rules: {
+ '@typescript-eslint/no-require-imports': 'off',
},
},
];
diff --git a/packages/js/create-woo-extension/variants/default/src/index.js.mustache b/packages/js/create-woo-extension/variants/default/src/index.js.mustache
index 521b2fae1a4..86e660f2749 100644
--- a/packages/js/create-woo-extension/variants/default/src/index.js.mustache
+++ b/packages/js/create-woo-extension/variants/default/src/index.js.mustache
@@ -5,62 +5,76 @@ import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
import { Dropdown } from '@wordpress/components';
import * as Woo from '@woocommerce/components';
-import { Fragment } from '@wordpress/element';
+import { Fragment, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import './index.scss';
-const MyExamplePage = () => (
- <Fragment>
- <Woo.Section component="article">
- <Woo.SectionHeader title={ __( 'Search', '{{textdomain}}' ) } />
- <Woo.Search
- type="products"
- placeholder="Search for something"
- selected={ [] }
- onChange={ ( items ) => setInlineSelect( items ) }
- inlineTags
- />
- </Woo.Section>
+const MyExamplePage = () => {
+ const [ inlineSelect, setInlineSelect ] = useState( [] );
- <Woo.Section component="article">
- <Woo.SectionHeader title={ __( 'Dropdown', '{{textdomain}}' ) } />
- <Dropdown
- renderToggle={ ( { isOpen, onToggle } ) => (
- <Woo.DropdownButton
- onClick={ onToggle }
- isOpen={ isOpen }
- labels={ [ 'Dropdown' ] }
- />
- ) }
- renderContent={ () => <p>Dropdown content here</p> }
- />
- </Woo.Section>
+ return (
+ <Fragment>
+ <Woo.Section component="article">
+ <Woo.SectionHeader
+ title={ __( 'Search', '{{textdomain}}' ) }
+ />
+ <Woo.Search
+ type="products"
+ placeholder="Search for something"
+ selected={ inlineSelect }
+ onChange={ ( items ) => setInlineSelect( items ) }
+ inlineTags
+ />
+ </Woo.Section>
- <Woo.Section component="article">
- <Woo.SectionHeader title={ __( 'Pill shaped container', '{{textdomain}}' ) } />
- <Woo.Pill className={ 'pill' }>
- { __( 'Pill Shape Container', '{{textdomain}}' ) }
- </Woo.Pill>
- </Woo.Section>
+ <Woo.Section component="article">
+ <Woo.SectionHeader
+ title={ __( 'Dropdown', '{{textdomain}}' ) }
+ />
+ <Dropdown
+ renderToggle={ ( { isOpen, onToggle } ) => (
+ <Woo.DropdownButton
+ onClick={ onToggle }
+ isOpen={ isOpen }
+ labels={ [ 'Dropdown' ] }
+ />
+ ) }
+ renderContent={ () => <p>Dropdown content here</p> }
+ />
+ </Woo.Section>
- <Woo.Section component="article">
- <Woo.SectionHeader title={ __( 'Spinner', '{{textdomain}}' ) } />
- <Woo.H>I am a spinner!</Woo.H>
- <Woo.Spinner />
- </Woo.Section>
+ <Woo.Section component="article">
+ <Woo.SectionHeader
+ title={ __( 'Pill shaped container', '{{textdomain}}' ) }
+ />
+ <Woo.Pill className={ 'pill' }>
+ { __( 'Pill Shape Container', '{{textdomain}}' ) }
+ </Woo.Pill>
+ </Woo.Section>
- <Woo.Section component="article">
- <Woo.SectionHeader title={ __( 'Datepicker', '{{textdomain}}' ) } />
- <Woo.DatePicker
- text={ __( 'I am a datepicker!', '{{textdomain}}' ) }
- dateFormat={ 'MM/DD/YYYY' }
- />
- </Woo.Section>
- </Fragment>
-);
+ <Woo.Section component="article">
+ <Woo.SectionHeader
+ title={ __( 'Spinner', '{{textdomain}}' ) }
+ />
+ <Woo.H>I am a spinner!</Woo.H>
+ <Woo.Spinner />
+ </Woo.Section>
+
+ <Woo.Section component="article">
+ <Woo.SectionHeader
+ title={ __( 'Datepicker', '{{textdomain}}' ) }
+ />
+ <Woo.DatePicker
+ text={ __( 'I am a datepicker!', '{{textdomain}}' ) }
+ dateFormat={ 'MM/DD/YYYY' }
+ />
+ </Woo.Section>
+ </Fragment>
+ );
+};
addFilter( 'woocommerce_admin_pages_list', '{{slug}}', ( pages ) => {
pages.push( {
diff --git a/packages/js/create-woo-extension/variants/sql-modification/eslint.config.mjs.mustache b/packages/js/create-woo-extension/variants/sql-modification/eslint.config.mjs.mustache
index 6ce87643f58..f8c1e5fc44b 100644
--- a/packages/js/create-woo-extension/variants/sql-modification/eslint.config.mjs.mustache
+++ b/packages/js/create-woo-extension/variants/sql-modification/eslint.config.mjs.mustache
@@ -5,6 +5,18 @@ export default [
{
rules: {
'react/react-in-jsx-scope': 'off',
+ /* The scaffolded extension ships its own text domain, not WooCommerce's. */
+ '@wordpress/i18n-text-domain': [
+ 'error',
+ { allowedTextDomain: '{{textdomain}}' },
+ ],
+ },
+ },
+ {
+ /* Node config files (e.g. webpack.config.js) use CommonJS require(). */
+ files: [ '**/*.config.js' ],
+ rules: {
+ '@typescript-eslint/no-require-imports': 'off',
},
},
];
diff --git a/packages/js/create-woo-extension/variants/table-column/eslint.config.mjs.mustache b/packages/js/create-woo-extension/variants/table-column/eslint.config.mjs.mustache
index 6ce87643f58..f8c1e5fc44b 100644
--- a/packages/js/create-woo-extension/variants/table-column/eslint.config.mjs.mustache
+++ b/packages/js/create-woo-extension/variants/table-column/eslint.config.mjs.mustache
@@ -5,6 +5,18 @@ export default [
{
rules: {
'react/react-in-jsx-scope': 'off',
+ /* The scaffolded extension ships its own text domain, not WooCommerce's. */
+ '@wordpress/i18n-text-domain': [
+ 'error',
+ { allowedTextDomain: '{{textdomain}}' },
+ ],
+ },
+ },
+ {
+ /* Node config files (e.g. webpack.config.js) use CommonJS require(). */
+ files: [ '**/*.config.js' ],
+ rules: {
+ '@typescript-eslint/no-require-imports': 'off',
},
},
];