4

I have a package that I'm importing into my Next.js project (v13.4.3) that has a sub-dependency on another package which supplies it with translations via a JSON file. However, when I attempt to use the package and compile, I get this error:

- info Collecting page data ..Error: Cannot find module '/Users/user/app/.next/server/chunks/translations.json'
    at webpackEmptyContext (/Users/user/app/.next/server/chunks/7208.js:9:10)
    at Object.9641 (/Users/user/app/.next/server/chunks/9716.js:10551:45)
    at __webpack_require__ (/Users/user/app/.next/server/webpack-runtime.js:25:42)
    at Object.11450 (/Users/user/app/.next/server/chunks/9716.js:5138:31)
    at __webpack_require__ (/Users/user/app/.next/server/webpack-runtime.js:25:42)
    at Object.4847 (/Users/user/app/.next/server/chunks/9716.js:5309:14)
    at __webpack_require__ (/Users/user/app/.next/server/webpack-runtime.js:25:42)
    at Object.59204 (/Users/user/app/.next/server/chunks/9716.js:6898:14)
    at __webpack_require__ (/Users/user/app/.next/server/webpack-runtime.js:25:42)
    at /Users/user/app/.next/server/pages/projects/[id].js:27:79 {
  code: 'MODULE_NOT_FOUND'
}

When I go into the actual node_module folder, the .json file is indeed there. Might be worth noting that both packages belong to an NPM scope (e.g. @mycompany), which was added to transpilePackages array as ["@mycompany"] to prevent a separate error I was getting that said SyntaxError: Unexpected token 'export'. I also tried using Remix.run to see if it would work there, but I ended up getting an identical error message.

How should I go about fixing this?

halsdunes
  • 1,199
  • 5
  • 16
  • 28

2 Answers2

1

SASS is being used by Vercel, and Next.js has built-in support for Sass using both the .scss and .sass extensions.

The error you are experiencing with Next.js might be related to a SASS error, as illustrated by vercel/next.js issue 11377. In some cases, when a SASS error occurs, the Next CLI will continue to print a "Cannot find module" error until the SASS error is fixed.

One workaround for this issue is to manually create a build-manifest.json file with the content {} in your .next directory. This seems to temporarily fix the issue and allows other more sensible errors to appear.

Another user reported fixing the issue by upgrading yarn using the command yarn upgrade.

If the above solutions do not work, you might try the following steps as suggested in "ERROR MODULE NOT FOUND whenever I try to run 'npm run dev' using Next.js":

  1. Stop your development server (ctrl+c).
  2. Delete the .next folder in your project's root folder.
  3. Delete the node_modules folder and the package-lock.json file as well.
  4. Run npm cache clean --force.
  5. Run npm install.
  6. Run npm run dev.

If the issue persists even after following the steps above, check if the specified file exists on the specified path. If it does, try moving your project's folder to a path other than desktop due to potential Windows permission problems, but I suspect this should not be the case here (/Users/...: MacOS?).

Remember to always back up your work before making changes to your project's files or directories, to prevent any data loss.

VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
-1

If you are encountering an error when trying to use a package that imports a JSON file for internationalization (i18n), there are a few potential causes and solutions you can try:

Verify the file path: Double-check that the file path to the JSON file is correct. Ensure that the file is located in the specified location and that the path provided in the package code matches the actual file path.

Check file permissions: Ensure that the JSON file has the necessary read permissions for the package to access it. Make sure the file is not locked or restricted in any way that would prevent it from being read.

Confirm JSON file validity: Ensure that the JSON file itself is valid and well-formed. JSON syntax errors can cause issues when importing or parsing the file. You can use online JSON validators or tools to check the validity of the file and fix any syntax errors.

Check for missing dependencies: Some packages require specific dependencies to handle JSON file imports. Verify that you have installed all the necessary dependencies required by the package. You can consult the package's documentation or README file to identify any dependencies that need to be installed.

Update the package: Ensure that you are using the latest version of the package. Sometimes, compatibility issues or bugs can be resolved by updating the package to the most recent version. Check the package's official website or the package manager (e.g., npm, pip) for any updates or bug fixes.

Seek support from the package's community: If you have tried the above steps and are still experiencing issues, consider reaching out to the package's community for support. This can include forums, GitHub repositories, or discussion boards related to the package. Describe your problem in detail and provide any relevant error messages to receive assistance from other users or the package maintainers.

Apollo Gen
  • 7
  • 1