New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1.6.1 SSR import css in component #9758

Open
Blurri opened this Issue Mar 21, 2018 · 5 comments

Comments

Projects
None yet
5 participants
@Blurri
Copy link

Blurri commented Mar 21, 2018

we try to to setup a meteor 1.6.1 app with server side rendering, now we get a unexpected token error when we try to load a css file from a node module in a component like this.

import ‘slick-carousel/slick/slick.css'

error:

xxx/webapp/node_modules/slick-carousel/slick/slick-theme.css:1
(function (exports, require, module, __filename, __dirname) { @charset 'UTF-8';
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at npmRequire (xxx/webapp/.meteor/local/build/programs/server/npm-require.js:133:10)
    at Module.useNode (packages/modules-runtime.js:697:18)
    at fileEvaluate (packages/modules-runtime.js:342:20)
    at require (packages/modules-runtime.js:238:16)
    at Swiper.js (imports/ui/core/components/Swiper.js:1:14)
    at fileEvaluate (packages/modules-runtime.js:343:9)
    at require (packages/modules-runtime.js:238:16)
    at ImageList.js (imports/ui/analyze/components/ImageList.js:1:265)
    at fileEvaluate (packages/modules-runtime.js:343:9)
    at require (packages/modules-runtime.js:238:16)
    at ImageList.js (imports/ui/analyze/containers/ImageList.js:1:348)
    at fileEvaluate (packages/modules-runtime.js:343:9)
    at require (packages/modules-runtime.js:238:16)
Exited with code: 1
Your application is crashing. Waiting for file change.

is it not possible to do this with ssr? do I need to copy the css files into the project ?

@hwillson

This comment has been minimized.

Copy link
Member

hwillson commented Mar 27, 2018

@Blurri Any chance you could provide a small runnable reproduction that shows this happening?

@Blurri

This comment has been minimized.

Copy link

Blurri commented Apr 9, 2018

The pull request on this repo shows what we tried to do.
https://github.com/Blurri/meteor-ssr-css-import/pulls

@Minivera

This comment has been minimized.

Copy link

Minivera commented Apr 13, 2018

I can also reproduce the issue on any application I work on that uses React ssr and Meteor. It happens whether I import less code, sass code or raw css.

The only fix I found is to wrap the css import in Meteor.isClient, for example;

if (Meteor.isClient)
{
	import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
}

But this make all styles in the application flicker on first load as they aren't applied when rendering on the server.

I can try to build a demo of what is happening if needed, this is a very annoying issue.

@faburem

This comment has been minimized.

Copy link

faburem commented Apr 14, 2018

This is in fact quite easy to reproduce and will affect anybody trying to use SSR with a CSS framework.
Here is how I reproduced it using bulma as an example:

  1. meteor create ssr-example
  2. meteor npm i bulma
  3. meteor add server-render
  4. in server/main.js add the following:
    import { onPageLoad } from 'meteor/server-render'
    onPageLoad((sink) => {
    import('bulma/css/bulma.css').then((bulma) => {
    sink.appendToHead(`<style>${bulma.default}</style>`);
    sink.appendToBody('<button class="button is-primary">Bulma button</button>')
    })
    })
  5. open localhost:3000 in your browser

=> error thrown in the server console
UnhandledPromiseRejectionWarning: ~/ssr-example/node_modules/bulma/css/bulma.css:2
@-webkit-keyframes spinAround {

I think most devs would assume this to work in an SSR scenario.

@antoninadert

This comment has been minimized.

Copy link

antoninadert commented Oct 18, 2018

Hello there,

Any update on this? Will we be able to import CSS files and interpret them server-side before serving them to the client using server-render package ?

Right now I need to put my CSS into the both folder so that it will load both on client and server, but there is no way to attach the CSS to a specific React component by doing so

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment