Unable to import a module from another module in Nuxt

Question

In my nuxt directory structure I have a folder called modules which contains my custom modules. In this example it will contain the modules foo and bar. In nuxt.config.js foo is added like so:

// nuxt.config.js
...
modules: [
  ...
  "~/modules/foo"
],
...

Note bar is not added as a module. When I try to import bar in foo

// foo/index.ts

import { bar } from '~/modules/bar';

export default function fooModule() {
  console.log(bar)
}

// bar/index.ts

const bar = 1
export { bar };

export default function barModule() {}

I get Nuxt Fatal Error, Error: Cannot find module '~/modules/bar'. Adding "~/modules/bar" to modules in nuxt.config.js seems to make no difference.

Any Idea on how to prevent this?

kissu · Accepted Answer · 2021-08-30 14:46:39Z

2

A module is something designed with Nuxt in mind, something like the axios module is to be added this way in nuxt.config.js

export default {
  modules: ['@nuxtjs/axios']
}

You cannot dump your own code just like that into modules.

You're probably looking for plugins here?

answered Aug 30, 2021 at 14:46

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dominique Garmier Over a year ago

Im not sure I thought plugins where meant to inject functionality into the Vue context (preferably I would like to import foo and bar using an import statement at the top of the script)? I might be misunderstanding the use of plugins, Ill look into this, thanks!

kissu Over a year ago

Yeah, the difference between plugins and modules can be hard to understand at first. Meanwhile, you need to also know that writing it as a plugin will link it globally to the project. If it's not needed, feel free to simply import it per component/page for performance reasons. @DominiqueGarmier

Dominique Garmier Over a year ago

If not in /plugins where would you put those .ts files? Is there a best practice? From what I understand I could put them in /assets but the documentation says it's meant for images, styles, fonts etc.

kissu Over a year ago

@DominiqueGarmier usually, a /utils/ is an okay directory (at the root of the project), I'm doing it this way and all the people I worked with before with are doing the same.

Dominique Garmier Over a year ago

So I moved all my "utils" to /utils. But the problem remains. I have one module in /modules (which needs to be there), it injects a plugin into the Vue-context. And imports from /utils, which apparently doesn't exit during the build process. Giving me again Error: Cannot find module '~/utils/...'

|

Collectives™ on Stack Overflow

Unable to import a module from another module in Nuxt

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related