locatorjs
locatorjs copied to clipboard
bug: Solid Start route files throw `Could not find element info.` for components
Where the bug happens
- [ ] Browser Extension
- [X] Library
- [ ] Other
your browser
Chrome
Describe the bug
Components in the routes folder are properly tagged with data-locatorjs-id
but are not stored correctly on window.__LOCATOR_DATA__
. This means when you attempt to click on them you just get the error Could not find element info.
. I did some digging and noticed that the route files seem to be registering themself twice, once semi-correctly, then once completely incorrectly, which overrides the semi-correct one. Not sure why this is.
import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/routes/test.tsx");import { shouldWarnAndDecline as _shouldWarnAndDecline } from "/@solid-refresh";
import { template as _$template } from "/node_modules/.vite/deps/solid-js_web.js?v=389b2f38";
import { getNextElement as _$getNextElement } from "/node_modules/.vite/deps/solid-js_web.js?v=389b2f38";
const _tmpl$ = /*#__PURE__*/_$template(`<div data-locatorjs-id="/Users/jacobzwang/Projects/redacted/src/routes/test.tsx::0">test</div>`, 2);
const test = props => {
return _$getNextElement(_tmpl$);
};
export default test;
(() => {
if (typeof window !== "undefined") {
window.__LOCATOR_DATA__ = window.__LOCATOR_DATA__ || {};
window.__LOCATOR_DATA__["/Users/jacobzwang/Projects/redacted/src/routes/test.tsx"] = {
"filePath": "/src/routes/test.tsx",
"projectPath": "/Users/jacobzwang/Projects/redacted",
"expressions": [{
"name": "div",
"loc": {
"start": {
"line": 4,
"column": 11,
"index": 91
},
"end": {
"line": 4,
"column": 26,
"index": 106
}
},
"wrappingComponentId": 0
}],
"styledDefinitions": [],
"components": []
};
}
})();
if (_shouldWarnAndDecline()) if (import.meta.hot) import.meta.hot.decline();
(() => {
if (typeof window !== "undefined") {
window.__LOCATOR_DATA__ = window.__LOCATOR_DATA__ || {};
window.__LOCATOR_DATA__["/Users/jacobzwang/Projects/redacted/src/routes/test.tsx"] = {
"filePath": "/src/routes/test.tsx",
"projectPath": "/Users/jacobzwang/Projects/redacted",
"expressions": [],
"styledDefinitions": [],
"components": []
};
}
})();
To reproduce
Create a solid start project and add the Vite extension. Using the chrome extension, try clicking on a component and see that it doesn't work.
✔ Which template do you want to use? › bare
✔ Server Side Rendering? … yes
✔ Use TypeScript? … yes
import solid from "solid-start/vite";
import { defineConfig } from "vite";
export default defineConfig({
plugins: [
solid({
babel: {
plugins: [
[
"@locator/babel-jsx/dist",
{
env: "development",
},
],
],
},
}),
],
});
Additional information
No response
Noticed this related PR Fix LOCATOR_DATA being overriden #90
Note, I just tried creating a bare project without typescript and still had the same issue.