Repository navigation
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
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
approvals@2024.02.29 C:\Users\Guy.Martinello\Documents\repos\Approvals
├─┬ @types/react-tooltip@4.2.4
│ └── react-tooltip@5.27.0 deduped
└── react-tooltip@5.27.0
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.
Activity
gabrieljablonski commentedon Jun 20, 2024
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-tooltipwas 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?
github-actions commentedon Sep 19, 2024
This issue is stale because it has not seen activity in 30 days. Remove the
stalelabel or comment within 14 days, or it will be closed.