error TS2748: Cannot access ambient const enums when the '--isolatedModules' flag is provided.

[IgorThierry]

Contact Details

igorthierry15@gmail.com

What do you need?

error when deploying when '--isolatedModules' flag is provided.

Version

1.39.3

Which library are you using?

React.js (react-tsparticles, react-particles-js)

Code of Conduct

• I agree to follow this project's Code of Conduct

[xscode-auto-reply]

Thanks for opening a new issue. The team has been notified and will review it as soon as possible.

For urgent issues and priority support, visit https://xscode.com/matteobruni/tsparticles

[matteobruni]

The enums are declared as constants since they are stripped from the javascript output, they have a great impact on the output file size.
If you need isolatedModules, use the strings instead of the Enums, you should get compile errors if using something unexpected.

[IgorThierry]

The error occurred when deploying to Vercel.

My code is this simple component

import Particles from 'react-tsparticles';

export function ParticlesBackground() {
  return (
    <Particles
      id="tsparticles"
      options={{
        fpsLimit: 60,
        interactivity: {
          events: {
            onClick: {
              enable: true,
              mode: 'push',
            },
            onHover: {
              enable: true,
              mode: 'repulse',
            },
            resize: true,
          },
          modes: {
            bubble: {
              distance: 400,
              duration: 2,
              opacity: 0.8,
              size: 40,
            },
            push: {
              quantity: 4,
            },
            repulse: {
              distance: 200,
              duration: 0.4,
            },
          },
        },
        particles: {
          color: {
            value: '#828282',
          },
          links: {
            color: '#828282',
            distance: 200,
            enable: true,
            opacity: 0.5,
            width: 1,
          },
          collisions: {
            enable: true,
          },
          move: {
            direction: 'none',
            enable: true,
            outMode: 'out',
            random: false,
            speed: 2,
            straight: false,
          },
          number: {
            density: {
              enable: false,
              area: 800,
            },
            value: 50,
          },
          opacity: {
            value: 1,
          },
          shape: {
            type: 'circle',
          },
          size: {
            random: true,
            value: 1,
          },
        },
        detectRetina: true,
      }}
    />
  );
}

thanks

[calvo-jp]

Hi, @IgorThierry. Have you found a temporary fix? I can't deploy my app atm due to this error.

[matteobruni]

Actually the only workaround is to disable the isolatedModules flag, even if I set preserveConstenums the error is still there (microsoft/TypeScript#37774).

I need to find another alternative to strip down enums from the Webpack build since they are only increasing the output size.

[matteobruni]

I was testing the create-react-app using the TypeScript template.

These are the steps made:

• create-react-app cra-test-isolated --template typescript
• yarn add react-tsparticles
• Added the <Particles /> component specified few messages above
• yarn build and yarn start

I didn't receive any error about isolatedModules, can you tell me how to replicate the issue? Are you still using the unsupported react-particles-js? If so, please update to react-tsparticles. @IgorThierry @calvo-jp

[calvo-jp]

Hi, @matteobruni. I am currently using vite. Here are my deps

"dependencies": {
    "clsx": "^1.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-tsparticles": "^1.40.1",
    "sass": "^1.49.7"
  },
  "devDependencies": {
    "@types/react": "^17.0.33",
    "@types/react-dom": "^17.0.10",
    "@vitejs/plugin-react": "^1.0.7",
    "typescript": "^4.4.4",
    "vite": "^2.7.2"
  }

Tried setting isolatedModules to false and the error disappeared. The problem now is that it no longer includes my assets (images and videos). I don't know. I'll just see if I can work something out. Thanks for the reply

[IgorThierry]

Hi, @matteobruni Sorry for missing this information, I'm using Vite, just like @calvo-jp .

changing flag to false solved the problem.