Webpack (in prod) bundles give error: TypeError: (0 , tm.useEffect) is not a function...why?-CodePudding

The

Why? I found a similar question but didn't find an answer :

The error refer to this react component in my project:

import React, { useEffect } from "react"; import { useMutation } from "@apollo/client"; import { NEW_SESSION, newSessionVariables } from "../../graphql/newSession.js"; import { GET_TOTAL_SESSIONS_TODAY } from "../../graphql/getSessions"; import dayjs from "dayjs"; const sessionCreateDate = dayjs().format("M-D-YYYY"); const TimerAtZero = ({ timerState, toggle, user = { name: "" } }) => { const [createSession, { data, loading, error }] = useMutation(NEW_SESSION, { refetchQueries: [ { query: GET_TOTAL_SESSIONS_TODAY, variables: { sessionCreateDate, userName: user.name } }, ], }); const { endSession } = toggle; React.useEffect(() => { if (timerState.seconds === 0 && timerState.minutes === 0) { endSession(); createSession(newSessionVariables(user.name, timerState)); } }, [timerState.seconds, timerState.minutes]); if (loading) return <div>Submitting...</div>; if (error) return <div>{error.message}</div>; return null; }; export default TimerAtZero;

CodePudding user response：

Pointing an alias to a node module is an error. Just remove your resolve entry and everything should run fine.

const TerserPlugin = require("terser-webpack-plugin"); const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { ProvidePlugin, web } = require("webpack"); const cleanPlugin = require("clean-webpack-plugin"); module.exports = { mode: "production", devtool: "source-map", entry: ["regenerator-runtime/runtime.js", "./src/index.js"], output: { path: path.resolve(__dirname, "dist"), filename: "index_bundle.js", }, module: { rules: [ { test: /\.(jsx|js)$/, exclude: /[\\/]node_modules[\\/]/, use: { loader: "babel-loader", }, }, { test: /\.css$/, use: ["style-loader", "css-loader"], }, { test: /\.svg$/, use: { loader: "svg-url-loader", }, }, ], }, plugins: [ new HtmlWebpackPlugin({ template: "src/index.html", title: "Production", }), new ProvidePlugin({ React: "react", }), new cleanPlugin.CleanWebpackPlugin(), ], optimization: { minimize: true, minimizer: [ new TerserPlugin({ parallel: true, }), ], }, };

If it still crash, remove the ProvidePlugin and manually import React in the impacted files.

CodePudding user response：

First of all, don't use minified version for finding bugs, it usually shows issues in a weird way that doesn't make sense. Using optimization.minimize = false in webpack can help with that.

There are cases to look out for when you are using webpack ProvidePlugin.

The tools that you use for linting, type checking, analyzers, ... should also be configured to detect that global import, which is more work and maintenance in other config files.

For example for eslint you can do this:

{ "globals": { "ReactDOM": true } }

If you choose to change your bundler someday, then you are gonna have a hard time if the other bundler doesn't support something like ProvidePlugin.

And also new developers might get confused at first if they didn't know about ProvidePlugin. But everyone knows about the import!

Considering these issues, in the end, it's up to you and your project need to see if it's worth using ProvidePlugin or not.

If you are using ProvidePlugin only because it's hard to type import react every time, then you need to use snippets in your editor. For example, in VSCode there is a plugin that has this kind of snippets. Or you can create your own snippets if you want.