Can't import the named export 'useState' from non EcmaScript module (only default export is available) Can't import the named export 'useState' from non EcmaScript module (only default export is available)

[guymartinello]

I have a react functional SPFx component in VS Code and use SPFX-fast-serve.
I am trying to use react-tooltip "react-tooltip": "^5.27.0", as installed via npm
I then use that within a functional component as follows:

npm ls react-tooltip
[email protected] C:\Users\Guy.Martinello\Documents\repos\Approvals
├─┬ @types/[email protected]
│ └── [email protected] deduped
└── [email protected]

import ReactTooltip from 'react-tooltip';

<ReactTooltip
	id="RequestReasonTooltip"
	place="bottom"
	content="Hello world! I'm a Tooltip"
/>

I have also tried as follows:

import { Tooltip } from 'react-tooltip'
<Tooltip
      id="RequestReasonTooltip"
      place="bottom"
      content="Hello world! I'm a Tooltip"
  />

./lib/webparts/traceApprovals/components/ApprovalRequests/ApprovalRequest.js
 @ ./lib/webparts/traceApprovals/components/Header.js
 @ ./lib/webparts/traceApprovals/components/TraceApprovals.js
 @ ./lib/webparts/traceApprovals/TraceApprovalsWebPart.js
./node_modules/react-tooltip/dist/react-tooltip.min.mjs 7:15955-15956
Can't import the named export 'useState' from non EcmaScript module (only default export is available)

Within my SPFX project, I do not see a webpack file - but do have a webpack.extend.js which I have updated as follows:

module.exports = function (buildOptions, webpackConfig) {
    // Your custom webpack configurations go here. For example:
    webpackConfig.resolve.alias = {
        "react-dom$": "react-dom/profiling",
    };

    // Add the rule for .mjs files
    webpackConfig.module.rules.push({
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
    });

    return webpackConfig;
};

I have also installed react-scripts - as shown below with the rest of package.json

{
    "name": "approvals",
    "version": "2024.02.29",
    "private": true,
    "engines": {
        "node": ">=16.13.0 <17.0.0 || >=18.17.1 <19.0.0"
    },
    "main": "lib/index.js",
    "scripts": {
        "build": "gulp bundle",
        "clean": "gulp clean",
        "test": "gulp test",
        "typecheck": "tsc",
        "typecheck:watch": "tsc -w",
        "serve": "fast-serve"
    },
    "dependencies": {
        "@emotion/react": "^11.11.4",
        "@emotion/styled": "^11.11.5",
        "@fluentui/react": "^7.204.0",
        "@microsoft/sp-component-base": "1.18.0",
        "@microsoft/sp-core-library": "1.18.0",
        "@microsoft/sp-lodash-subset": "1.18.0",
        "@microsoft/sp-office-ui-fabric-core": "1.18.0",
        "@microsoft/sp-property-pane": "1.18.0",
        "@microsoft/sp-webpart-base": "1.18.0",
        "@mui/material": "^5.15.20",
        "@pnp/graph": "^3.12.1",
        "@pnp/logging": "^3.18.0",
        "@pnp/sp": "^3.6.0",
        "@pnp/sp-commonjs": "^2.15.0",
        "@pnp/spfx-controls-react": "3.15.0",
        "immer": "^10.0.3",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "react-scripts": "^5.0.1",
        "react-tooltip": "^5.27.0",
        "tslib": "2.3.1"
    },
    "devDependencies": {
        "@microsoft/eslint-config-spfx": "1.18.0",
        "@microsoft/eslint-plugin-spfx": "1.18.0",
        "@microsoft/rush-stack-compiler-4.7": "0.1.0",
        "@microsoft/sp-build-web": "1.18.0",
        "@microsoft/sp-module-interfaces": "1.18.0",
        "@rushstack/eslint-config": "2.5.1",
        "@types/react": "17.0.45",
        "@types/react-dom": "17.0.17",
        "@types/react-tooltip": "^4.2.4",
        "@types/webpack-env": "~1.15.2",
        "ajv": "^6.12.5",
        "eslint": "8.7.0",
        "eslint-plugin-react-hooks": "4.3.0",
        "gulp": "4.0.2",
        "spfx-fast-serve-helpers": "~1.18.0",
        "typescript": "4.7.4"
    }
}

tsconfig is as follows:

