Create Inc Posts - Reactiflux

Create Inc

•Created by Create Inc on 1/5/2024 in #react-forum

Next JS Module With wasm File and Module Not Found Error

I'm trying to run code from an npm library called opencascade. I installed it using npm install opencascade.js@beta When trying to run it I get a weird error

./node_modules/opencascade.js/dist/opencascade.full.wasm
Module not found: Can't resolve 'a'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/opencascade.js/dist/index.js
./components/configurator.tsx
./components/hybrid-viewer.tsx
./pages/index.tsx

./node_modules/opencascade.js/dist/opencascade.full.wasm
Module not found: Can't resolve 'a'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/opencascade.js/dist/index.js
./components/configurator.tsx
./components/hybrid-viewer.tsx
./pages/index.tsx

This seems to have something to do with a .wasm file in the node-modules. I haven't before used a .wasm file. The same module loads and works alright in a normal react application which is not a next js application

2 replies

RReactiflux

•Created by Create Inc on 8/22/2023 in #react-forum

Make A Div Resizable So That Extends Only Till a Draggable Div in React

1 replies

RReactiflux

•Created by Create Inc on 8/20/2023 in #react-forum

React Three Fiber Canvas Does Not Shrink

I have had this problem across multiple projects with react-three-fiber below is the structure of my project

 <div className='p-4 flex flex-col h-screen bg-primaryBackground-dark'>
      <div className='flex flex-1 items-center'>
        <div className='bg-secondaryBackground-dark h-full basis-2/3 shrink-[2] rounded-lg shadow-inner '>
          <Canvas>
            <gridHelper />
            <axesHelper position={[0, 0.01, 0]} />
            <CameraControls />
          </Canvas>
        </div>

        <div className='bg-secondaryBackground-dark h-full basis-1/3 shrink-1 rounded-lg shadow-inner '></div>
      </div>
    </div>

 <div className='p-4 flex flex-col h-screen bg-primaryBackground-dark'>
      <div className='flex flex-1 items-center'>
        <div className='bg-secondaryBackground-dark h-full basis-2/3 shrink-[2] rounded-lg shadow-inner '>
          <Canvas>
            <gridHelper />
            <axesHelper position={[0, 0.01, 0]} />
            <CameraControls />
          </Canvas>
        </div>

        <div className='bg-secondaryBackground-dark h-full basis-1/3 shrink-1 rounded-lg shadow-inner '></div>
      </div>
    </div>

I am using tailwindcss in the project, you can probably already see that. If you aren't familiar shrink-[2] is equivalent to flex-shrink:2 and shrink-1 is equivalent to flex-shrink:1. Here's the problem, if I don't put Canvas in the project, the page looks like it should. A div on the left takes 2/3rd of the screen and a div on the right takes the remaining 1/3rd. But when I put Canvas in the project as shown above the left div stretches to take all of the available space. It also becomes unresponsive: if I try to reduce the size of the window the size of the canvas does not decrease but if I try to increase the window size the size of the Canvas increases.

3 replies