You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Open
guymartinello opened this issue
Jun 20, 2024
· 2 comments
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:
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
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:
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?
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:
I have also tried as follows:
Within my SPFX project, I do not see a webpack file - but do have a webpack.extend.js which I have updated as follows:
I have also installed react-scripts - as shown below with the rest of package.json
tsconfig is as follows:
Note please that if I try to add "@types/react-tooltip" to the "types" array, I receive the following error:
My outdated modules - in the event that there are version dependencies:
Any help would be much appreciated.
The text was updated successfully, but these errors were encountered: