fix: ERR_PACKAGE_PATH_NOT_EXPORTED when react 18 is installed in project (#242)

Author: Julusian

src/transpiler/__tests__/__snapshots__/transpiler.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Transpiler should keep names of files, even if special chars with a simple setup and import correctly 1`] = `
 "'use strict';
 
-var jsxRuntime = require('react/cjs/react-jsx-runtime.production.min');
+var jsxRuntime = require('/full/path/to/react/cjs/react-jsx-runtime.production.min.js');
 require('source-map-support/register');
 var path = require('path');
 
@@ -36,7 +36,7 @@ exports[`Transpiler should keep names of files, even if special chars with a sim
 exports[`Transpiler should transpile CommonJS files with a simple setup and import correctly 1`] = `
 "'use strict';
 
-var jsxRuntime = require('react/cjs/react-jsx-runtime.production.min');
+var jsxRuntime = require('/full/path/to/react/cjs/react-jsx-runtime.production.min.js');
 require('source-map-support/register');
 
 /* eslint-disable no-undef */
@@ -67,7 +67,7 @@ exports[`Transpiler should transpile CommonJS files with a simple setup and impo
 exports[`Transpiler should transpile ES5 files with a simple setup and import correctly 1`] = `
 "'use strict';
 
-var jsxRuntime = require('react/cjs/react-jsx-runtime.production.min');
+var jsxRuntime = require('/full/path/to/react/cjs/react-jsx-runtime.production.min.js');
 require('source-map-support/register');
 var path = require('path');
 
@@ -102,7 +102,7 @@ exports[`Transpiler should transpile ES5 files with a simple setup and import co
 exports[`Transpiler should transpile ES6 files with a simple setup and import correctly 1`] = `
 "'use strict';
 
-var jsxRuntime = require('react/cjs/react-jsx-runtime.production.min');
+var jsxRuntime = require('/full/path/to/react/cjs/react-jsx-runtime.production.min.js');
 require('source-map-support/register');
 var path = require('path');
 

src/transpiler/__tests__/transpiler.spec.tsx

@@ -32,9 +32,9 @@ describe('Transpiler', () => {
 
       test('and import correctly', async () => {
         const content = await readFile(commonjs_testFile, 'utf8');
-        expect(switchToUnixLinebreaks(content)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(content))).toMatchSnapshot();
         const mapContent = await readFile(commonjs_testFileMap, 'utf8');
-        expect(switchToUnixLinebreaks(mapContent)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(mapContent))).toMatchSnapshot();
         expect(await import(commonjs_testFile)).toBeDefined();
       });
 
@@ -52,9 +52,9 @@ describe('Transpiler', () => {
 
       test('and import correctly', async () => {
         const content = await readFile(es5_testFile, 'utf8')
-        expect(switchToUnixLinebreaks(content)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(content))).toMatchSnapshot();
         const mapContent = await readFile(es5_testFileMap, 'utf8');
-        expect(switchToUnixLinebreaks(mapContent)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(mapContent))).toMatchSnapshot();
         expect(await import(es5_testFile)).toBeDefined();
       });
 
@@ -72,9 +72,9 @@ describe('Transpiler', () => {
 
       test('and import correctly', async () => {
         const content = await readFile(es6_testFile, 'utf8')
-        expect(switchToUnixLinebreaks(content)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(content))).toMatchSnapshot();
         const mapContent = await readFile(es6_testFileMap, 'utf8');
-        expect(switchToUnixLinebreaks(mapContent)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(mapContent))).toMatchSnapshot();
         expect(await import(es6_testFile)).toBeDefined();
       });
 
@@ -92,9 +92,9 @@ describe('Transpiler', () => {
 
       test('and import correctly', async () => {
         const content = await readFile(special_testFile, 'utf8');
-        expect(switchToUnixLinebreaks(content)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(content))).toMatchSnapshot();
         const mapContent = await readFile(special_testFileMap, 'utf8');
-        expect(switchToUnixLinebreaks(mapContent)).toMatchSnapshot();
+        expect(stripAbsolutePathToReactLib(switchToUnixLinebreaks(mapContent))).toMatchSnapshot();
         expect(await import(special_testFile)).toBeDefined();
       });
 
@@ -110,6 +110,15 @@ describe('Transpiler', () => {
   It is a helper required for snapshot testing on windows. It can't be solved by editor configuration and the end line setting because snapshots are generated not created in the editor.
   We need to remove `\r` from files transpiled on windows before we can match them with the snapshot generated on unix
 */
-function switchToUnixLinebreaks(str: String) {
+function switchToUnixLinebreaks(str: string) {
   return str.replace(/\\r/g, "")
+}
+
+/*
+  The transpiler embeds the absolute path to the react library.
+  We need to replace this in snapshots with something that will be stable across developer environments.
+*/
+function stripAbsolutePathToReactLib(str: string) {
+  const reactPath = require.resolve('react/cjs/react-jsx-runtime.production.min').replace(/\\/g, '/')
+  return str.replace(reactPath, "/full/path/to/react/cjs/react-jsx-runtime.production.min.js")
 }

src/transpiler/transpiler.ts

@@ -52,7 +52,7 @@ export async function transpileFiles(directory: string, outputDir: string, optio
             dir: outputDir,
             exports: "auto",
             paths: {
-              'react/jsx-runtime': 'react/cjs/react-jsx-runtime.production.min',
+              'react/jsx-runtime': require.resolve('react/cjs/react-jsx-runtime.production.min').replace(/\\/g, '/'),
             },
             sanitizeFileName: false,
         })