require is not defined #12797

pixelpaulaus · 2021-11-16T05:07:24Z

Environment

latest versions

Reproduction

<img :src="require('~/assets/image.png')"> anywhere in vue component.

Describe the bug

require is not defined when using it such as....

<img :src="require('~/assets/image.png')">

Additional context

No response

Logs

at $id_9513b4f8 (file://./.nuxt/dist/server/server.mjs:10135:22)
at __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:10596:9)
at __ssrLoadModule__ (file://./.nuxt/dist/server/server.mjs:10543:25)
at ssrImport (file://./.nuxt/dist/server/server.mjs:10568:13)
at $id_45a9f067 (file://./.nuxt/dist/server/server.mjs:9928:37)
at __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:10596:9)
at __ssrLoadModule__ (file://./.nuxt/dist/server/server.mjs:10543:25)
at ssrImport (file://./.nuxt/dist/server/server.mjs:10568:13)
at $id_7689e89d (file://./.nuxt/dist/server/server.mjs:1935:37)
at async __instantiateModule__ (file://./.nuxt/dist/server/server.mjs:10596:3)

The text was updated successfully, but these errors were encountered:

danielroe · 2021-11-16T10:36:25Z

If you are using vite then require will not work; it's webpack-only. Instead, just use:

<template>
  <div class="app">
    <img src="~/assets/image.png">
  </div>
</template>

pixelpaulaus · 2021-11-16T19:49:55Z

okay, so i have found that it is using vite by default. Strange as i did not set that. So i assume nuxt3 uses Vite by default? I cant see anywhere in the docs to make it use webpack over vite.

danielroe · 2021-11-17T09:24:02Z

@pixelpaulaus You can set vite: false in your nuxt.config.

kayoderock · 2022-01-13T16:37:46Z

Yeah @pixelpaulaus, I had this same issue, how can I make a dynamic src using Vite?

kayoderock · 2022-01-13T16:54:20Z

Yeah found it https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url - Vite docs

imgUrl () {
    return new URL(`../assets/${this.icon}.svg`, import.meta.url).href
  }

tsulatsitamim · 2022-03-28T08:07:56Z

Yeah found it https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url - Vite docs
imgUrl () {
    return new URL(`../assets/${this.icon}.svg`, import.meta.url).href
  }

not work in ssr

androot-dev · 2022-03-31T01:03:03Z

Alguna solución a este problema, para ssr ?

prstwo · 2022-04-09T07:08:08Z

Yeah found it https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url - Vite docs
imgUrl () {
    return new URL(`../assets/${this.icon}.svg`, import.meta.url).href
  }

according to this page: https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url:::

Does not work with SSR

This pattern does not work if you are using Vite for Server-Side Rendering, because import.meta.url have different semantics in browsers vs. Node.js. The server bundle also cannot determine the client host URL ahead of time.

spot-mathis · 2022-04-29T09:35:09Z

any solutions for this?

juancarlos-ctg · 2022-05-05T20:46:52Z

if you're using nuxt 3 just put the img src as "assets/<whatever path to your img>".

By default nuxt 3 will not use the @ for specifying the path in the Vue.js

So dynamically loading images using urls should work like so:

<img :src="assets/path/to/img.png">

UPDATE May 9th:

In production the above does not work, the images are still rendered as assets/path/to/img.png where a path with _nuxt/.../.../ should be used to access the assets.

To dynamically render images that are currently existing within your assets directory, you will need to import them in your script tag.

For example,

<script>
import icon from '@/assets/images/icon.png'
export default { 
  data () { 
    return { image: icon}
  }
}
</script>

<template>
  <img :src="image">
</template>
</template

Again, this is for Nuxt 3

paidge · 2022-06-15T11:34:19Z

Thanks @juancarlos-ctg. This solution works with Nuxt3. But how to import the image dynamically ?
My component has a String prop with the asset name and I would like to import the image depending on this prop.

paidge · 2022-06-23T10:13:03Z

I'll try your solution. I finally put my images in the public folder. With this method, images are not compressed but I compressed them before with another tool.

pravinfullstack · 2022-07-03T13:20:22Z

Any straightforward solution for this ?

kiketordera · 2022-07-04T00:36:59Z

Yeah, I want to do something like this, but I can't:

 <img :src="require('@assets/'+img)" alt="">

EmmyMay · 2022-07-05T08:35:57Z

Yeah, I want to do something like this, but I can't:
 <img :src="require('@assets/'+img)" alt="">

Require does not work with vite which nuxt 3 uses

steel89ita · 2022-07-15T11:47:58Z

We now know that require does not work with vite,
but which could be the solution to import the image dynamically with ssr?

For example, I was importing the image using "require" and combining it with a string prop,
but can't see a way of doing something similar with vite ssr, as import.meta.url is not working.

mjzarrin · 2022-07-22T02:44:10Z

An example of changing images dynamically while using Vite:

Update:
It only worked on dev mode.

EmmyMay · 2022-07-22T02:56:20Z

An example of changing images dynamically while using Vite:

<img :src="`/assets/${dynamic_image_name}.jpeg`"/>

This works on SSR?

alexiokay · 2022-08-13T21:59:29Z

Maybe use 'type': 'commonjs' in package.json and add this in your nuxt.config.ts file:

I have configuration like this, but nothing worked after building because of missing it I tried before many things, was googling for some hours reading documentations of rollup, nuxt, plugins, vite, commonjs etc. Then I went somewehere for 2 hours, I came back and repaired it within 5 minutes :D

import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill'
import { NodeModulesPolyfillPlugin } from '@esbuild-plugins/node-modules-polyfill'
import rollupNodePolyFill from 'rollup-plugin-node-polyfills'

`vite: {
    plugins: [
    ],
    resolve: {
      alias: {
          // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill, 
          // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
          // process and buffer are excluded because already managed
          // by node-globals-polyfill
          util: 'rollup-plugin-node-polyfills/polyfills/util',
          sys: 'util',
          events: 'rollup-plugin-node-polyfills/polyfills/events',
          stream: 'rollup-plugin-node-polyfills/polyfills/stream',
          path: 'rollup-plugin-node-polyfills/polyfills/path',
          querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
          punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
          url: 'rollup-plugin-node-polyfills/polyfills/url',
          string_decoder: 'rollup-plugin-node-polyfills/polyfills/string-decoder',
          http: 'rollup-plugin-node-polyfills/polyfills/http',
          https: 'rollup-plugin-node-polyfills/polyfills/http',
          os: 'rollup-plugin-node-polyfills/polyfills/os',
          assert: 'rollup-plugin-node-polyfills/polyfills/assert',
          constants: 'rollup-plugin-node-polyfills/polyfills/constants',
          _stream_duplex:
              'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
          _stream_passthrough:
              'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
          _stream_readable:
              'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
          _stream_writable:
              'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
          _stream_transform:
              'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
          timers: 'rollup-plugin-node-polyfills/polyfills/timers',
          console: 'rollup-plugin-node-polyfills/polyfills/console',
          vm: 'rollup-plugin-node-polyfills/polyfills/vm',
          zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
          tty: 'rollup-plugin-node-polyfills/polyfills/tty',
          domain: 'rollup-plugin-node-polyfills/polyfills/domain'
      },
    },
    optimizeDeps: {
      esbuildOptions: {
          // Node.js global to browser globalThis
          define: {
              global: 'globalThis'
          },
          // Enable esbuild polyfill plugins
          plugins: [
              NodeGlobalsPolyfillPlugin({
                  process: true,
                  buffer: true
              }),
              NodeModulesPolyfillPlugin()
          ]
      }
  },


    build: {
      rollupOptions: {
        plugins: [
            // Enable rollup polyfills plugin
            // used during production bundling
            rollupNodePolyFill()
        ]
    }
  },`

terwer · 2022-08-25T11:05:22Z

Still not work

den-kar · 2022-08-28T09:55:51Z

I kind of found a work-around by replacing <img> with a <div> and setting the background-image with a Tailwind class.
Changed from:

const logoFilename = 'logo-1.svg';
<img :src="`~/assets/img/logos/${logoFilename}`" ... />

to:

const logoTailwindBgImage = 'bg-[url(~/assets/img/logos/logo-1.svg)]'
<div class="w-full ..." :class="logoTailwindBgImage" ...></div>

This works in production too, but only when passing the whole Tailwind class as a single string.

Concatenating the class name only works with yarn dev:

const concatenatedTailwindClass = `bg-[url(~/assets/img/logos/${logoFilename})]`
<div class="w-full ..." :class="concatenatedTailwindClass" ...></div>

yarn build exits with an error:

ERROR [vite:css] ENOENT: no such file or directory, open 'path/to/project/root/assets/img/logos/${logoFilename}'
file: /path/to/project/root/assets/css/tailwind.css

ERROR ENOENT: no such file or directory, open '/path/to/project/root/assets/img/logos/${logoFilename}'

error Command failed with exit code 1.

It's no one-to-one replacement, but at least the images are rendered in production and are available at e.g. http://www.example.io/_nuxt/logo-1.ccb82e2f.svg.

Might be helpful to someone

slavco86 · 2022-09-09T15:30:40Z

Trying to integrate Azure application insights with our Nuxt 3 app to monitor requests which Nuxt is making server side.
According to app insights docs - I have to use require in order to initialise the package, which I am trying to do via server side plugin, but like it was mentioned above - also getting an error saying required is not defined
https://www.npmjs.com/package/applicationinsights

Is there a work around?

danielroe · 2022-09-09T15:46:57Z

Can you not import instead of require? (I would request that you move this to a discussion rather than a long-closed and unrelated issue.)

slavco86 · 2022-09-09T16:06:55Z

https://github.com/nuxt/framework/discussions/7391

slavco86 · 2022-09-12T11:17:14Z

Can you not import instead of require? (I would request that you move this to a discussion rather than a long-closed and unrelated issue.)

No, the package doesn't support import - I'm getting undefined with import

manniL · 2022-09-12T11:19:22Z

Even with import * as MY_VAR from 'package'?

slavco86 · 2022-09-12T11:23:08Z

Bingo!
Thanks!!!

schnetzi · 2022-10-22T08:30:50Z

@slavco86 @manniL your discussion and solution is not related to this problem. The problem is/was to import/require a dynamic image path and not a package.

To the problem with loading dynamic images:
I found a solution in stack-overflow: https://stackoverflow.com/a/71514878/7866722

My solution turned out like that

const imageUrl = new URL(`../../assets/images/${props.src}`, import.meta.url).href;

Although I am getting the following error now:

Not allowed to load local resource file:///Users//projects//assets/images/logo.png

Full code for an Article Image with Nuxt Content

<!-- components/content/ArticleImage.vue -->
<template>
  <img :src="imgSrc()" :alt="alt" class="article-image" />
</template>

<script setup lang="ts">
const props = defineProps<{
  src: string;
  alt: string;
}>();

function imgSrc() {
  try {
    const imageUrl = new URL(`../../assets/images/${props.src}`, import.meta.url).href;

    return imageUrl;    
  } catch (error) {
    console.error(error);
  }
}
</script>

danielroe · 2022-10-22T12:29:33Z

Check out https://vitejs.dev/guide/features.html#glob-import and follow #14766.

miumerfarooq · 2023-01-23T08:38:32Z

For dynamic images use this, it works in nuxt 3.
Define the path as I did.

<template>
  <div class="app">
    <img :src="`/_nuxt/assets/images/${img.src}`" alt="image"/>
  </div>
</template>

export default {
  data() {
    return {
      img: { 
        src: 'img.png' 
      }
    }
  }
}

Note: define your directory properly, my image are saved in images folder.

It work for me :)

kissu · 2023-01-24T08:39:51Z

For dynamic images use this, it works in nuxt 3. Define the path as I did.
<template>
  <div class="app">
    <img :src="`/_nuxt/assets/images/${img.src}`" alt="image"/>
  </div>
</template>

export default {
  data() {
    return {
      img: { 
        src: 'img.png' 
      }
    }
  }
}
Note: define your directory properly, my image are saved in images folder.

It work for me :)

That one is more of a local-dev only thing.
I don't think it would work once pushed to production (since _nuxt is used as a local cache).

itskush · 2023-02-23T18:55:12Z

what if im trying to pass an object? like a json to a component's props (which is expecting an object)?
for example :loaData:require('@/assets/data.json')

itskush · 2023-02-23T20:04:36Z

I manged to get it working via a function in methods

leo95batista · 2023-09-08T03:25:43Z

I have the same problem, what I'm trying to do is something like this: <template> <svg class="inline-block overflow-hidden" height="1em" width="1em"> <use :xlink:href="`~/assets/icons/core.svg#${props.name}`"></use> </svg> </template>

but it renders in the DOM as <use :xlink:href="~/assets/icons/core.svg#icon1"></use>

GavinJaynes · 2023-09-27T03:44:39Z

It's ridiculous that it's so complicated to get a dynamic image path in Nuxt. Surely, there's a better way?

Thanks to #12797 (comment)

This seems to work, but I don't like that the path is so fickle (relative) - it would be good if the alias worked:
const imageUrl = new URL(`~/assets/images/${props.backgroundImageName}`, import.meta.url).href; ❌

A working solution in Nuxt 3 using SFC ✅

<script lang="ts" setup>

const props = defineProps<{
  backgroundImageName: string;
}>()

const getImageSrc = () => {
  try {
    const imageUrl = new URL(`../assets/images/${props.backgroundImageName}`, import.meta.url).href;
    return imageUrl;
  } catch (error) {
    console.error(error);
  }
}
</script>

<template>
      <img :src="getImageSrc()" alt="background image" />
</template>

hakimov-dev · 2024-02-19T18:24:41Z

Any news ? Have you guys find solution for that?

Kaperskyguru · 2024-04-13T04:13:49Z

Any solution? Doesn't work in Production with Netlify

Kaperskyguru · 2024-04-13T04:27:35Z

I found a workaround that works for me.

I moved all the images to the public folder and used this code.

     <img
          class="w-full h-full object-fill"
          :src="`/img/${props.item?.image}`"
          :alt="item?.title"
        />

It worked in both dev and prod

I write a lot about Vue 3 and Nuxt 3 at enterprisevue.dev

pixelpaulaus added nuxt3 pending triage labels Nov 16, 2021

danielroe closed this as completed Nov 16, 2021

tobiasdiez mentioned this issue Aug 15, 2022

[doc] Add how to use assets with dynamic names nuxt/framework#6635

Closed

7 tasks

markus-gx mentioned this issue Oct 13, 2022

Require is not defined | Vite issue swellstores/swell-js#64

Closed

danielroe added the 3.x label Jan 19, 2023

danielroe transferred this issue from nuxt/framework Jan 19, 2023

require is not defined #12797

require is not defined #12797

Comments

pixelpaulaus commented Nov 16, 2021

Environment

Reproduction

Describe the bug

Additional context

Logs

danielroe commented Nov 16, 2021

pixelpaulaus commented Nov 16, 2021 • edited Loading

danielroe commented Nov 17, 2021

kayoderock commented Jan 13, 2022

kayoderock commented Jan 13, 2022

tsulatsitamim commented Mar 28, 2022

androot-dev commented Mar 31, 2022

prstwo commented Apr 9, 2022 • edited Loading

spot-mathis commented Apr 29, 2022

juancarlos-ctg commented May 5, 2022 • edited Loading

paidge commented Jun 15, 2022

paidge commented Jun 23, 2022 • edited Loading

pravinfullstack commented Jul 3, 2022

kiketordera commented Jul 4, 2022

EmmyMay commented Jul 5, 2022 • edited Loading

steel89ita commented Jul 15, 2022

mjzarrin commented Jul 22, 2022 • edited Loading

EmmyMay commented Jul 22, 2022

alexiokay commented Aug 13, 2022 • edited Loading

terwer commented Aug 25, 2022

den-kar commented Aug 28, 2022

slavco86 commented Sep 9, 2022

danielroe commented Sep 9, 2022

slavco86 commented Sep 9, 2022

slavco86 commented Sep 12, 2022

manniL commented Sep 12, 2022

slavco86 commented Sep 12, 2022

schnetzi commented Oct 22, 2022 • edited Loading

danielroe commented Oct 22, 2022

miumerfarooq commented Jan 23, 2023

kissu commented Jan 24, 2023

itskush commented Feb 23, 2023

itskush commented Feb 23, 2023

leo95batista commented Sep 8, 2023

GavinJaynes commented Sep 27, 2023

hakimov-dev commented Feb 19, 2024

Kaperskyguru commented Apr 13, 2024

Kaperskyguru commented Apr 13, 2024 • edited Loading

pixelpaulaus commented Nov 16, 2021 •

edited

Loading

prstwo commented Apr 9, 2022 •

edited

Loading

juancarlos-ctg commented May 5, 2022 •

edited

Loading

paidge commented Jun 23, 2022 •

edited

Loading

EmmyMay commented Jul 5, 2022 •

edited

Loading

mjzarrin commented Jul 22, 2022 •

edited

Loading

alexiokay commented Aug 13, 2022 •

edited

Loading

schnetzi commented Oct 22, 2022 •

edited

Loading

Kaperskyguru commented Apr 13, 2024 •

edited

Loading