1

I have created react app its working fine but when i added all this app file in shopify app where next js exit so i am getting this error ,

import React, {createContext, useState} from "react";
 import bag from "../assets/bag.jpg";
export const ProductsContext = createContext();
const ProductsContextProvider = (props) => {
const [products] = useState([
{id:1, name: 'Bag', image: bag, price: 300,    status: 'hot'}
 ]);
     return (
 <ProductsContext.Provider value = {{products : [...products]}}>
  {props.children}
 </ProductsContext.Provider>
 )
 }
 export default ProductsContextProvider;

this is my error

┃ error - ./pages/assets/bag.jpg 1:0 ┃ Module parse failed: Unexpected character '�' (1:0) ┃ You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders ┃ (Source code omitted for this binary file)

this is my next.config.js

const { parsed: localEnv } = require("dotenv").config();
const webpack = require("webpack");
 const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);
  module.exports = {
   webpack: (config) => {
   const env = { API_KEY: apiKey };
    config.plugins.push(new webpack.DefinePlugin(env));
   // Add ESM support for .mjs files in webpack 4
   config.module.rules.push({
     test: /\.mjs$/,
     include: /node_modules/,
      type: "javascript/auto",
    });

return config;
  },

 };
Yash Rami
  • 2,276
  • 1
  • 10
  • 16
Eion
  • 35
  • 4
  • Does this answer your question? [I can't reference an image in Next.js](https://stackoverflow.com/questions/59546370/i-cant-reference-an-image-in-next-js) – juliomalves Jan 28 '22 at 21:49

1 Answers1

0

change the path of the image to import bag from "./assets/bag.jpg"; if the assets in the public folder

mmantach
  • 148
  • 10