https://github.com/sfreifeld/avatar-testing

Ok I have been playing with this all day and can’t figure it out. I’m new to programming in general, but this is my first attempt with Typescript and with making a package.

Basically I made the avatarium package so that users can use the react Avatar component. For testing purposes I made the repo that has the package and a sample app made in vite, and I npm linked them.

When I try to build the sample app with the avatar component I get

error during build:
src/App.jsx (5:9): "Avatar" is not exported by "../avatarium/dist/main.js", imported by "src/App.jsx".
file: /Users/sabrinafreifeld/Desktop/npm/sample-app 2/src/App.jsx:5:9

But my index.tsx does export it

import { Avatar } from './components/Avatar';
export { Avatar };

And my webpack.config.js is using that index file for the compiled main.js file

const path = require('path');


const config = {
  context: __dirname,
  entry: {
    app: './src/index.tsx',
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    library: 'Avatarium',
    umdNamedDefine: true,
    globalObject: 'this',
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][name].[ext]',
            },
          },
        ],
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.tsx']
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
  },
  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'react',
      root: 'React'
    },
    'react-dom': {
      commonjs: 'react-dom',
      commonjs2: 'react-dom',
      amd: 'react-dom',
      root: 'ReactDOM'
    }
  }
};

module.exports = (env, argv) => {
  return config;
};

I’ve looked online and have tried a bunch of changes to the webpack config and to the package.json and I am completely out of ideas