Open
Description
What version of design-system are you using?
After update Strapi 4 to Strapi 5
And try to command npm run develop showing this following errors:
⠧ Loading Strapi(node:97298) Warning: [deprecated] In future versions, Strapi will stop reading directly from the environment variable API_TOKEN_SALT. Please set apiToken.salt in config/admin.js instead.
For security reasons, keep storing the secret in an environment variable and use env() to read it in config/admin.js (ex: `apiToken: { salt: env('API_TOKEN_SALT') }`). See https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html#configuration-using-environment-variables.
(Use `node --trace-warnings ...` to show where the warning was created)
(node:97298) Warning: Missing transfer.token.salt: Data transfer features have been disabled.
Please set transfer.token.salt in config/admin.js (ex: you can generate one using Node with `crypto.randomBytes(16).toString('base64')`)
For security reasons, prefer storing the secret in an environment variable and read it in config/admin.js. See https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html#configuration-using-environment-variables.
⠋ Building build context
[INFO] Including the following ENV variables as part of the JS bundle:
- ADMIN_PATH
- STRAPI_ADMIN_BACKEND_URL
- STRAPI_TELEMETRY_DISABLED
✔ Building build context (10ms)
✔ Creating admin (175ms)
✔ Loading Strapi (2649ms)
✔ Generating types (301ms)
Project information
┌────────────────────┬──────────────────────────────────────────────────┐
│ Time │ Mon Mar 17 2025 16:28:14 GMT+0600 (Bangladesh S… │
│ Launched in │ 2956 ms │
│ Environment │ development │
│ Process PID │ 97298 │
│ Version │ 5.11.2 (node v20.16.0) │
│ Edition │ Community │
│ Database │ postgres │
│ Database name │ heroku-backup-b057 │
└────────────────────┴──────────────────────────────────────────────────┘
Actions available
Welcome back!
To access the server ⚡️, go to:
http://localhost:1337
[2025-03-17 16:28:14.103] info: Strapi started successfully
[2025-03-17 16:28:16.125] http: GET /admin (40 ms) 200
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-redirects/admin/screens/Redirect/index.js:10:4:
10 │ <div>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:506:4:
506 │ <TextInput
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-permalinks/admin/src/contentManagerHooks/filter-permalink-columns.js:34:15:
34 │ return <ListViewColumn isOrphan={isOrphan} ancestorsPath={ancestorsPath} slug={slug} />;
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-redirects/admin/screens/Redirect/DetailPage/index.js:127:4:
127 │ <Box>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-redirects/admin/screens/Redirect/OverviewPage/index.js:152:4:
152 │ <Box>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-permalinks/admin/src/components/CustomFieldIcon/index.js:4:2:
4 │ <svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:8:4:
8 │ <Box
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-permalinks/admin/src/components/CopyLinkButton/index.js:26:4:
26 │ <CopyToClipboard text={url} onCopy={handleOnCopy}>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-permalinks/admin/src/components/EditViewRightLinks/index.js:16:9:
16 │ return <CopyLinkButton url={url} />;
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/PluginIcon/index.js:4:25:
4 │ const PluginIcon = () => <Icon />;
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/pages/App/index.js:10:4:
10 │ <div>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportButton/ImportButton.js:25:4:
25 │ <CheckPermissions permissions={pluginPermissions.importButton}>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/InjectedImportExportSingleType/InjectedImportExportSingleType.js:15:4:
15 │ <CheckPermissions permissions={pluginPermissions.main}>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/Injected/Alerts/Alerts.js:12:4:
12 │ <Portal>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/InjectedExportCollectionType/InjectedExportCollectionType.js:6:9:
6 │ return <ExportButton unavailableOptions={['exportPluginsContentTypes']} />;
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] Could not resolve "@strapi/design-system/TextInput"
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:5:26:
5 │ import { TextInput } from '@strapi/design-system/TextInput';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Importing the directory "./dist/TextInput" is forbidden by this package:
node_modules/@strapi/design-system/package.json:23:11:
23 │ "./*": "./dist/*"
╵ ~~~~~~~~~~
The presence of "exports" here makes importing a directory forbidden:
node_modules/@strapi/design-system/package.json:9:2:
9 │ "exports": {
╵ ~~~~~~~~~
Import from "@strapi/design-system/TextInput/index.js" to get the file
"node_modules/@strapi/design-system/dist/TextInput/index.js":
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:5:58:
5 │ import { TextInput } from '@strapi/design-system/TextInput';
│ ^
╵ /index.js
You can mark the path "@strapi/design-system/TextInput" as external to exclude it from the bundle,
which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportButton/ExportButton.js:25:4:
25 │ <CheckPermissions permissions={pluginPermissions.exportButton}>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] Could not resolve "@strapi/design-system/Box"
node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:3:20:
3 │ import { Box } from '@strapi/design-system/Box';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
Importing the directory "./dist/Box" is forbidden by this package:
node_modules/@strapi/design-system/package.json:23:11:
23 │ "./*": "./dist/*"
╵ ~~~~~~~~~~
The presence of "exports" here makes importing a directory forbidden:
node_modules/@strapi/design-system/package.json:9:2:
9 │ "exports": {
╵ ~~~~~~~~~
Import from "@strapi/design-system/Box/index.js" to get the file
"node_modules/@strapi/design-system/dist/Box/index.js":
node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:3:46:
3 │ import { Box } from '@strapi/design-system/Box';
│ ^
╵ /index.js
You can mark the path "@strapi/design-system/Box" as external to exclude it from the bundle, which
will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@strapi/design-system/Typography"
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:6:27:
6 │ import { Typography } from '@strapi/design-system/Typography';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Importing the directory "./dist/Typography" is forbidden by this package:
node_modules/@strapi/design-system/package.json:23:11:
23 │ "./*": "./dist/*"
╵ ~~~~~~~~~~
The presence of "exports" here makes importing a directory forbidden:
node_modules/@strapi/design-system/package.json:9:2:
9 │ "exports": {
╵ ~~~~~~~~~
Import from "@strapi/design-system/Typography/index.js" to get the file
"node_modules/@strapi/design-system/dist/Typography/index.js":
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/index.js:6:60:
6 │ import { Typography } from '@strapi/design-system/Typography';
│ ^
╵ /index.js
You can mark the path "@strapi/design-system/Typography" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@strapi/design-system/Typography"
node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:4:27:
4 │ import { Typography } from '@strapi/design-system/Typography';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Importing the directory "./dist/Typography" is forbidden by this package:
node_modules/@strapi/design-system/package.json:23:11:
23 │ "./*": "./dist/*"
╵ ~~~~~~~~~~
The presence of "exports" here makes importing a directory forbidden:
node_modules/@strapi/design-system/package.json:9:2:
9 │ "exports": {
╵ ~~~~~~~~~
Import from "@strapi/design-system/Typography/index.js" to get the file
"node_modules/@strapi/design-system/dist/Typography/index.js":
node_modules/strapi-plugin-permalinks/admin/src/components/ListViewColumn/index.js:4:60:
4 │ import { Typography } from '@strapi/design-system/Typography';
│ ^
╵ /index.js
You can mark the path "@strapi/design-system/Typography" as external to exclude it from the
bundle, which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/pages/HomePage/HomePage.js:27:4:
27 │ <CheckPagePermissions permissions={pluginPermissions.main}>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportModal/ImportModal.js:156:4:
156 │ <Portal>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-redirects/admin/components/RedirectForm/index.js:56:4:
56 │ <form onSubmit={formik.handleSubmit}>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/AncestorsPath.js:8:4:
8 │ <PathLabel hasError={hasError}>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-redirects/admin/components/InjectedImportButton/index.js:25:4:
25 │ <>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-redirects/admin/components/TableHead/index.js:9:4:
9 │ <Thead>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportModal/ExportModal.js:90:4:
90 │ <Portal>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/Header/Header.js:10:4:
10 │ <Box background="neutral100">
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] Could not resolve "@strapi/design-system/Box"
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:2:20:
2 │ import { Box } from '@strapi/design-system/Box';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~
Importing the directory "./dist/Box" is forbidden by this package:
node_modules/@strapi/design-system/package.json:23:11:
23 │ "./*": "./dist/*"
╵ ~~~~~~~~~~
The presence of "exports" here makes importing a directory forbidden:
node_modules/@strapi/design-system/package.json:9:2:
9 │ "exports": {
╵ ~~~~~~~~~
Import from "@strapi/design-system/Box/index.js" to get the file
"node_modules/@strapi/design-system/dist/Box/index.js":
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:2:46:
2 │ import { Box } from '@strapi/design-system/Box';
│ ^
╵ /index.js
You can mark the path "@strapi/design-system/Box" as external to exclude it from the bundle, which
will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@strapi/design-system/Field"
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:3:28:
3 │ import { FieldAction } from '@strapi/design-system/Field';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Importing the directory "./dist/Field" is forbidden by this package:
node_modules/@strapi/design-system/package.json:23:11:
23 │ "./*": "./dist/*"
╵ ~~~~~~~~~~
The presence of "exports" here makes importing a directory forbidden:
node_modules/@strapi/design-system/package.json:9:2:
9 │ "exports": {
╵ ~~~~~~~~~
Import from "@strapi/design-system/Field/index.js" to get the file
"node_modules/@strapi/design-system/dist/Field/index.js":
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:3:56:
3 │ import { FieldAction } from '@strapi/design-system/Field';
│ ^
╵ /index.js
You can mark the path "@strapi/design-system/Field" as external to exclude it from the bundle,
which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] Could not resolve "@strapi/design-system/Flex"
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:4:21:
4 │ import { Flex } from '@strapi/design-system/Flex';
╵ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Importing the directory "./dist/Flex" is forbidden by this package:
node_modules/@strapi/design-system/package.json:23:11:
23 │ "./*": "./dist/*"
╵ ~~~~~~~~~~
The presence of "exports" here makes importing a directory forbidden:
node_modules/@strapi/design-system/package.json:9:2:
9 │ "exports": {
╵ ~~~~~~~~~
Import from "@strapi/design-system/Flex/index.js" to get the file
"node_modules/@strapi/design-system/dist/Flex/index.js":
node_modules/strapi-plugin-permalinks/admin/src/components/PermalinkInput/styled.js:4:48:
4 │ import { Flex } from '@strapi/design-system/Flex';
│ ^
╵ /index.js
You can mark the path "@strapi/design-system/Flex" as external to exclude it from the bundle,
which will remove this error and leave the unresolved path in the bundle.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-redirects/admin/components/ImportModal/index.js:165:4:
165 │ <Portal>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/Editor/Editor.js:11:4:
11 │ <EditorLib
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
✘ [ERROR] The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportModal/components/ImportEditor/ImportEditor.js:28:4:
28 │ <>
╵ ^
The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
to parse JSX syntax. You can use "loader: { '.js': 'jsx' }" to do that.
4:28:17 PM [vite] error while updating dependencies:
Error: Build failed with 34 errors:
node_modules/strapi-plugin-import-export-entries/admin/src/components/Editor/Editor.js:11:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportButton/ExportButton.js:25:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ExportModal/ExportModal.js:90:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/Header/Header.js:10:4: ERROR: The JSX syntax extension is not currently enabled
node_modules/strapi-plugin-import-export-entries/admin/src/components/ImportButton/ImportButton.js:25:4: ERROR: The JSX syntax extension is not currently enabled
...
at failureErrorWithLog (/Users/bs1006/Work/2025/client_project/Viqua/strapi-viquia-features/node_modules/esbuild/lib/main.js:1469:15)
at /Users/bs1006/Work/2025/client_project/Viqua/strapi-viquia-features/node_modules/esbuild/lib/main.js:945:25
at /Users/bs1006/Work/2025/client_project/Viqua/strapi-viquia-features/node_modules/esbuild/lib/main.js:1350:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)```
### What's Wrong?
I am trying to solve it. can anyone find out why this error?
### To Reproduce
none
### Expected Behaviour
need to run project without any runtime error!