{
    "extends": "./node_modules/@microsoft/rush-stack-compiler-4.7/includes/tsconfig-web.json",
    "compilerOptions": {
        "target": "es2017",
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "jsx": "react",
        "declaration": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "skipLibCheck": true,
        "outDir": "lib",
        "inlineSources": false,
        "noImplicitAny": true,
        "noUnusedParameters": false,
        "noUnusedLocals": false,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "typeRoots": [
            "./node_modules/@types",
            "./node_modules/@microsoft",
            "@types/react-tooltip"
        ],
        "types": [
            "webpack-env",
        ],
        "lib": [
            "es2017",
            "dom",
            "es2015.collection",
            "es2015.promise"
        ]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "declaration.d.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

Note please that if I try to add "@types/react-tooltip" to the "types" array, I receive the following error:

[{
	"resource": "/c:/Users/Guy.Martinello/Documents/repos/Approvals/tsconfig.json",
	"owner": "typescript",
	"severity": 8,
	"message": "Cannot find type definition file for '@types/react-tooltip'.\n  The file is in the program because:\n    Entry point of type library '@types/react-tooltip' specified in compilerOptions",
	"source": "ts",
	"startLineNumber": 1,
	"startColumn": 1,
	"endLineNumber": 1,
	"endColumn": 2
}]

My outdated modules - in the event that there are version dependencies:

npm outdated
Package                              Current   Wanted   Latest  Location                                          Depended by
@fluentui/react                      7.204.0  7.204.0  8.118.8  node_modules/@fluentui/react                      Approvals
@microsoft/eslint-config-spfx         1.18.0   1.18.0   1.20.1  node_modules/@microsoft/eslint-config-spfx        Approvals
@microsoft/eslint-plugin-spfx         1.18.0   1.18.0   1.20.1  node_modules/@microsoft/eslint-plugin-spfx        Approvals
@microsoft/rush-stack-compiler-4.7     0.1.0    0.1.0    0.1.1  node_modules/@microsoft/rush-stack-compiler-4.7   Approvals
@microsoft/sp-build-web               1.18.0   1.18.0   1.20.1  node_modules/@microsoft/sp-build-web              Approvals
@microsoft/sp-component-base          1.18.0   1.18.0   1.19.0  node_modules/@microsoft/sp-component-base         Approvals
@microsoft/sp-core-library            1.18.0   1.18.0   1.19.0  node_modules/@microsoft/sp-core-library           Approvals
@microsoft/sp-lodash-subset           1.18.0   1.18.0   1.19.0  node_modules/@microsoft/sp-lodash-subset          Approvals
@microsoft/sp-module-interfaces       1.18.0   1.18.0   1.20.1  node_modules/@microsoft/sp-module-interfaces      Approvals
@microsoft/sp-office-ui-fabric-core   1.18.0   1.18.0   1.19.0  node_modules/@microsoft/sp-office-ui-fabric-core  Approvals
@microsoft/sp-property-pane           1.18.0   1.18.0   1.19.0  node_modules/@microsoft/sp-property-pane          Approvals
@microsoft/sp-webpart-base            1.18.0   1.18.0   1.19.0  node_modules/@microsoft/sp-webpart-base           Approvals
@pnp/graph                            3.12.1   3.25.0    4.2.0  node_modules/@pnp/graph                           Approvals
@pnp/logging                          3.18.0   3.25.0    4.2.0  node_modules/@pnp/logging                         Approvals
@pnp/sp                                3.6.0   3.25.0    4.2.0  node_modules/@pnp/sp                              Approvals
@pnp/spfx-controls-react              3.15.0   3.15.0   3.18.1  node_modules/@pnp/spfx-controls-react             Approvals
@rushstack/eslint-config               2.5.1    2.5.1    3.7.0  node_modules/@rushstack/eslint-config             Approvals
@types/react                         17.0.45  17.0.45   18.3.3  node_modules/@types/react                         Approvals
@types/react-dom                     17.0.17  17.0.17   18.3.0  node_modules/@types/react-dom                     Approvals
@types/webpack-env                    1.15.3   1.15.3   1.18.5  node_modules/@types/webpack-env                   Approvals
ajv                                   6.12.6   6.12.6   8.16.0  node_modules/ajv                                  Approvals
eslint                                 8.7.0    8.7.0    9.5.0  node_modules/eslint                               Approvals
eslint-plugin-react-hooks              4.3.0    4.3.0    4.6.2  node_modules/eslint-plugin-react-hooks            Approvals
gulp                                   4.0.2    4.0.2    5.0.0  node_modules/gulp                                 Approvals
immer                                 10.0.3   10.1.1   10.1.1  node_modules/immer                                Approvals
react                                 17.0.1   17.0.1   18.3.1  node_modules/react                                Approvals
react-dom                             17.0.1   17.0.1   18.3.1  node_modules/react-dom                            Approvals
tslib                                  2.3.1    2.3.1    2.6.3  node_modules/tslib                                Approvals
typescript                             4.7.4    4.7.4    5.4.5  node_modules/typescript                           Approvals

Any help would be much appreciated.

[gabrieljablonski]

As you've probably seen on our troubleshooting page, the rule you added to the webpack config should fix this issue.

Best I can think of is that it's not getting applied correctly, but I'm unfamiliar with your setup to be able to say for certain. Also not sure how it being an SPFx project would break anything, never worked with it.

Also, @types/react-tooltip was for v4, so don't bother with that for v5.

Are you able to provide a sample repo that mirrors the basic configurations from your project so we can reproduce the issue?