I am sure I am doing something wrong.

[scottsawyer]

Describe your question

I am trying to build a block filter and get the following error.

File was processed with these loaders:
 * ./node_modules/10up-toolkit/config/webpack/plugins/noop-loader.js
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| var _jsxFileName = "/wp-content/themes/<custom_theme>/includes/filters/background-skew/backgroundSkew.js";
> import { createElement } from "@wordpress/element";
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }

Node version: v20.18.2
npm version: 11.0.0
10up-toolkit: 6.4.0

What additional info would be helpful?

Code of Conduct

• I agree to follow this project's Code of Conduct

[fabiankaegy]

Hey @scottsawyer👋

Can you share the 10up-toolkit portion of your package.json file?

[scottsawyer]

@fabiankaegy Thank you for the quick response:

	"10up-toolkit": {
		"devURL": "https://<project_name>.lndo.site",
		"useScriptModules": true,
		"entry": {
			"admin": "./assets/js/admin/admin.js",
			"frontend": "./assets/js/frontend/frontend.js",
			"shared": "./assets/js/shared/shared.js",
			"styleguide": "./assets/js/styleguide/styleguide.js",
			"admin-style": "./assets/css/admin/admin-style.css",
			"editor-style": "./assets/css/frontend/editor-style.css",
			"block-filters": "./includes/filters/block-filters.js",
			"shared-style": "./assets/css/shared/shared-style.css",
			"style": "./assets/css/frontend/style.css",
			"core-block-overrides": "./includes/core-block-overrides.js"
		}
	}

[scottsawyer]

@fabiankaegy I think an important part of the error message got munged in the initial issue, sorry, maybe this is more helpful?

ERROR in ./includes/filters/background-skew/backgroundSkew.js 2:0                                                          
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (2:0)                                 
File was processed with these loaders:                                                                                     
 * ./node_modules/10up-toolkit/config/webpack/plugins/noop-loader.js                                                       
 * ./node_modules/babel-loader/lib/index.js                                                                                
You may need an additional loader to handle the result of these loaders.                                                   
| var _jsxFileName = "/<project>/wp-content/themes/<theme>/includes/filters/background-skew/backgroundSkew.js";
> import { createElement } from "@wordpress/element";                                                                      
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _ext
ends.apply(null, arguments); }                                                                                             
| /**                                                                                                                      
 @ ./includes/filters/block-filters.js 1:0-43                                                                              
                                                                                                                           
ERROR in [eslint] No ESLint configuration found in /<project>/wp-content/themes/<theme>/includes/filters/background-skew.

I am pretty new to doing this sort of theming, so I wouldn't be surprised if I am missing some steps. I tried doing this with just wp-scripts, and failed miserably. I just stumbled across the 10up-toolkit and it looks really promising, if I can just get past this hump.

When I switched to 10up, I completely removed all other dependencies, deleted package-lock.json, node_modules, and added this package, so there shouldn't be any leftover cruft messing with it.

FYI, I tried moving the "block-filters" under "moduleEntry" in package.json to no avail.

[scottsawyer]

I've been searching for whatever this error message means:
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module'

Several stack posts say it has to do with eslint and babel? I don't have any of these in my project. I would have thought this would be handled by 10up, but maybe I am not looking at the right thing?

I am really hoping someone who knows more about this will pipe in.