Redux import type gone since upgrading to latest version with javascript (Next 14)

[rashgaroth]

Prior Issues

First of all, here are my redux versions

"@reduxjs/toolkit": "^2.2.0",
"react-redux": "^9.1.0"

when I tried to implement the redux's slice i need to import createSlice from @redux/toolkit right? but i can't find that from the auto import, and also manually from import {}, like this image below:

i didn't get any type from @redux/toolkit, but when i downgraded the redux toolkit version to ^1.9.7 and react-redux to ^8.1.3 it worked properly like image below:

Steps to Reproduce

• run npx create-next-app --javascript my-app
• run yarn add @reduxjs/toolkit@latest react-redux@latest
• create a new slicer
• import that and you'll not get the types

What is the expected behavior?

What should Redux be doing?

Environment Details

package.json:

{
"next": "14.1.0",
"@reduxjs/toolkit": "^2.2.0",
"react": "^18",
"react-dom": "^18",
"react-redux": "^9.1.0",
}

jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@lib/*": ["./src/lib/*"],
      "@store/*": ["./src/stores/*"],
      "@styles/*": ["./src/styles/*"],
      "@lib/utils/*": ["./src/lib/utils/*"],
      "@lib/apis/*": ["./src/lib/apis/*"]
    }
  },
  "include": ["src/**/*", "next-env.d.ts", "**/*.js", "**/*.jsx", "src/stores"],
  "exclude": ["node_modules", ".next"]
}

[EskiMojo14]

followed the instructions and i can't replicate this

have you tried restarting your TS server? what yarn version and nodeLinker are you using?

[timdorr]

This has to be related to your environment. It's not a bug in the library. I would wipe your node_modules and package manager caches to start fresh.

[rashgaroth]

followed the instructions and i can't replicate this

have you tried restarting your TS server? what yarn version and nodeLinker are you using?

hi @EskiMojo14 i'm using node v18.17.0 and yarn 1.22.17, do i need to change it?

[EskiMojo14]

no, yarn v1 should work

[rashgaroth]

no, yarn v1 should work

@EskiMojo14 still doesn't work even with another lib 😭

here's my config:

• jsconfig.json :

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "moduleResolution": "node",
    "module": "CommonJS"
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

• typescript vscode version:

• node & yarn versions:
  

• vscode settings (environment)

{
  "css.validate": false,
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "javascript.preferences.importModuleSpecifier": "non-relative",
  "headwind.runOnSave": false
}

• vscode settings (general)

{
  "redhat.telemetry.enabled": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDelete": false,
  "terminal.integrated.defaultProfile.osx": "zsh",
  "[javascript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "solidity.compileUsingRemoteVersion": "v0.8.12+commit.f00d7308",
  "background.filepath": "/Users/rashgaroth/Documents/b3.jpeg",
  "background.opacity": 0.95,
  "security.workspace.trust.untrustedFiles": "open",
  "thunder-client.codeSnippetLanguage": "js-fetch",
  "go.toolsManagement.autoUpdate": true,
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "hardhat.telemetry": true,
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[solidity]": {
    "editor.defaultFormatter": "NomicFoundation.hardhat-solidity"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "workbench.editorAssociations": {
    "*.wasm": "default"
  },
  "npm.keybindingsChangedWarningShown": true,
  "terminal.integrated.enableMultiLinePasteWarning": "always",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "material-icon-theme.folders.theme": "specific",
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.activeIconPack": "react",
  "material-icon-theme.folders.color": "#ef5350",
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "solidity.telemetry": true,
  "yaml.customTags": [
    "!And",
    "!And sequence",
    "!If",
    "!If sequence",
    "!Not",
    "!Not sequence",
    "!Equals",
    "!Equals sequence",
    "!Or",
    "!Or sequence",
    "!FindInMap",
    "!FindInMap sequence",
    "!Base64",
    "!Join",
    "!Join sequence",
    "!Cidr",
    "!Ref",
    "!Sub",
    "!Sub sequence",
    "!GetAtt",
    "!GetAZs",
    "!ImportValue",
    "!ImportValue sequence",
    "!Select",
    "!Select sequence",
    "!Split",
    "!Split sequence"
  ],
  "editor.minimap.enabled": false,
  "editor.inlineSuggest.enabled": true,
  "github.copilot.enable": {
    "*": true,
    "plaintext": false,
    "markdown": true,
    "scminput": false
  },
  "typescript.updateImportsOnFileMove.enabled": "always",
  "git.enableSmartCommit": true,
  "git.confirmSync": false,
  "window.zoomLevel": -1,
  "files.associations": {
    "*.js": "javascriptreact"
  },
  "security.promptForLocalFileProtocolHandling": false,
  "typescript.tsserver.log": "verbose"
}

is it related to my babel configuration or something? or the vscode settings?