Compile error - module not found - cannot resolve 'react/jsx-runtime'

[knuula]

Describe the bug

ERROR in ./node_modules/@react-pdf/renderer/lib/react-pdf.browser.js 15:0-40 Module not found: Error: Can't resolve 'react/jsx-runtime' in 'D:\client\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.

To Reproduce

I just updated a few packages and suddenly got this error whenever I do npm run start or npm run build in my react project.

Screenshots If applicable, add screenshots to help explain your problem.

I think it has something to do with this below. This is from @react-pdf/renderer/lib/react-pdf.browser.cjs

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _extends = require('@babel/runtime/helpers/extends'); var primitives = require('@react-pdf/primitives'); var queue = require('queue'); var require$$1 = require('react'); var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime'); var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator'); var FontStore = require('@react-pdf/font'); var renderPDF = require('@react-pdf/render'); var PDFDocument = require('@react-pdf/pdfkit'); var layoutDocument = require('@react-pdf/layout'); var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose'); var require$$0 = require('object-assign'); var scheduler = require('scheduler'); var jsxRuntime = require('react/jsx-runtime');

Desktop (please complete the following information):

I experienced the issue with the following versions of react-pdf/renderer:

3.1.5 3.4.0

[calebloveshockey]

Having the same issue.

[rohmansca]

Me too

[abhinavtalentinc]

Add the following to your webpack config.

alias: {
      // existing
      'react/jsx-runtime': 'react/jsx-runtime.js',
},

After that, run install and build commands again.

[fabianEspn404]

Hi @abhinavtalentinc, where I can find the webpack config file?

[sankaSanjeeva]

Got the same error. But i have worked with v3.1.12. So i downgraded to it.

[cyber-gh]

Upgrading react version from 16 to 17 helped

https://stackoverflow.com/questions/65527359/got-cant-resolve-react-jsx-runtime-error-while-use-try-to-create-the-shared-c

[Avni1802]

Upgrading react version from 16 to 17 helped

https://stackoverflow.com/questions/65527359/got-cant-resolve-react-jsx-runtime-error-while-use-try-to-create-the-shared-c

Not working for react v17 as well

[slatejack]

So, except webpack, have anyother way to reslove the problem?😭

[stevenKirill]

I've got another problem, I updated my @react-pdf/renderer to 3.4.4 and added this to my webpack config alias: { 'react/jsx-runtime': 'react/jsx-runtime.js', }, but my app is not render at all

[stevenKirill]

Does anybody know how can I make icon only with border in react-pdf-render ? Coz it's always fill, even if I pass props fill="none" to Svg component

[NorthwesternDirector]

I've got another problem, I updated my @react-pdf/renderer to 3.4.4 and added this to my webpack config alias: { 'react/jsx-runtime': 'react/jsx-runtime.js', }, but my app is not render at all

https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-8.x-to-9.x#webpack-based-applications-may-require-a-workaround @stevenKirill try this

[zergcore]

alias: { // existing 'react/jsx-runtime': 'react/jsx-runtime.js', },

How would I do this if I'm using vite instead of webpack?

[onyxadm]

I'm with problem in npm run build just existing webpack.config with param 'react/jsx-runtime':

C:\frontend>npm run build

[email protected] build react-scripts build

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

Module not found: Error: Can't resolve 'react/jsx-runtime' in 'C:\frontend\node_modules\react-pdf\dist\esm' 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.

As resolve this problems? Please, help-me.

[chenop]

Add the following to your webpack config.

alias: {
      // existing
      'react/jsx-runtime': 'react/jsx-runtime.js',
},

After that, run install and build commands again.

Just to make it clear its under resolve

resolve: {
	alias: {
		// existing
		'react/jsx-runtime': 'react/jsx-runtime.js',
	},
},

[1Jesper1]

I fixed it with:

	module: {
		rules: [
			{
				test: /\.m?js$/,
				resolve: {
				  fullySpecified: false,
				},
			},

[diegomura]

Unrelated to this lib