React npm run build Fails

[Kavin-Brat]

Select Topic Area

Question

Feature Area

Issues

Body

Hi everyone,

I'm encountering an issue while running npm run build for my React project. The build process is failing, and I'm seeing some errors. If any of you have experience with this or know what might be causing the problem, I would greatly appreciate your assistance in resolving it.

> engage-plus-portal@1.4.20 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'react/jsx-runtime' in '/home/kavin/engage_plus_frontend/node_modules/@react-pdf/renderer/lib'
Did you mean 'jsx-runtime.js'?
BREAKING CHANGE: The request 'react/jsx-runtime' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Guidelines

• I have read the above statement and can confirm my post is relevant to the GitHub feature areas Issues and/or Projects.

[faridnec]

This issue might be due to a discrepancy between the way modules are imported in your project and how they are expected to be imported in the react-pdf package, particularly in a strict ECMAScript module environment. Can you perhaps, -as suggested in the error message- try adding the .js extension to the import statement? For example, change 'react/jsx-runtime' to 'react/jsx-runtime.js'.
Otherwise, maybe ensure that all your project dependencies, especially react-pdf, are up to date. Sometimes, updating the packages can resolve compatibility issues.

[Vijaykv5]

@faridnec
Try to update the packages as it may involve compatibility issues.
It depends on how you import the modules

[queenofcorgis]

Thanks for posting in the GitHub Community, @Kavin-Brat !

We're happy you're here. You are more likely to get a useful response if you are posting your question in the applicable category, the Projects and Issues category is solely related to conversations around the GitHub products Issues and Projects.

We’ve moved your post to our Programming Help 🧑‍💻 category, which is more appropriate for this type of discussion.

Please review our guidelines about the Programming Help category for more information.

[vishalyadav0987]

Check Dependencies:
Ensure that your project's dependencies are up to date. Sometimes, version mismatches or outdated packages can lead to such issues.

Verify Package Versions:
Verify that you have compatible versions of @react-pdf/renderer and react installed. Sometimes, incompatible versions can cause module resolution issues.

Check Configuration:
Review your Webpack or bundler configuration to ensure that it correctly handles ES modules. This error message indicates that the problem might be related to how ES modules are handled in your build setup.

Update webpack Configuration:
If you're using webpack, you might need to add a rule to handle .mjs files. Here's an example of how you can configure webpack to handle such modules:
javascript:
module.exports = {
// other webpack configurations
resolve: {
extensions: ['.mjs', '.js', '.json'],
},
module: {
rules: [
{
test: /.m?js$/,
resolve: {
fullySpecified: false,
},
},
],
},
};
Update Babel Configuration:
If you're using Babel, ensure that it's configured properly to handle ES modules. You might need to include the @babel/plugin-transform-modules-commonjs plugin to ensure compatibility with CommonJS modules.

Check TypeScript Configuration:
If you're using TypeScript, ensure that your tsconfig.json is configured properly to handle ES modules.

Update Node.js:
Ensure you are using a recent version of Node.js. Sometimes, older versions might have issues with ES module resolution.

Check package.json:
If you have "type": "module" in your package.json, try removing it or changing it to "type": "commonjs" if it's applicable to your project.

Clear Cache:
Clear your npm or yarn cache and try reinstalling dependencies:
npm cache clean --force
npm install
or
yarn cache clean
yarn install

[queenofcorgis]

@vishalyadav0987

We’ve clarified our stance on using generative AI tools like ChatGPT within our Community via this announcement. Please review the guidelines to ensure your post meets them as failure to adhere to those rules can result in action taken by our moderator team.  You can read our updated Code of Conduct and the announcement for more details. Thank you for helping us maintain an authentic and beneficial space for everyone.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