Closed
Description
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.