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']
}
}