Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'

Smart Contracts
1

Hi

I'm following along with a tutorial and I'm getting the following error

Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'

The tutorial I'm following can be found here, and so can the entire code base

Once I go - npm run dev - this is my output

BarryH@EPT-LT23 MINGW64 ~/digital-marketplace (main)
$ npm run dev

digital-marketplace@0.1.0 dev
next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /
wait - compiling...
error - ./pages/index.js:11:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
9 |
10 | import NFT from '../artifacts/contracts/NFT.sol/NFT.json'

11 | import Market from '../artifacts/contracts/Market.sol/NFTMarket.json'
12 |
13 | export default function Home() {
14 | const [nfts, setNfts] = useState()

Import trace for requested module:

event - build page: /next/dist/pages/_error
wait - compiling...
error - ./pages/index.js:11:0
Module not found: Can't resolve '../artifacts/contracts/Market.sol/NFTMarket.json'
9 |
10 | import NFT from '../artifacts/contracts/NFT.sol/NFT.json'

11 | import Market from '../artifacts/contracts/Market.sol/NFTMarket.json'
12 |
13 | export default function Home() {
14 | const [nfts, setNfts] = useState()

Import trace for requested module:

wait - compiling...
event - compiled successfully

Really don't understand why it isn't working as i've copied his code examples exactly

Any help would be greatly appreciated

2

Hi I have the same problem, have you found a solution ?

1 Like
3

It seems like you use Hardhat, so I think if you can not get the file named artifacts, you can try to compile your contracts to get it, just run npx hardhat compile, this will generate the file named artifacts, and then use a correct route path when you want to use it.

4

I had the same issue import Contract from '../../artifacts/contracts/Contract.sol
I fixed it by adding a JSON path, TBH not sure why it has such behavior.
import Contract from '../../artifacts/contracts/Contract.sol/Contract.json'

5

After a couple of hours of digging, I finally found the solution to this problem

  1. The 'artefacts' directory is included in the .gitignore file which makes the whole folder invisible during build
  2. open the gitignore file and exclude the artefacts directory
  3. Now run 'npm run build' and everything all the error will be gone