components icon indicating copy to clipboard operation
components copied to clipboard

Cannot auto import from a relative folder higher than the app folder

Open Billybobbonnet opened this issue 3 years ago • 4 comments

Describe the bug I wished to use this module with a relative path to a shared components folder in a SPA targeting static hosting. I set it up like this

nuxt.config.js components: ['~/components/', '../../common/components/'],

So it could get components from a folder placed as follows:

+-- common | +-- components | | +-- SharedComponent.vue +-- app_container | +-- app | | +-- nuxt.config.js | | +-- components | | | +-- RegularComponent.vue

This approach would be extra helpful for mono repo with multiple Nuxt projects sharing resources and components. I can't fork the CodeSandbox example since it doesn't allow to put the package.json lower than root level.

To Reproduce Steps to reproduce the behavior: Create a new nuxt app, add the config above to nuxt.config.js, place the component you want to use in the same folder structure.

Expected behavior Auto import components

Screenshots image

Billybobbonnet avatar Aug 31 '20 14:08 Billybobbonnet

Ok, fastest problem solving ever:

Add to your nuxt file a path import: import * as path from 'path'

And replace the folder outside of the project as follows: components: ['~/components/', path.resolve('../../common/components/')],

It should really be in the doc if it turns out it is the right way to go. At least it works here for local, build and generate. I'll leave the issue open as a reminder to add this in the docs but feel free to close it.

A nice feature would be to detect relative paths out of the root folder and make it at the module level, not in the nuxt config file.

Billybobbonnet avatar Aug 31 '20 14:08 Billybobbonnet

Hi @Billybobbonnet thanks for bug report. I think it makes sense resolving relating paths relative to rootDir here. If you want to make a PR, that's more than welcome :heart:

pi0 avatar Sep 01 '20 12:09 pi0

In my case solution from @Billybobbonnet didn't work but idea was correct. I've updated it to the next: { path: path.join(__dirname, "../shared/components/Adv/GoogleTagManager/Demo/" ), prefix: "Demo", },

mckrava avatar Nov 19 '20 12:11 mckrava

@Billybobbonnet how did you end up solving the issue in a mono repo ?

gaucj-t avatar Mar 04 '24 16:03 gaucj-t