Importing packages from multipackage component ibrary results in errors: Module not found: Error: Can't resolve ...

[onesneakymofo]

Hey all,

I am trying to take my team's component library that is written in twin.macro / typescript / emotion / storybook and move it over to its own multipackage component library using preconstruct, yarn workspaces, and changesets.

I have the component library working somewhat here:

https://github.com/onesneakymofo/takeoff (start with yarn start-storybook)

This allows me to export all of my components as their own npm package so we can move them around however we want to.

The problem is when I publish my package and try to import it like so

import { LoadSpinner } from "@onesneakymofo/test-load-spinner";

I'm getting all sorts of fun errors (see below).

I feel like it is related to typescript / babel / webpack config as I switched the button to be strictly JS-related, and that works.

Here is the other app where I am importing (start with yarn start):

https://github.com/onesneakymofo/test-app

I have tried everything including looking at the yarn worksapces example to no avail. I'm way in over my head right now as I have rarely touched twin.macro and I'm still learning Typescript so any help is appreciated.

Thanks.

Errors:

Compiled with problems:X

WARNING in ./node_modules/babel-plugin-macros/dist/index.js 78:24-31

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted


WARNING in ./node_modules/import-fresh/index.js 33:32-49

Critical dependency: the request of a dependency is an expression


WARNING in ./node_modules/twin.macro/macro.js 4128:31-50

Critical dependency: the request of a dependency is an expression


ERROR in ./node_modules/babel-plugin-macros/dist/index.js 9:10-25

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/babel-plugin-macros/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/Explorer.js 8:35-50

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/ExplorerBase.js 9:35-50

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/ExplorerSync.js 8:35-50

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/getDirectory.js 9:35-50

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js 10:33-46

Module not found: Error: Can't resolve 'os' in '/Users/onesneakymofo/code/my-app/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
  - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "os": false }


ERROR in ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/readFile.js 9:33-46

Module not found: Error: Can't resolve 'fs' in '/Users/onesneakymofo/code/my-app/node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist'


ERROR in ./node_modules/error-ex/index.js 3:11-26

Module not found: Error: Can't resolve 'util' in '/Users/onesneakymofo/code/my-app/node_modules/error-ex'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
  - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "util": false }


ERROR in ./node_modules/import-fresh/index.js 3:13-28

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/import-fresh'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js 3:13-28

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/import-fresh/node_modules/resolve-from'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js 5:15-32

Module not found: Error: Can't resolve 'module' in '/Users/onesneakymofo/code/my-app/node_modules/import-fresh/node_modules/resolve-from'


ERROR in ./node_modules/import-fresh/node_modules/resolve-from/index.js 7:11-24

Module not found: Error: Can't resolve 'fs' in '/Users/onesneakymofo/code/my-app/node_modules/import-fresh/node_modules/resolve-from'


ERROR in ./node_modules/path-type/index.js 5:4-19

Module not found: Error: Can't resolve 'util' in '/Users/onesneakymofo/code/my-app/node_modules/path-type'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }'
  - install 'util'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "util": false }


ERROR in ./node_modules/path-type/index.js 7:11-24

Module not found: Error: Can't resolve 'fs' in '/Users/onesneakymofo/code/my-app/node_modules/path-type'


ERROR in ./node_modules/resolve/lib/async.js 1:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/onesneakymofo/code/my-app/node_modules/resolve/lib'


ERROR in ./node_modules/resolve/lib/async.js 3:11-26

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/resolve/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/resolve/lib/node-modules-paths.js 1:11-26

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/resolve/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/resolve/lib/sync.js 3:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/onesneakymofo/code/my-app/node_modules/resolve/lib'


ERROR in ./node_modules/resolve/lib/sync.js 5:11-26

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/resolve/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/twin.macro/macro.js 13:11-26

Module not found: Error: Can't resolve 'path' in '/Users/onesneakymofo/code/my-app/node_modules/twin.macro'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
  - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
  - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
  resolve.fallback: { "path": false }


ERROR in ./node_modules/twin.macro/macro.js 15:9-22

Module not found: Error: Can't resolve 'fs' in '/Users/onesneakymofo/code/my-app/node_modules/twin.macro'

[ben-rogerson]

hey how are you going with this? Managed to fix any of those errors?