Skip to content

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) #1198

Closed
@guymartinello

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugStaleThis has not seen activity in quite some time

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions