Hey,
I’m new to A12 and trying to setup a small POC using Vite + A12 Widgets
A pretty simple data table example keeps crashing on me with this error:
Error: Build failed with 1 error:
node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/table/new-api/table.row-segments.view.js:50:68: ERROR: Cannot assign to "RowSegments" because it is a constant
at failureErrorWithLog (D:\devenv\.repos\ap\appit-examples\appkit-react-a12-quickstart\appkit-react-a12-quickstart-frontend\node_modules\esbuild\lib\main.js:1649:15)
at D:\devenv\.repos\ap\appit-examples\appkit-react-a12-quickstart\appkit-react-a12-quickstart-frontend\node_modules\esbuild\lib\main.js:1058:25
at D:\devenv\.repos\ap\appit-examples\appkit-react-a12-quickstart\appkit-react-a12-quickstart-frontend\node_modules\esbuild\lib\main.js:1525:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
errors: [
{
detail: undefined,
id: '',
location: {
column: 68,
file: 'node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/table/new-api/table.row-segments.view.js',
length: 11,
line: 50,
lineText: '(function (_RowSegments2) {})(RowSegments || (exports.RowSegments = RowSegments = {}));',
namespace: '',
suggestion: ''
},
notes: [
{
location: {
column: 6,
file: 'node_modules/@com.mgmtp.a12.widgets/widgets-core/lib/table/new-api/table.row-segments.view.js',
length: 11,
line: 21,
lineText: 'const RowSegments = _ref => {',
namespace: '',
suggestion: ''
},
text: 'The symbol "RowSegments" was declared a constant here:'
}
],
pluginName: '',
text: 'Cannot assign to "RowSegments" because it is a constant'
}
],
warnings: []
}
Node.js v18.17.1
Typescript v 5.2.2
React 17.0.65
@com.mgmtp.a12.widgets/widgets-core 36.2.1
Any ideas what might be wrong?
Hi @lars-static-lake,
This might be related to the Typescript namespace not re-assignable to a declared React component that has the same name. However, this is just my 2 cents, because your log doesn’t provide enough context to start debugging. Can you share your Vite config file and also your component usage?
FYI, Vite is not officially used by A12 products, the compatibility should be there, but don’t expect them to just work out of the box. You should use Webpack and its ecosystem, which is a tried and used bundling tool by many other A12 applications.
Also, Widgets 36.2.1 is using Typescript 4.9.5, you might want to opt to that version.
thanks @tri-sheer-boulder
The vite.config.ts is quite basic
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
outDir: "build/frontend"
}
});
and tsconfig.json basically like it was generated by vite:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
I also dabbled with downgrading to ts-4.9.5 and using a12s tsconfig ("extends": "./node_modules/@com.mgmtp.a12.devtools/devtools/configs/tsconfig") but the error was exactly the same.
Interestingly the full npm build is ok, the error only occurs in the vite dev server.
I’ll try shifting from vite to create-react-app next, but since that is not maintained anymore we’d like to avoid that.
and package.json being
{
"name": "appkit-react-a12-quickstart",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"prebuild": "npm run generate:api",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"fmt": "npx prettier --write .",
"generate:api": "npm run generate:rtkQuery",
"generate:rtkQuery": "npx @rtk-query/codegen-openapi openapi-config.cjs"
},
"dependencies": {
"@com.mgmtp.a12.widgets/widgets-core": "^36.2.1",
"@reduxjs/toolkit": "^1.9.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^8.1.2",
"styled-components": "^5.3.10"
},
"devDependencies": {
"@rtk-query/codegen-openapi": "^1.0.0",
"@trivago/prettier-plugin-sort-imports": "4.2.0",
"@types/react": "^17.0.65",
"@types/react-dom": "^17.0.20",
"@types/styled-components": "^5.1.27",
"@typescript-eslint/eslint-plugin": "^6.0.0",
"@typescript-eslint/parser": "^6.0.0",
"@vitejs/plugin-react": "^4.0.3",
"eslint": "^8.45.0",
"eslint-config-prettier": "9.0.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.3",
"prettier": "3.0.3",
"typescript": "^5.2.2",
"vite": "^4.4.5"
}
}
Hi again,
The build command pass because it also run tsc beforehand then vite grab that js file only, that is why it doesn’t share the same issue.
A simple fix here would be running both tsc --watch and vite at the same time and making your index.html file to always point to the generated js file by tsc command.
However, I would still not recommend running vite as I found it might lead to some issues which are not “searchable” comparing to webpack. Also, even using webpack underlying, create-react-app is not a better option either IMO. Therefore, please consider using webpack.config.js file which you can easily find from A12 Project Template.
Hello,
I have a small A12 example using Vite and it more or less works. The only difference between mine and yours is that I use Widgets version “36.0.0”, I upgraded my Widgets to the version you mentioned and got the same error.
It’s probably worth mentioning again that Vite is not official supported in A12 products and I have run into a few issues. However, if you just want to mess around with Widgets without worrying about webpack configs, then it should work.
Let me know if the downgraded version fixes anything.
Cameron
Thanks @tri-sheer-boulder and @cameron-windy-oak
Indeed I am currently just playing around with the widget set, in order to evaluate viability for our uses.
Downgrade to “36.0.0” didn’t work for me as I get a different error in the browser console
setImmediate.js:13 Uncaught ReferenceError: global is not defined
at node_modules/fbjs/lib/setImmediate.js (setImmediate.js:13:18)
at __require2 (chunk-AUZ3RYOM.js?v=feb4175a:18:50)
at node_modules/draft-js/lib/editOnBeforeInput.js (editOnBeforeInput.js:27:20)
at __require2 (chunk-AUZ3RYOM.js?v=feb4175a:18:50)
at node_modules/draft-js/lib/DraftEditorEditHandler.js (DraftEditorEditHandler.js:15:21)
at __require2 (chunk-AUZ3RYOM.js?v=feb4175a:18:50)
at node_modules/draft-js/lib/DraftEditor.react.js (DraftEditor.react.js:36:30)
at __require2 (chunk-AUZ3RYOM.js?v=feb4175a:18:50)
at node_modules/draft-js/lib/Draft.js (Draft.js:28:19)
at __require2 (chunk-AUZ3RYOM.js?v=feb4175a:18:50)
In any case, I would expect A12 widgets play well with modern tooling stacks and to be on level with the overall ecosystem (looking at you React 18 support).
This “global is not defined” is another issue not only related to Widgets. I also needed to fix this one.
What you can do to fix this it is create a file called init.ts within your src directory. Within this file you will add:
window.global ||= window;
Then within the entry point of your application e.g. main.tsx import this right at the top of the file: import "./init".
See here for more details: typescript - Vite 'global is not defined' - Stack Overflow
Additionally needed this in vite.config.ts
define: {
global: {}
},
But then it worked indeed with 36.0.0 
baby steps
I would be nice if this could be fixed, though