Cannot find module nuxt-typo3-headless-news/Resources/Private/News/Templates/Vue/CeNews_pi1

[donni106]

This error occurs when starting the nuxt server and visiting http://localhost:3000/:

/*
** Nuxt.js modules
*/
modules: [
  // Doc: https://github.com/TYPO3-Initiatives/headless_news
  'nuxt-typo3-headless-news',
  // Doc: https://github.com/TYPO3-Initiatives/nuxt-typo3
  'nuxt-typo3',
  '@nuxtjs/pwa',
  // Doc: https://github.com/nuxt-community/dotenv-module
  '@nuxtjs/dotenv'
],

Without nuxt-typo3-headless-news in the modules everything works fine. Any idea?

[mercs600]

Did you add this package to frontend app ? yarn add nuxt-typo3-headless-news

[donni106]

Yes

[donni106]

There is a nuxt-typo3-headless-news file in the .nuxt folder. In this file, the problematic code is included with the bad path. When I comment out everything, our app works.

// import Vue from "vue";
// import CeNews_pi1 from "nuxt-typo3-headless-news/Resources/Private/News/Templates/Vue/CeNews_pi1";
// export default () => {
//   Vue.component("CeNews_pi1", CeNews_pi1);
// };

Do I need that file/content? Or is this more like an example file, how to initially being able to use headless news? How can I force to not create that file in .nuxt?

[donni106]

With investing more, it seems like that our setup cannot find the .vue file in nuxt-typo3-headless-news/Resources/Private/News/Templates/Vue/. With trying to autocomplete the path, only .js files were proposed.

I also deleted node_modules and npm cache and reinstalled everything.

[donni106]

Wow, it seems to work, when adding .vue to the import from:

import Vue from "vue";
import CeNews_pi1 from "nuxt-typo3-headless-news/Resources/Private/News/Templates/Vue/CeNews_pi1.vue";
export default () => {
  Vue.component("CeNews_pi1", CeNews_pi1);
};

I will setup a PR for this! Or is there any other solution @mercs600?