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

rashgaroth commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

no, yarn v1 should work

rashgaroth commented 9 months ago

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?

reduxjs / redux