kripod/otion

CRA not render otion style after build

etc-tiago opened this issue · 3 comments

etc-tiago commented

Description

After creating the create-react-app build, the styles created in otion "appear" on the page but the dom #__otion element is empty. CRA does not support .mjs so I cannot use the react-otion package

Reproduction

I created a repository to reproduce what is happening.
You need:

  • Clone the repository
  • Install the dependencies
  • Run yarn build && serve -s build
  • Open the url http: // localhost: 5000 in the browser

Expected behavior

The element __otion filled with css styles as in development mode, because if you use a router to have other pages or parts of pages, the styles of the next pages are not loaded.

Actual behavior

The element dom __otion empty

Environment

  • OS: macOS 10.15.4

  • Node: 12.16.3

  • Yarn: 1.22.4

  • npm: 6.14.4

  • otion: ^0.3.2 => 0.3.2

kripod commented

Thank you so much for submitting this and sorry for making you wait for such a long time. I'll inspect this behavior throughout the weekend and see whether changing the file extension from .mjs to .js could resolve the situation.

By the way, react-otion is only required for server-side rendering, as recently clarified by #22. As for the styled missing from the DOM, it's quite possible that you're using the performant CSSOMInjector instead of the debugger-friently DOMInjector (as vaguely shown deep down in the docs). It's my bad that the different injection strategies are not highlighted. I'll make sure to update the documentation about them!

cusxio commented

I would also like to report a similar issue on Gatsby regarding the .mjs extension.

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Can't import the named export 'createElement' from non EcmaScript module (only default export is available)

File: node_modules/react-otion/server/index.mjs

Interestingly I tried running example-gatsby, and it works only in the monorepo. By creating a new project with just example-gatsby alone will also throw the same error as above.

kripod commented

#29 will possibly resolve this issue, special thanks to @etc-tiago! I'm closing this for now. Expect a new bug fix release soon.