ReferenceError: Image is not defined

[jularbs]

Everything works fine locally but when i tried deploying it on Heroku, build fails with message:

> Build error occurred
ReferenceError: Image is not defined
    at new MediaLoader (/tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:2204)
    at Module.<anonymous> (/tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:23175)
    at __webpack_require__ (/tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:529)
    at Object.<anonymous> (/tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:10916)
    at __webpack_require__ (/tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:529)
    at /tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:1608
    at /tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:1653
    at webpackUniversalModuleDefinition (/tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:114)
    at Object.<anonymous> (/tmp/build_468cb887/node_modules/react-awesome-slider/dist/index.js:1:375)
    at Module._compile (internal/modules/cjs/loader.js:1085:14) {
  type: 'ReferenceError'
}

[trolit]

If it's working locally but not during deployment the data-src path you are referring to is only available locally but not in built version of your project.

Build your project locally, run that build locally and see if it's working as intended. You can also preview built project structure manually to see if your images are in right place.

For the sake of calmness you can also check simple <img src="..."/> to be sure that it's not caused by slider.

Might want to also check this: https://stackoverflow.com/questions/62920713/react-unable-to-render-images-on-heroku. In nodejs example images are also stored in public/.

[jularbs]

thanks @trolit

Yup also tried the npm run build then npm run start it works flawlessly.

[trolit]

I'm sorry but I don't understand if you mean that you've solved the problem already or you checked build and images are working there as intended 😄

If second option, please make sure that you are using proper scripts because npm run build / npm run start / npm run serve eg.. do not give any details as they are just aliases for scripts. For instance if you're using React, it should tell you what command to run after build is done:

The build folder is ready to be deployed.
You may serve it with a static server:

npm install -g serve
serve -s build

[belloshehu]

I have problem referencing local images in Nextjs.

Here is a Slider component I define:

import AwesomeSlider from "react-awesome-slider";
import withAutoplay from "react-awesome-slider/dist/autoplay";
import "react-awesome-slider/dist/styles.css";
const AutoplaySlider = withAutoplay(AwesomeSlider);

export default function Slider() {
  return (
    <div>
      <AutoplaySlider
        play={true}
        cancelOnInteraction={false} // should stop playing on user interaction
        interval={2000}
        animation="foldOutAnimation"
        media={[
          {
            source: "./house.png",
          },
          {
            source: "./house.png",
          },
          {
            source: "./house.png",
          },
        ]}></AutoplaySlider>
    </div>
  );
}

the house.png image is in the same folder as the Slider component