dnd-multi-backend
dnd-multi-backend copied to clipboard
Published
20 hours ago •
LouisBrunner
LouisBrunner
Building from a ci env results in "Invariant Violation: Expected drag drop context"
When building my react app using bitbuckets ci pipeline i end up with this error.
Invariant Violation: Expected drag drop context
But when building from my local environment it totaly fine.
I cant understand why...
Im using this example as my setup but with custom components.
import { DndProvider } from 'react-dnd-multi-backend'
import { HTML5toTouch } from 'rdndmb-html5-to-touch' // or any other pipeline
const App = () => {
return (
<DndProvider options={HTML5toTouch}>
<Example />
</DndProvider>
)
}
packages installed:
"react-dnd": "^16.0.1",
"react-dnd-multi-backend": "7.0.0-alpha.4",
"rdndmb-html5-to-touch": "^7.0.0-alpha.1",
local node version: v16.15.0 local npm verion: 8.5.5
local output of npm build:
npm run build
> [email protected] build
> react-scripts build
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled successfully.
File sizes after gzip:
499.93 KB build/static/js/2.302b3f5b.chunk.js
80.08 KB build/static/js/main.ada80260.chunk.js
29.22 KB build/static/css/main.84f56624.chunk.css
1.63 KB build/static/js/3.470d0868.chunk.js
1.17 KB build/static/js/runtime-main.f16602e1.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
bitbucket.yml
image: atlassian/default-image:3
pipelines:
branches:
main:
- step:
image: node:16.15.0
name: 'Build FE'
caches:
- node
script:
- echo "Building FE"
- CI=false npm run build
artifacts:
- public/**
ci build output
+ CI=false npm run build
> build
> node [./scripts/build-frontend-to-laravel.js](https://bitbucket.org/nerds-of-sweden/dacke-online/src/6114ff62c76324748cba8b97f126c1b4b2a65b24/scripts/build-frontend-to-laravel.js)
added 2095 packages, and audited 2313 packages in 55s
186 packages are looking for funding
run `npm fund` for details
40 vulnerabilities (1 low, 16 moderate, 19 high, 4 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Creating an optimized production build...
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
Compiled successfully.
File sizes after gzip:
500.48 KB build/static/js/2.0ff8ed30.chunk.js
80.14 KB build/static/js/main.fdf29b15.chunk.js
29.$DEPLOYMENT_SSH_PORT KB build/static/css/main.84f56624.chunk.css
1.63 KB build/static/js/3.3db0c2ed.chunk.js
1.17 KB build/static/js/runtime-main.7c9a903c.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
I have removed node_modules and lock files.
rerun:
npm i
then
yarn start
and now Im getting the same error localy.
Uncaught Invariant Violation: Expected drag drop context
at invariant (http://localhost:3000/static/js/vendors~main.chunk.js:21524:15)
at useDragDropManager (http://localhost:3000/static/js/vendors~main.chunk.js:105028:73)
at useDropTargetMonitor (http://localhost:3000/static/js/vendors~main.chunk.js:105294:100)
at useDrop (http://localhost:3000/static/js/vendors~main.chunk.js:105211:104)
at DnDImageSlot (http://localhost:3000/static/js/main.chunk.js:33028:71)
at renderWithHooks (http://localhost:3000/static/js/vendors~main.chunk.js:121204:22)
at mountIndeterminateComponent (http://localhost:3000/static/js/vendors~main.chunk.js:123966:17)
at beginWork (http://localhost:3000/static/js/vendors~main.chunk.js:125165:20)
at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/vendors~main.chunk.js:110154:18)
at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/vendors~main.chunk.js:110203:20)
at invokeGuardedCallback (http://localhost:3000/static/js/vendors~main.chunk.js:110263:35)
at beginWork$1 (http://localhost:3000/static/js/vendors~main.chunk.js:130005:11)
at performUnitOfWork (http://localhost:3000/static/js/vendors~main.chunk.js:128841:16)
at workLoopSync (http://localhost:3000/static/js/vendors~main.chunk.js:128778:9)
at renderRootSync (http://localhost:3000/static/js/vendors~main.chunk.js:128744:11)
at performSyncWorkOnRoot (http://localhost:3000/static/js/vendors~main.chunk.js:128361:22)
at http://localhost:3000/static/js/vendors~main.chunk.js:117614:30
at unstable_runWithPriority (http://localhost:3000/static/js/vendors~main.chunk.js:199435:16)
at runWithPriority$1 (http://localhost:3000/static/js/vendors~main.chunk.js:117560:14)
at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/vendors~main.chunk.js:117609:13)
at flushSyncCallbackQueue (http://localhost:3000/static/js/vendors~main.chunk.js:117597:7)
at scheduleUpdateOnFiber (http://localhost:3000/static/js/vendors~main.chunk.js:127961:13)
at dispatchAction (http://localhost:3000/static/js/vendors~main.chunk.js:122330:9)
at _callee2$ (http://localhost:3000/static/js/vendors~main.chunk.js:26008:15)
at tryCatch (http://localhost:3000/static/js/vendors~main.chunk.js:196817:17)
at Generator.invoke [as _invoke] (http://localhost:3000/static/js/vendors~main.chunk.js:197031:22)
at Generator.next (http://localhost:3000/static/js/vendors~main.chunk.js:196869:21)
at asyncGeneratorStep (http://localhost:3000/static/js/vendors~main.chunk.js:26136:24)
at _next (http://localhost:3000/static/js/vendors~main.chunk.js:26158:9)
It works great when installing with yarn but not when install installing with npm.
uppgrading to
"react-dnd-multi-backend": "7.0.0-alpha.4",
this is just an error caused by wrongly installed ts versions and has nothing to do with this package.
~~seems to solve that issue but now is causing a lot of weird erros on my project...~~
~~From my terminal~~
Failed to compile.
/home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Accordion/AccordionHeader.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Accordion/AccordionHeader.tsx(34,29):
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'. TS2322
32 | <Stack className="ms-auto" direction="horizontal" gap={3}>
33 | <Stack direction="horizontal" gap={2}>
> 34 | {!openKeys.includes(eventKey) && children}
| ^
35 | </Stack>
36 | <AccordionCarrot
37 | eventKey={eventKey}
~~Browser console log~~
Uncaught ReferenceError: process is not defined
at Object.4043 (<anonymous>:2:13168)
at r (<anonymous>:2:306599)
at Object.8048 (<anonymous>:2:9496)
at r (<anonymous>:2:306599)
at Object.8641 (<anonymous>:2:1379)
at r (<anonymous>:2:306599)
at <anonymous>:2:315627
at <anonymous>:2:324225
at <anonymous>:2:324229
at HTMLIFrameElement.e.onload (index.js:1)
4043 @ VM317:2
r @ VM317:2
8048 @ VM317:2
r @ VM317:2
8641 @ VM317:2
r @ VM317:2
(anonymous) @ VM317:2
(anonymous) @ VM317:2
(anonymous) @ VM317:2
e.onload @ index.js:1
be @ index.js:1
de @ index.js:1
handleErrors @ webpackHotDevClient.js:169
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
load (async)
be @ index.js:1
de @ index.js:1
handleErrors @ webpackHotDevClient.js:169
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Accordion/AccordionHeader.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Accordion/AccordionHeader.tsx(34,29):
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'. TS2322
32 | <Stack className="ms-auto" direction="horizontal" gap={3}>
33 | <Stack direction="horizontal" gap={2}>
> 34 | {!openKeys.includes(eventKey) && children}
| ^
35 | </Stack>
36 | <AccordionCarrot
37 | eventKey={eventKey}
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/AdminNav.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/AdminNav.tsx(77,17):
Type 'ReactNode' is not assignable to type '((boolean | ReactChild | ReactFragment | ReactPortal) & (string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal)) | null | undefined'.
Type '{}' is not assignable to type '((boolean | ReactChild | ReactFragment | ReactPortal) & (string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal)) | null | undefined'. TS2322
75 | className="admin-nav-link py-3 py-md-4 px-1 text-light d-flex flex-grow-1 justify-content-center"
76 | >
> 77 | {children}
| ^
78 | </Nav.Link>
79 | </Nav.Item>
80 | );
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/ErrorBoundary.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/ErrorBoundary.tsx(36,10):
'ErrorBoundaryClassComponent' cannot be used as a JSX component.
Its instance type 'ErrorBoundaryClassComponent' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'. TS2786
34 | };
35 | return (
> 36 | <ErrorBoundaryClassComponent fallback={fallbackComponent}>
| ^
37 | {children}
38 | </ErrorBoundaryClassComponent>
39 | );
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/IndeterminateCheckbox.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/IndeterminateCheckbox.tsx(44,14):
Type '{ name: string; children?: ReactNode; type: "checkbox"; ref: MutableRefObject<any>; }' is not assignable to type 'FormCheckProps'.
Types of property 'children' are incompatible.
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'. TS2322
42 | return (
43 | <React.Fragment>
> 44 | <Form.Check type="checkbox" ref={combinedRef} {...rest} />
| ^
45 | </React.Fragment>
46 | );
47 | });
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Layout/AdminSideNavLayout.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Layout/AdminSideNavLayout.tsx(69,52):
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'. TS2322
67 | <AdminNav show={true} links={filterdAdminLinks} />
68 | </Col>
> 69 | <Col id="page-content-wrapper">{children}</Col>
| ^
70 | </Row>
71 | </Container>
72 | </>
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Layout/Layout.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Layout/Layout.tsx(17,52):
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'. TS2322
15 | <Container fluid>
16 | <Row className="g-1">
> 17 | <Col id="page-content-wrapper">{children}</Col>
| ^
18 | </Row>
19 | </Container>
20 | </>
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/SimpleNavBar.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/SimpleNavBar.tsx(9,10):
This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided. TS2746
7 |
8 | return (
> 9 | <Navbar
| ^
10 | fixed="top"
11 | style={{ backgroundColor: colorTheme }}
12 | expand="lg"
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Table.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Table.tsx(36,9):
Type '{ id: "selection"; Header: ({ getToggleAllRowsSelectedProps }: HeaderProps<T>) => Element; Cell: ({ row }: Cell<T, any>) => Element; }' is not assignable to type 'Column<T>'.
Types of property 'Cell' are incompatible.
Type '({ row }: Cell<T>) => JSX.Element' is not assignable to type 'string | number | ReactFragment | ReactElement<any, string | JSXElementConstructor<any>> | ComponentClass<CellProps<T, any>, any> | FunctionComponent<...> | ComponentClass<...> | FunctionComponent<...> | undefined'.
Type '({ row }: Cell<T>) => JSX.Element' is not assignable to type 'FunctionComponent<CellProps<T, any>>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'TableInstance<T> & { column: ColumnInstance<T>; row: Row<T>; cell: Cell<T, any>; value: any; }' is missing the following properties from type 'Cell<T, any>': getCellProps, render, isGrouped, isPlaceholder, and 2 more. TS2322
34 | hooks.allColumns.push((columns) => [
35 | // Let's make a column for selection
> 36 | {
| ^
37 | id: "selection",
38 |
39 | // The header can use the table's getToggleAllRowsSelectedProps method
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Table.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Table.tsx(142,17):
Type '{ id: "action"; Cell: ({ row, state: { selectedRowIds }, ...rest }: Cell<T>) => JSX.Element; }' is not assignable to type 'Column<T>'.
Types of property 'Cell' are incompatible.
Type '({ row, state: { selectedRowIds }, ...rest }: Cell<T>) => JSX.Element' is not assignable to type 'string | number | ReactFragment | ReactElement<any, string | JSXElementConstructor<any>> | ComponentClass<CellProps<T, any>, any> | FunctionComponent<...> | ComponentClass<...> | FunctionComponent<...> | undefined'.
Type '({ row, state: { selectedRowIds }, ...rest }: Cell<T>) => JSX.Element' is not assignable to type 'FunctionComponent<CellProps<T, any>>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'TableInstance<T> & { column: ColumnInstance<T>; row: Row<T>; cell: Cell<T, any>; value: any; }' is missing the following properties from type 'Cell<T, any>': getCellProps, render, isGrouped, isPlaceholder, and 2 more. TS2322
140 | (hooks: Hooks<T>) => {
141 | hooks.visibleColumns.push((columns) => [
> 142 | ...columns,
| ^
143 |
144 | {
145 | id: "action",
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Table.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/components/Table.tsx(144,17):
Type '{ id: "action"; Cell: ({ row, state: { selectedRowIds }, ...rest }: Cell<T>) => JSX.Element; }' is not assignable to type 'Column<T>'.
Types of property 'Cell' are incompatible.
Type '({ row, state: { selectedRowIds }, ...rest }: Cell<T>) => JSX.Element' is not assignable to type 'string | number | ReactFragment | ReactElement<any, string | JSXElementConstructor<any>> | ComponentClass<CellProps<T, any>, any> | FunctionComponent<...> | ComponentClass<...> | FunctionComponent<...> | undefined'. TS2322
142 | ...columns,
143 |
> 144 | {
| ^
145 | id: "action",
146 | Cell: ({
147 | row,
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/pages/Auth/components/WelcomeJumbotron.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/pages/Auth/components/WelcomeJumbotron.tsx(13,34):
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'. TS2322
11 | }}
12 | >
> 13 | <Col className="p-5">{children}</Col>
| ^
14 |
15 | <Col md={7} className="bg-primary text-light p-5">
16 | <Row>
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
index.js:1 /home/yoieh/bitbucket/.../resources/dacke-react-app/src/pages/Products/components/CategorieToggler.tsx
TypeScript error in /home/yoieh/bitbucket/.../resources/dacke-react-app/src/pages/Products/components/CategorieToggler.tsx(13,43):
Argument of type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").Context<import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/esm/AccordionContext").AccordionContextValue>' is not assignable to parameter of type 'React.Context<import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/esm/AccordionContext").AccordionContextValue>'.
Types of property 'Provider' are incompatible.
Type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").Provider<import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/esm/AccordionContext").AccordionContextValue>' is not assignable to type 'React.Provider<import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/esm/AccordionContext").AccordionContextValue>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'React.ProviderProps<import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/esm/AccordionContext").AccordionContextValue>' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ProviderProps<import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/esm/AccordionContext").AccordionContextVa...'.
Types of property 'children' are incompatible.
Type 'React.ReactNode' is not assignable to type 'import("/home/yoieh/bitbucket/.../resources/dacke-react-app/node_modules/react-bootstrap/node_modules/@types/react/index").ReactNode'. TS2345
11 | eventKey,
12 | }) => {
> 13 | const { activeEventKey } = useContext(AccordionContext);
| ^
14 |
15 | const decoratedOnClick = useAccordionButton(
16 | eventKey,
console.<computed> @ index.js:1
handleErrors @ webpackHotDevClient.js:174
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:213
Hi @yoieh,
I don't think the issues you have after upgrading to 7.0.0-alpha.4 are related to dnd-multi-backend.
Could you provide a minimal reproducible example so I can help you?
That was my problem i could not reproduce it. Its some how resolved it's self. This can be closed i guess.