Error when apply @emotion/babel-plugin in nextjs app

[walt1992]

Current behavior:

I apply @emotion/babel-plugin on my react app that is composed with next and typescript

But after that, It shows me error when complied.

Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'
error - ./src/components/~~~.tsx
Module not found: Can't resolve '@emotion/styled/base' in 'C:\Users\~~\components\~~~'

To reproduce:

As I mentioned above, my appliction uses nextjs and typescript. Here is my config files.

package.json

"devDependencies": {
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
    "@emotion/babel-plugin": "^11.0.0",
    "@types/redux-mock-store": "^1.0.2",
    "@typescript-eslint/eslint-plugin": "^3.10.1",
    "@typescript-eslint/parser": "^3.10.1",
    "eslint": "^7.7.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.6",
    "fs-extra": "^9.0.1",
    "google-spreadsheet": "^3.0.13",
    "husky": "^4.3.0",
    "jest-emotion": "^10.0.32",
    "jsonfile": "^6.0.1",
    "prettier": "^2.0.5",
    "react-test-renderer": "^16.13.1",
    "redux-mock-store": "^1.5.4"
  },
  "dependencies": {
    "@babel/core": "^7.11.4",
    "@babel/preset-env": "^7.11.0",
    "@babel/preset-react": "^7.10.4",
    "@closet-design-system/core": "^0.1.2",
    "@closet-design-system/theme": "^0.0.15",
    "@closet/types": "0.0.1",
    "@closet/web": "^1.0.0",
    "@emotion/core": "^10.0.35",
    "@emotion/styled": "^10.0.27",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^10.4.9",
    "@types/classnames": "^2.2.10",
    "@types/express": "^4.17.7",
    "@types/facepaint": "^1.2.1",
    "@types/jwt-decode": "^2.2.1",
    "@types/lodash": "^4.14.161",
    "@types/react": "^16.9.48",
    "@types/react-copy-to-clipboard": "^4.3.0",
    "@types/react-custom-scrollbars": "^4.0.7",
    "@types/react-redux": "^7.1.9",
    "@types/react-select": "^3.0.19",
    "@types/redux-mock-store": "^1.0.2",
    "axios": "^0.20.0",
    "axios-case-converter": "^0.6.0",
    "babel-jest": "^26.3.0",
    "babel-plugin-emotion": "^10.0.33",
    "babel-plugin-module-resolver": "^4.0.0",
    "classnames": "^2.2.6",
    "cookie-parser": "^1.4.5",
    "cross-env": "^7.0.2",
    "emotion": "^10.0.27",
    "emotion-flex-grid": "^1.4.3",
    "emotion-normalize": "^10.1.0",
    "emotion-theming": "^10.0.27",
    "express": "^4.17.1",
    "facepaint": "^1.2.1",
    "file-loader": "^6.1.0",
    "jest": "26.4.2",
    "json-variables": "^8.2.14",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.20",
    "moment": "^2.29.1",
    "next": "^9.5.2",
    "next-i18next": "^6.0.3",
    "next-redux-wrapper": "^6.0.2",
    "next-transpile-modules": "^4.1.0",
    "numbro": "^2.3.2",
    "polished": "^3.6.7",
    "rc-dropdown": "^3.2.0",
    "rc-menu": "^8.6.1",
    "react": "^16.13.1",
    "react-autosize-textarea": "^7.1.0",
    "react-checkbox-group": "4.0.1",
    "react-copy-to-clipboard": "^5.0.2",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.13.1",
    "react-infinite-scroll-component": "^5.1.0",
    "react-md-spinner": "^1.0.0",
    "react-redux": "^7.2.1",
    "react-responsive-modal": "^5.1.0",
    "react-select": "^3.1.0",
    "react-sortablejs": "^6.0.0",
    "redux-mock-store": "^1.5.4",
    "redux-saga": "^1.1.3",
    "simple-load-script": "^1.0.2",
    "sortablejs": "^1.12.0",
    "typescript": "^4.0.3",
    "universal-cookie": "^4.0.3",
    "url-parse": "^1.4.7"
  }

babel.config.js

module.exports = {
  presets: ['next/babel'],
  plugins: [
    '@emotion',
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator',
    [
      'module-resolver',
      {
        root: ['./src/'],
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      },
    ],
  ],
};

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "alwaysStrict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts", "**/*.tsx"]
}

Expected behavior:

Environment information:

• react version: ^16.13.1
• @emotion/core version: "^10.0.35",
• @emotion/styled version: "^10.0.27",

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

One thing I've noticed is that you are trying to use our @emotion/babel-plugin@^11 but yet you are using Emotion 10.

[Andarist]

I'm not even sure what "the same bug" means here...

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given (and they are not given here).

[SleepWalker]

@Andarist I have removed my irrelevant comment. Sorry for that

[Andarist]

I'm happy to help you if there is some problem - I just need your problem to be reproduced in something that I can look at.

[softmarshmallow]

Solutions?