0

I'm writing a library whose exports are a React hook and component. I've added the library to the dependencies of a local app to test it. Unfortunately, the exports from the library are not working as I expected. I'm getting console errors indicating that the export is undefined, which is usually caused by incorrectly importing default vs. named exports, however, I've double checked that I am importing them correctly so I'm not sure what the problem is.

Here is the entry point for the library:

import GoogleLoginButton from './components/google-login-button/google-login-button'
import useGoogleLogin from './hooks/use-google-login'

// These console logs reveal that the component & hook are
// being imported as expected in this file.
console.log(GoogleLoginButton)
console.log(useGoogleLogin)

export { GoogleLoginButton, useGoogleLogin }

Here is the (simplified) app code where I import from the library:

import { GoogleLoginButton } from 'react-google-identity'
import styles from './login-page.module.css'

const LoginPage = props => {
  // This console.log indicates that GoogleLoginButton is undefined.
  console.log(GoogleLoginButton)

  return(
    <div className={styles.root}>
      <GoogleLoginButton />
    </div>
}

export default LoginPage

It seems that export { GoogleLoginButton, useGoogleLogin } is not exporting these as named exports, however, I'm not sure why that would be happening as I think the syntax is correct.

This is my first time writing a standalone library like this in JavaScript so I'm sure it's a rookie mistake but Googling only indicates that the error is caused by misusing default vs. named exports, which I don't believe I'm doing.

ETA package.json for the library:

{
  "name": "react-google-identity",
  "version": "0.1.0",
  "description": "Library to support Sign In With Google in React",
  "main": "./dist/main.js",
  "repository": "https://github.com/danascheider/react-google-identity.git",
  "author": "Dana Scheider <dana.scheider@gmail.com>",
  "license": "SEE LICENSE IN LICENSE.md",
  "private": false,
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "lint": "prettier ./src ./__tests__",
    "lint:fix": "prettier --write ./src ./__tests__",
    "build": "webpack build --entry ../src/sign-in-with-google.js",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "classnames": "^2.3.1",
    "prop-types": "^15.8.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "webpack": "^5.73.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@babel/preset-react": "^7.17.12",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/builder-webpack4": "^6.5.9",
    "@storybook/cli": "^6.0.28",
    "@storybook/manager-webpack4": "^6.5.9",
    "@storybook/react": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "babel-jest": "^28.1.1",
    "babel-loader": "^8.2.5",
    "css-loader": "^6.7.1",
    "fetch-mock": "^9.11.0",
    "jest": "^28.1.1",
    "jest-environment-jsdom": "^28.1.1",
    "jsdom": "^19.0.0",
    "msw": "^0.42.3",
    "pre-commit": "^1.2.2",
    "prettier": "^2.7.1",
    "react-test-renderer": "^18.2.0",
    "storybook": "^6.0.28",
    "storybook-addon-mock": "^2.4.1",
    "storybook-css-modules": "^1.0.7",
    "style-loader": "^3.3.1",
    "webpack-cli": "^4.10.0"
  },
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "prettier": {
    "semi": false,
    "singleQuote": true,
    "trailingComma": "es5",
    "arrowParens": "avoid",
    "jsxSingleQuote": true
  },
  "bugs": {
    "url": "https://github.com/danascheider/react-google-identity/issues"
  },
  "pre-commit": [
    "test",
    "lint"
  ],
  "keywords": [
    "react",
    "reactjs",
    "google-login",
    "google-signin",
    "google-oauth2",
    "sign-in-with-google",
    "google-oauth"
  ],
  "msw": {
    "workerDirectory": "msw"
  }
}

Babel config for the library:

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"]
}

Webpack config for the library:

module.exports = {
  mode: 'development',
  context: __dirname + '/src',
  entry: __dirname + '/src/sign-in-with-google.js',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(js|jsx)$/i,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-env', '@babel/preset-react']
        }
      }
    ]
  },
  resolve: {
    modules: [__dirname + '/node_modules']
  }
}
Dana Scheider
  • 389
  • 3
  • 15
  • This should indeed work. Since you say "library", you're not having any circular dependencies between the modules I guess? Are you using a transpiler? How does the *package.json* of the library look like? What happens if you do a namespace import and log it? – Bergi Jun 29 '22 at 23:21
  • (1) I have indeed added it to the node_modules folder of the test app. (2) I've edited the question to include the package.json and webpack/babel configs of the library. – Dana Scheider Jun 29 '22 at 23:26
  • Oh and sorry - what do you mean by a "namespace import"? – Dana Scheider Jun 29 '22 at 23:27
  • First of all I'm missing a [`"type": "module"`](https://nodejs.org/api/packages.html#type) in the *package.json*. And are you certain that */dist/main.js* actually has any `export` declarations? It seems you've configured webpack to build an application, not to [build a library](https://webpack.js.org/guides/author-libraries/#authoring-a-library). – Bergi Jun 29 '22 at 23:28
  • I assumed that `/dist/main.js` would export anything that was exported from the entrypoint, is that not the case? What I see in there is: `var __webpack_exports__ = __webpack_require__("./sign-in-with-google.js");`. Also adding "type": "module" results in an error, "module is not defined in ES module scope" – Dana Scheider Jun 29 '22 at 23:33
  • Have a look at [Outputting Library as ES6 module with webpack?](https://stackoverflow.com/q/65781464/1048572) and [Use Webpack 5 to build an ES module bundle, and consume that bundle in a Node.js ES module](https://stackoverflow.com/q/68913996/1048572) – Bergi Jun 29 '22 at 23:39

0 Answers0