2

I'm using Vue.js and Gridsome to create a portfolio for myself. However, when I added a JSON file to contain my profile info in the site, I faced an issue. This is how I imported the file inside my Index.vue component:

<script>
import Intro from "~/components/Intro.vue";
import profile from "~/data/profile.json";

export default {
  components: {
    Intro,
  },
  metaInfo: {
    title: "Farzin Nasiri",
  },
  data: () => ({
    profile
  }),
};
</script>

and here is how I use it:

<Intro :personal="profile.personal" />

When I run the project in development (command: gridsome develop), everything is ok and the data is read properly. However, when I want to build the project (command: gridsome build) which creates a build files in the dist folder, then this error happens:

Initializing plugins...
Load sources - 0.04s
Create GraphQL schema - 0.05s
Create pages and templates - 0.03s
Generate temporary code - 0.03s
Bootstrap finish - 0.67s
Compile assets - 13.28s
Execute GraphQL (6 queries) - 0.03s
Write out page data (6 files) - 0s
Could not generate HTML for "/":
TypeError: Cannot read property '__esModule' of undefined
    at i (/home/farzin/MyProjects/portfolio.farzinnasiri.com/node_modules/vue-server-renderer/build.prod.js:1:68670)

this is my project structure(src folder):

├── components
│   ├── Intro.vue
│   └── README.md
├── data
│   └── profile.json
├── favicon.png
├── layouts
│   ├── Default.vue
│   └── README.md
├── main.js
├── pages
│   ├── About.vue
│   ├── Index.vue
│   └── README.md
├── templates
│   ├── README.md
│   └── Work.vue
└── vendor
    └── bootstrap.min.css

here is my package.json:

{
  "name": "portfolio.farzinnasiri.com",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/vue-fontawesome": "^0.1.9",
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.5.0",
    "gridsome": "^0.7.0"
  }
}

I really don't get where the problem is and need help to solve it. Thanks for your time

Dan
  • 59,490
  • 13
  • 101
  • 110
Farzin Nasiri
  • 710
  • 1
  • 10
  • 27

2 Answers2

2

Gridsome & SSR

From the Gridsome docs:

gridsome build uses server-side rendering (SSR) to create a fully rendered page. If your Vue component does not support SSR ... it won't be rendered properly.

we suggest you to encapsulate the component inside <ClientOnly></ClientOnly> tags and import the library inside Vue's mounted() handler.

The error you got is from vue-server-renderer, which is from Vue's server-side API. You'll need to implement the instructions above.

~ import

Also, without knowing how you've enabled loading JSON as a module (i.e. ~) in development, perhaps that's an issue, because that doesn't work in the default Vue CLI environment.

Try removing the ~ from all imports:

import profile from "@/data/profile.json";
Community
  • 1
  • 1
Dan
  • 59,490
  • 13
  • 101
  • 110
  • I'm new to js and I don't think I enabled anything for loading json as a module. How ever everything is okay in the develop mode. also I change `~` to `..` ( added my project structure to the question) but no change. In develop mode everything is fine but the build process fails with that error – Farzin Nasiri Apr 04 '20 at 13:15
  • Ok, looks like your path was incorrect too. I edited my answer to account for the new path info. – Dan Apr 04 '20 at 13:17
  • Unfortunately, this may be a Gridsome problem, because it's not reproducible in a typical Vue environment. The `@` symbol is a Webpack special alias to the `src` directory, which your structure shows is the correct path. The `~` would not work in a typical Vue CLI installation. I'll take a look at the Gridsome docs. – Dan Apr 04 '20 at 13:25
  • Did you also remove the `~` from `Intro.vue`? I would remove all `~` from your project and try to rebuild. Use `@` instead and ensure that all paths are correct. – Dan Apr 04 '20 at 13:28
  • my project is here:https://github.com/farzinnasiri/developers-portfolio/tree/json. – Farzin Nasiri Apr 04 '20 at 13:37
  • One more suggestion for you: Add the following to "vue.config.js" in your project root (not inside "src"): `module.exports = { css: { sourceMap: true }}` and try to rebuild – Dan Apr 04 '20 at 13:38
  • there is no such file in my project. there is a `gridsome.config.js` which contans:```'module.exports = { siteName: "Farzin Nasiri | Portfolio", plugins: [ { use: "@gridsome/source-filesystem", options: { path: "works/**/*.md", typeName: "Work" } } ] };``` I added the `packag.json` file to my question. maybe I missed something – Farzin Nasiri Apr 04 '20 at 13:40
  • Ok, create it and try that `module.exports` code from my comment above. – Dan Apr 04 '20 at 13:41
  • I made that file and added the code but still the same problem – Farzin Nasiri Apr 04 '20 at 13:45
  • Ok, that's the best I can do. Just FYI, the error is from `vue-server-renderer`, which is from Vue's server-side API. Did you intend to be using SSR? This wasn't mentioned in the question. If this was unintentional, I suggest creating a brand new project without SSR and moving your code over to it. – Dan Apr 04 '20 at 13:47
  • that weird because I use gridsome to just create a static site and I didn't use anything to do server side rendering – Farzin Nasiri Apr 04 '20 at 13:56
  • how can I fix that? I just created a gridsome project and even once deployed the unfinished code on a server and is the build-ed files were completely static. – Farzin Nasiri Apr 04 '20 at 13:59
  • From the [Gridsome docs](https://gridsome.org/docs/assets-scripts/): "gridsome build uses server-side rendering (SSR) to create a fully rendered page. If your Vue component does not support SSR ... it won't be rendered properly." – Dan Apr 04 '20 at 14:00
  • "we suggest you to encapsulate the component inside `` tags and import the library inside Vue's `mounted()` handler." Time to read the docs. I haven't used Gridsome so I can't help more, but hopefully this will be enough to help you sort it. – Dan Apr 04 '20 at 14:03
  • Thanks so much. the `client only ` tag work. Thank you – Farzin Nasiri Apr 04 '20 at 14:30
  • Which exact component did you encapsulate with `` tag to get this to work? – Ekene Nov 02 '20 at 17:36
1

You have to pass the imported object to vue as follows:

data: () => ({
    myProfile:profile
}),

So you can use it as follows:

<Intro :personal="myProfile.personal" />
Majed Badawi
  • 27,616
  • 4
  • 25
  • 48