SyntaxError Unexpected token .

[agontuk]

SyntaxError Unexpected token .

[ataylor32]

I forked that official Vue demo app,
vue-hackernews-2.0, created a branch called vue-cropperjs-issue-39, and made one commit.

Here are the steps you can go through to reproduce the problem on your own computer:

1. Clone https://github.com/ataylor32/vue-hackernews-2.0.git

2. Check out the vue-cropperjs-issue-39 branch

3. Run npm ci

4. Start the site in development mode by running npm run dev

5. Go to http://localhost:8080/top in your browser and click on one of the comments links. You will be navigated to a comments page and if you look below the header, you'll see a file input. Browse for a GIF, JPG, or PNG and you'll see that vue-cropperjs is working fine. Now refresh the page (i.e. try to get server-side rendering to render the page) and it will break. Stop the site with Ctrl+C.

6. Start the site in production mode by running npm run build && npm start and then repeat the previous step and you'll see that it behaves the same in production mode

Thank you!

[ataylor32]

I'm running into this too. @Agontuk Would you be willing to reopen this issue? I would really like to get this working. This is what I'm getting:

/var/www/example.com/node_modules/cropperjs/dist/cropper.css:11
.cropper-container {
^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/var/www/example.com/node_modules/vue-cropperjs/dist/VueCropper.js:15:1)
error during render : /profile/
/var/www/example.com/node_modules/cropperjs/dist/cropper.css:11
.cropper-container {
^

SyntaxError: Unexpected token .
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/var/www/example.com/node_modules/vue-cropperjs/dist/VueCropper.js:15:1)

[Agontuk]

@ataylor32 , sorry for the late response. New version 4.0.0 is published and should work on SSR now. Note that default css import is removed now so you have to import it in your file where you're using it. Readme has been updated.

[wfe8006]

I end up using another library.

[kapvik]

I end up using another library.

Have same issue, what library you use now?

[wfe8006]

I end up using another library.

Have same issue, what library you use now?

I use https://github.com/zhanziyang/vue-croppa, it's fairly easy to configure. Check it out.

[kapvik]

I end up using another library.

Have same issue, what library you use now?

I use https://github.com/zhanziyang/vue-croppa, it's fairly easy to configure. Check it out.

Thanks

[koibi2]

我刚刚解决了！（环境是： electron-vue。）
在 node_modules/vue-cropperjs/dist/VueCropper.js 注释这一行：

然后在 VUE 页面的 style 引入即可。

<style lang="scss">
@import "cropper.css";

p.s:估计这是JS引用CSS报错导致的。肯定有更好的解决方法，如webpack配置。
有好的方法。欢迎下面留言。

[Agontuk]

@ataylor32 , seems like your setup is not recognizing the css syntax. Can you check if you can enable css loader so that it can parse css ?

[ataylor32]

@Agontuk I'm using this:

{
  test: /\.css$/,
  loader: ['vue-style-loader', 'css-loader'],
},

This is only an issue with server-side rendering. My project is based on an official Vue demo app,
vue-hackernews-2.0.

[Agontuk]

Can you give me a example repo so that I can reproduce the issue on my end ? I have yet to try out the server side rendering in vue so don't know the exact issue.

[Agontuk]

Thanks for the detailed steps, I'm checking out the vue ssr guide to get familiar with it. Then I'll check on the issue.

[ataylor32]

No problem. Thanks for fixing it! It works for me now.