[Error] Named export 'Motion' not found

HummingMind commented 2 years ago

1. Describe the bug

Hello, I am using Astro with SolidJS. I tried adding Motion One for Solid to the project and I am getting this error during build:

Named export 'Motion' not found. The requested module '@motionone/solid' is a CommonJS module, which may not support all module.exports as named exports.

Any idea what I am doing wrong?

3. Steps to reproduce

Steps to reproduce the behavior:

1) Added "@motionone/solid": "^10.13.1" to the package.json dependencies. 2) Added import { Motion } from '@motionone/solid'; to the SolidJS tsx component file. 3) Tried doing a basic animation on a simple span element. 4) Got the error during build step.

4. Expected behavior

Expect it to have no errors during the build step.

5. Video or screenshots

davedbase commented 2 years ago

@HummingMind thanks for reporting this! I use @motionone/solid with Astro and with my Solid Start projects. It works as expected however I've had to work around a well-known Vite issue with external packages and CJS modules. Try adding this to your Astro config:

export default defineConfig({
  integrations: [solid()],
  vite: {
    ssr: {
      noExternal: ['@motionone/solid']
    }
  }
});

It may or may not make a difference, but your error does seem super familiar and relatable.

HummingMind commented 2 years ago

@HummingMind thanks for reporting this! I use @motionone/solid with Astro and with my Solid Start projects. It works as expected however I've had to work around a well-known Vite issue with external packages and CJS modules. Try adding this to your Astro config:
export default defineConfig({
  integrations: [solid()],
  vite: {
    ssr: {
      noExternal: ['@motionone/solid']
    }
  }
});
It may or may not make a difference, but your error does seem super familiar and relatable.

That did the trick! Thank you!

motiondivision / motionone

[Error] Named export 'Motion' not found #115