Using a packaged linked via npm link in create-react-app leads to webpack error: module has no exports

Question

I am developing a React hook locally, and trying to test it in an adjacent create-react-app project (under folder example/). However, importing said linked module results in the following errors:

Attempted import error: 'usePleaseStay' is not exported from 'react-use-please-stay' (imported as 'usePleaseStay').
ERROR in ./src/App.tsx 10:2-15
export 'usePleaseStay' (imported as 'usePleaseStay') was not found in 'react-use-please-stay' (module has no exports)

ERROR in ./src/App.tsx 14:10-23
export 'usePleaseStay' (imported as 'usePleaseStay') was not found in 'react-use-please-stay' (module has no exports)

My App.tsx:

import React from 'react';
import { usePleaseStay } from 'react-use-please-stay';

function App() {
  usePleaseStay(["Title One!", "Title Two!", "Title Three?!?"]);
  return (
    <></>
  );
}

export default App;

The file I'm brought to when I cmd+click react-use-please-stay:

export { usePleaseStay } from './hooks/usePleaseStay';

This is as expected, correctly the dist/index.d.ts file from my hook's source code. Clearly, there is an export there!

Output of npm ls --location=global --depth=0 --link=true:

react-use-please-stay@1.0.0 -> ./../../../../../projects/react-use-please-stay

What in the world is going on here? Is this the classic issue of create-react-app obfuscating too many webpack decisions from us?

Any assistance is greatly appreciated.

score 0 · Answer 1 · answered Nov 11 '22 at 19:47

Ah, figured it out. Was just a one liner. I was packaging my module to Common JS. This doesn't play nicely with create-react-app's Webpack config. I resolve the issue by changing my rollup.config.js from:

import typescript from '@rollup/plugin-typescript';
import pkg from './package.json' assert { type: "json" };

export default {
  input: 'src/index.ts',
  output: {
    file: pkg.main,
    format: 'cjs',
    sourcemap: true,
    strict: false,
  },
  plugins: [typescript()],
  external: ['react']
};

to:

import typescript from '@rollup/plugin-typescript';
import pkg from './package.json' assert { type: "json" };

export default {
  input: 'src/index.ts',
  output: {
    file: pkg.main,
    format: 'module',
    sourcemap: true,
    strict: false,
  },
  plugins: [typescript()],
  external: ['react']
};

Just changing format: 'cjs' to format: 'module'

Using a packaged linked via npm link in create-react-app leads to webpack error: module has no exports

1 Answers1