Yarn dev - TypeError: Cannot read properties of undefined (reading 'startsWith')

Kobol909 · April 6, 2022, 11:11pm

As this is my first post here, I’ll start by thanking the team behind Roots ! You did an amazing job.

Also worth mentioning how good is this forum.

Now to my issue.
I have a full site that I created with the whole Roots stack, everything was running perfectly until today. Now when I try to “yarn dev”, this happens:

yarn run v1.22.17
$ bud dev --log.level=vvvv
[kobol] [logger] › ◉ config [Function: config]
[kobol] › bud Initialized timer…
[kobol] › ❯ process.env.NODE_ENV development
[kobol] › ❯ process.env.BABEL_ENV development
building bud Initialized timer…
[kobol] › … [1/5] bootstrap api
[kobol] › bound alias
[kobol] › bound assets
[kobol] › bound copy
[kobol] › bound config
[kobol] › bound webpackConfig
[kobol] › bound override
[kobol] › bound define
[kobol] › bound devtool
[kobol] › bound entry
[kobol] › bound js
[kobol] › bound css
[kobol] › bound experiments
[kobol] › bound externals
[kobol] › bound hash
[kobol] › bound version
[kobol] › bound minimize
[kobol] › bound persist
[kobol] › bound provide
[kobol] › bound proxy
[kobol] › bound run
[kobol] › bound runtime
[kobol] › bound serve
[kobol] › bound splitChunks
[kobol] › bound extract
[kobol] › bound template
[kobol] › bound use
[kobol] › bound watch
[kobol] › … [2/5] bootstrap hooks
[kobol] › … [3/5] bootstrap project
[kobol] › … [4/5] bootstrap env
[kobol] [env] › ❯ loading env
[kobol] [env] › no env values found
[kobol] › … [5/5] bootstrap dashboard
[kobol] › [1/5] bootstrap api
[kobol] › [2/5] bootstrap hooks
[kobol] › [4/5] bootstrap env
[kobol] › [5/5] bootstrap dashboard
[kobol] › [3/5] bootstrap project
[kobol] › … [1/3] register project
[kobol] [env] › ❯ getting publicEnv {}
[kobol] › … [2/3] register build
[kobol] › … [3/3] register dependencies
[kobol] › [3/3] register dependencies
[kobol] › [2/3] register build
[kobol] [project] › building profile Initialized timer…
[kobol] [project] › … reading project configuration files
[kobol] [project] › ● located user config bud.config.js
project config results
{“dynamic”: {“conditional”: , “global”: [“/usr/local/var/www/html/kobol.test/site/web/app/themes/kobol/bud.config.js”]}, “json”: {“conditional”: , “global”: }}[kobol] [project] › building profile Timer run for: 65ms
[kobol] › [1/3] register project
[kobol] › … [1/2] registered api
[kobol] › … [2/2] registered build
[kobol] › [2/2] registered build
[kobol] › [1/2] registered api
[kobol] › … [1/4] boot project
[kobol] › … [2/4] boot cache
[kobol] › … [3/4] boot server
[kobol] › … [4/4] boot extensions
[kobol] [extensions] › webpack-provide-plugin instantiated
[kobol] [extensions] › clean-webpack-plugin instantiated
[kobol] [extensions] › copy-webpack-plugin instantiated
[kobol] [extensions] › webpack-define-plugin instantiated
[kobol] [extensions] › webpack-hot-module-replacement-plugin instantiated
[kobol] [extensions] › webpack-manifest-plugin instantiated
[kobol] [extensions] › mini-css-extract-plugin instantiated
[kobol] › [1/4] boot project
[kobol] › [3/4] boot server
[kobol] [extensions] › registering Initialized timer…
[kobol] › ❯ registering webpack-provide-plugin
[kobol] › ❯ registering clean-webpack-plugin
[kobol] › ❯ registering copy-webpack-plugin
[kobol] › ❯ registering webpack-define-plugin
[kobol] › ❯ registering webpack-hot-module-replacement-plugin
[kobol] › ❯ registering webpack-manifest-plugin
[kobol] › ❯ registering mini-css-extract-plugin
[kobol] [extensions] › registering Timer run for: 5ms
[kobol] [extensions] › booting Initialized timer…
[kobol] › ❯ booting webpack-provide-plugin
[kobol] › ❯ booting clean-webpack-plugin
[kobol] › ❯ booting copy-webpack-plugin
[kobol] › ❯ booting webpack-define-plugin
[kobol] › ❯ booting webpack-hot-module-replacement-plugin
[kobol] › ❯ booting webpack-manifest-plugin
[kobol] › ❯ booting mini-css-extract-plugin
[kobol] [extensions] › booting Timer run for: 3ms
[kobol] [extensions] › ❯ importing @roots/bud-eslint
[kobol] [extensions] › ❯ importing @roots/bud-prettier
[kobol] [extensions] › ❯ importing @roots/bud-tailwindcss
[kobol] [extensions] › ❯ importing @roots/bud-postcss
[kobol] [extensions] › ❯ importing @roots/bud-stylelint
[kobol] [extensions] › ❯ importing @roots/sage
[kobol] [extensions] › ❯ importing @roots/bud-preset-wordpress
[kobol] [extensions] › ❯ importing @roots/bud-babel
[kobol] [extensions] › ❯ importing @roots/bud-entrypoints
[kobol] [extensions] › ❯ importing @roots/bud-preset-recommend
[kobol] [extensions] › ❯ importing @roots/bud-react
[kobol] [extensions] › ❯ importing @roots/bud-wordpress-manifests
[kobol] [extensions] › ❯ importing @roots/bud-wordpress-externals
[kobol] [extensions] › ❯ importing @roots/bud-wordpress-dependencies
[kobol] › ❯ registering @roots/bud-eslint
[kobol] [@roots/bud-eslint] › success registered bud.eslint @roots/bud-eslint
[kobol] › ❯ registering @roots/bud-prettier
[kobol] › ❯ registering @roots/bud-tailwindcss
[kobol] › bound tailwind
[kobol] › ❯ registering @roots/bud-postcss
[kobol] [@roots/bud-postcss] › success registered bud.postcss @roots/bud-postcss
[kobol] › postcss is installed
[kobol] [@roots/bud-postcss] › … resolving postcss plugins
[kobol] [@roots/bud-postcss] › resolving postcss plugins
[kobol] [@roots/bud-postcss] › success register called @roots/bud-postcss
[kobol] › ❯ registering @roots/sage
[kobol] › ❯ registering @roots/bud-preset-wordpress
[kobol] › ❯ registering @roots/bud-babel
[kobol] [@roots/bud-babel] › success registered bud.babel @roots/bud-babel
[kobol] [@roots/bud-babel] › success register called @roots/bud-babel
[kobol] › ❯ registering @roots/bud-entrypoints
[kobol] › ❯ registering @roots/bud-preset-recommend
[kobol] › ❯ registering @roots/bud-react
[kobol] › bound reactRefresh
[kobol] › ❯ registering @roots/bud-wordpress-manifests
[kobol] › ❯ booting @roots/bud-eslint
[kobol] › ❯ booting @roots/bud-prettier
[kobol] › ❯ booting @roots/bud-tailwindcss
[kobol] › loaded user tailwindcss config from [secure]/tailwind.config.js
[kobol] [extensions] [tailwindcss] › postcss has been configured for tailwindcss
[kobol] [@roots/bud-tailwindcss] › success @roots/bud-tailwindcss booted
[kobol] › ❯ booting @roots/bud-postcss
[kobol] › ❯ booting @roots/sage
[kobol] [api] › ❯ facade added to queue: alias [{“@fonts”:“./resources/fonts”,“@images”:“[secure]/resources/images”,“@scripts”:“[secure]/resources/scripts”,“@styles”:“[secure]/resources/styles”}]
[kobol] [api] › ❯ facade added to queue: splitChunks
[kobol] [api] › ❯ facade added to queue: devtool
[kobol] [@roots/sage] › success @roots/sage booted
[kobol] › ❯ booting @roots/bud-preset-wordpress
[kobol] › ❯ booting @roots/bud-babel
[kobol] › ❯ booting @roots/bud-entrypoints
[kobol] › ❯ booting @roots/bud-preset-recommend
[kobol] › ❯ booting @roots/bud-react
[kobol] [@roots/bud-react] › success @roots/bud-react booted
[kobol] › ❯ booting @roots/bud-wordpress-manifests
[kobol] › [4/4] boot extensions
[kobol] [cache] › cache hash generated 9icfaahtq8wstvt38qahiibdits_
[kobol] [cache] › ❯ --cache.type flag filesystem
[kobol] [api] › ❯ executing persist [“filesystem”]
[kobol] [api] › cache enabled filesystem
[kobol] › [2/4] boot cache
[kobol] › building bud Timer run for: 538ms
runner framework ready
process user configs Initialized timer…
[kobol] [api] › … Executing 3 enqueued functions
[kobol] [api] › ❯ executing alias [{“@fonts”:“./resources/fonts”,“@images”:“[secure]/resources/images”,“@scripts”:“[secure]/resources/scripts”,“@styles”:“[secure]/resources/styles”}]
[kobol] [api] › alias @fonts ./resources/fonts
[kobol] [api] › alias @images ./resources/images
[kobol] [api] › alias @scripts ./resources/scripts
[kobol] [api] › alias @styles ./resources/styles
[kobol] [api] › ❯ executing splitChunks none
[kobol] [api] › ❯ executing devtool none
[kobol] [api] › devtool
❯ processing [secure]/bud.config.js
… importing module [secure]/bud.config.js
… calling user config [secure]/bud.config.js
[kobol] [api] › ❯ facade added to queue: entry [{“app”:[“scripts/app.js”,“styles/app.css”],“editor”:[“scripts/editor.js”,“styles/editor.css”]}]
[kobol] [api] › ❯ facade added to queue: assets [[“images”]]
[kobol] [api] › ❯ facade added to queue: watch [[“tailwind.config.js”,“resources/views//*.blade.php","app/View//.php",“app/View/setup.php”,"resources/views///.blade.php”]]
[kobol] [api] › ❯ facade added to queue: proxy [“http://kobol.test”]
[kobol] [api] › … Executing 4 enqueued functions
[kobol] [api] › ❯ executing entry [{“app”:[“scripts/app.js”,“styles/app.css”],“editor”:[“scripts/editor.js”,“styles/editor.css”]}]
[kobol] [api] › ❯ executing assets [[“images”]]
[kobol] [api] › ❯ executing watch [[“tailwind.config.js”,“resources/views//*.blade.php","app/View//.php",“app/View/setup.php”,"resources/views///.blade.php”]]
[kobol] [api] › ❯ executing proxy [“http://kobol.test”]
[kobol] [api] › ❯ enabling proxy
retrieved static config (global)
[
retrieved static config (conditional)
process user configs Timer run for: 22ms
[kobol] [api] › ❯ executing run []
bud config traced calls
[{“arguments”: {“@fonts”: “/usr/local/var/www/html/kobol.test/site/web/app/themes/kobol/resources/fonts”, “@images”: “/usr/local/var/www/html/kobol.test/site/web/app/themes/kobol/resources/images”, “@scripts”: “/usr/local/var/www/html/kobol.test/site/web/app/themes/kobol/resources/scripts”, “@styles”: “/usr/local/var/www/html/kobol.test/site/web/app/themes/kobol/resources/styles”}, “method”: “alias”}, {“arguments”: “none”, “method”: “splitChunks”}, {“arguments”: “none”, “method”: “devtool”}, {“arguments”: {“app”: [“scripts/app.js”, “styles/app.css”], “editor”: [“scripts/editor.js”, “styles/editor.css”]}, “method”: “entry”}, {“arguments”: [“images”], “method”: “assets”}, {“arguments”: [“tailwind.config.js”, “resources/views//*.blade.php", "app/View//.php", “app/View/setup.php”, "resources/views///.blade.php”], “method”: “watch”}, {“arguments”: “http://kobol.test”, “method”: “proxy”}][kobol] › glob search [“scripts/app.js”,“styles/app.css”]
[kobol] › glob directory [secure]/resources
[kobol] › glob results [“scripts/app.js”,“styles/app.css”]
[kobol] [api] › entrypoints added app {“import”:[“scripts/app.js”,“styles/app.css”]}
[kobol] › glob search [“scripts/editor.js”,“styles/editor.css”]
[kobol] › glob directory [secure]/resources
[kobol] › glob results [“scripts/editor.js”,“styles/editor.css”]
[kobol] [api] › entrypoints added editor {“import”:[“scripts/editor.js”,“styles/editor.css”]}
[kobol] [extensions] › extensions.make Initialized timer…
[kobol] [extensions] › ❯ webpack-provide-plugin will not be used in the compilation
bud clean-webpack-plugin ctor options
{“cleanOnceBeforeBuildPatterns”: [“/*", “!dll”], “cleanStaleWebpackAssets”: true, “protectWebpackAssets”: true}[kobol] [extensions] › clean-webpack-plugin will be used in the compilation
bud copy-webpack-plugin ctor options
{“patterns”: [{“context”: “/usr/local/var/www/html/kobol.test/site/web/app/themes/kobol/resources”, “from”: "images//*”, “noErrorOnMissing”: true}]}[kobol] [extensions] › copy-webpack-plugin will be used in the compilation
[kobol] [extensions] › ❯ webpack-define-plugin will not be used in the compilation
[kobol] [extensions] › webpack-hot-module-replacement-plugin will be used in the compilation
bud webpack-manifest-plugin ctor options
{“fileName”: “manifest.json”, “writeToFileEmit”: true}[kobol] [extensions] › webpack-manifest-plugin will be used in the compilation
[kobol] [extensions] › ❯ mini-css-extract-plugin will not be used in the compilation
TypeError: Cannot read properties of undefined (reading ‘startsWith’)
[kobol] [bud] [node] [terminate] › exit
Done in 2.33s.

Any tips would be helpful at the moment

Kobol909 · April 7, 2022, 2:06am

Alright after I tried deleting package-lock.json and composer.lock, then ran composer install and yarn, yarn dev --log.level=vvvv and here is the output:

yarn run v1.22.17
$ bud dev --log.level=vvvv
[kobol] [logger] › ◉ config [Function: config]
[kobol] › bud Initialized timer…
[kobol] › ❯ process.env.NODE_ENV development
[kobol] › ❯ process.env.BABEL_ENV development
building bud Initialized timer…
[kobol] › … [1/5] bootstrap api
[kobol] › bound alias
[kobol] › bound assets
[kobol] › bound copy
[kobol] › bound config
[kobol] › bound webpackConfig
[kobol] › bound override
[kobol] › bound define
[kobol] › bound devtool
[kobol] › bound entry
[kobol] › bound js
[kobol] › bound css
[kobol] › bound experiments
[kobol] › bound externals
[kobol] › bound hash
[kobol] › bound version
[kobol] › bound minimize
[kobol] › bound persist
[kobol] › bound provide
[kobol] › bound proxy
[kobol] › bound run
[kobol] › bound runtime
[kobol] › bound serve
[kobol] › bound splitChunks
[kobol] › bound extract
[kobol] › bound template
[kobol] › bound use
[kobol] › bound watch
[kobol] › … [2/5] bootstrap hooks
[kobol] › … [3/5] bootstrap project
[kobol] › … [4/5] bootstrap env
[kobol] [env] › ❯ loading env
[kobol] [env] › no env values found
[kobol] › … [5/5] bootstrap dashboard
[kobol] › [1/5] bootstrap api
[kobol] › [2/5] bootstrap hooks
[kobol] › [4/5] bootstrap env
[kobol] › [5/5] bootstrap dashboard
[kobol] › [3/5] bootstrap project
[kobol] › … [1/3] register project
[kobol] [env] › ❯ getting publicEnv {}
[kobol] › … [2/3] register build
[kobol] › … [3/3] register dependencies
[kobol] › [3/3] register dependencies
[kobol] › [2/3] register build
[kobol] [project] › building profile Initialized timer…
[kobol] [project] › … reading project configuration files
[kobol] [project] › ● located user config bud.config.js
project config results
{“dynamic”: {“conditional”: , “global”: [“/usr/local/var/www/html/kobol.test/site/web/app/themes/kobol/bud.config.js”]}, “json”: {“conditional”: , “global”: }}[kobol] [project] › building profile Timer run for: 103ms
[kobol] › [1/3] register project
[kobol] › … [1/2] registered api
[kobol] › … [2/2] registered build
[kobol] › [2/2] registered build
[kobol] › [1/2] registered api
[kobol] › … [1/4] boot project
[kobol] › … [2/4] boot cache
[kobol] › … [3/4] boot server
[kobol] › … [4/4] boot extensions
[kobol] [extensions] › webpack-provide-plugin instantiated
[kobol] [extensions] › clean-webpack-plugin instantiated
[kobol] [extensions] › copy-webpack-plugin instantiated
[kobol] [extensions] › webpack-define-plugin instantiated
[kobol] [extensions] › webpack-hot-module-replacement-plugin instantiated
[kobol] [extensions] › webpack-manifest-plugin instantiated
[kobol] [extensions] › mini-css-extract-plugin instantiated
[kobol] › [1/4] boot project
[kobol] › [3/4] boot server
[kobol] [extensions] › registering Initialized timer…
[kobol] › ❯ registering webpack-provide-plugin
[kobol] › ❯ registering clean-webpack-plugin
[kobol] › ❯ registering copy-webpack-plugin
[kobol] › ❯ registering webpack-define-plugin
[kobol] › ❯ registering webpack-hot-module-replacement-plugin
[kobol] › ❯ registering webpack-manifest-plugin
[kobol] › ❯ registering mini-css-extract-plugin
[kobol] [extensions] › registering Timer run for: 5ms
[kobol] [extensions] › booting Initialized timer…
[kobol] › ❯ booting webpack-provide-plugin
[kobol] › ❯ booting clean-webpack-plugin
[kobol] › ❯ booting copy-webpack-plugin
[kobol] › ❯ booting webpack-define-plugin
[kobol] › ❯ booting webpack-hot-module-replacement-plugin
[kobol] › ❯ booting webpack-manifest-plugin
[kobol] › ❯ booting mini-css-extract-plugin
[kobol] [extensions] › booting Timer run for: 4ms
[kobol] [extensions] › ❯ importing @roots/bud-eslint
[kobol] [extensions] › ❯ importing @roots/bud-postcss
[kobol] [extensions] › ❯ importing @roots/bud-prettier
[kobol] [extensions] › ❯ importing @roots/bud-stylelint
[kobol] [extensions] › ❯ importing @roots/bud-tailwindcss
[kobol] [extensions] › ❯ importing @roots/sage
[kobol] [extensions] › ❯ importing @roots/bud-preset-wordpress
[kobol] [extensions] › ❯ importing @roots/bud-babel
[kobol] [extensions] › ❯ importing @roots/bud-wordpress-externals
[kobol] [extensions] › ❯ importing @roots/bud-preset-recommend
[kobol] [extensions] › ❯ importing @roots/bud-entrypoints
[kobol] [extensions] › ❯ importing @roots/bud-wordpress-dependencies
[kobol] [extensions] › ❯ importing @roots/bud-react
[kobol] [extensions] › ❯ importing @roots/bud-wordpress-manifests
[kobol] › ❯ registering @roots/bud-eslint
[kobol] [@roots/bud-eslint] › success registered bud.eslint @roots/bud-eslint
[kobol] › ❯ registering @roots/bud-postcss
[kobol] [@roots/bud-postcss] › success registered bud.postcss @roots/bud-postcss
[kobol] › ❯ Controller {
meta: {
instance: ‘bud’,
bound: true,
mixed: true,
registered: true,
booted: false
},
_module: {
name: ‘@roots/bud-postcss’,
options: undefined,
mixin: [AsyncFunction: mixin],
register: [AsyncFunction: register]
},
app: [Function (anonymous)],
log: [Function: bound log]
}
[kobol] › Error: TypeError: app.build.setLoader is not a function
at Extensions.registerExtension ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:134:19)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:99:17
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
Error: Error thrown. Reference message contents above.
[kobol] [cache] › cache hash generated 9icfaahtq8wstvt38qahiibdits
[kobol] [cache] › ❯ --cache.type flag filesystem
[kobol] [api] › ❯ executing persist [“filesystem”]
[kobol] [api] › cache enabled filesystem
[kobol] › [2/4] boot cache
[kobol] [bud] [node] [terminate] › exit
Done in 2.48s.

Seem it had something to do with a composer update,

“@roots/bud-eslint”: “^5.7.7”,
“@roots/bud-prettier”: “^5.7.7”,
“@roots/bud-stylelint”: “^5.7.7”,

Reverting back to earlier versions,

“@roots/bud-eslint”: “5.3.2”,
“@roots/bud-prettier”: “5.3.2”,
“@roots/bud-stylelint”: “5.3.2”,

Now “yarn dev” is working again!

kellymears · April 7, 2022, 9:18am

--log.level hasn’t been available since we switched off oclif in 5.4.0. Similarly:

[kobol] [cache] › ❯ --cache.type flag filesystem

^ this log item is not present in the past few releases.

I think if you were to run yarn why @roots/bud / yarn why @roots/sage you’d see some sort of version mismatch. I’m guessing based on the out of the date CLI logs that @roots/bud is not at 5.7.7.

When you want to try again remove the ^ from your version strings and make sure everything in the @roots/ namespace is at 5.7.7.