0

I am getting the following errors for a specific components in antd library that I never encountered before running npm install again after deleting node_modules and package_lock.json. This was after I added app directory in nextjs as part of trying out the new Vercel AI SDK

The page renders perfectly if I specifically comment out the components that the console is complaining about, which are the followings:

This is my full package.json file for reference.

- error /Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/antd/es/Tooltip/index.js:9
import classNames from 'classnames';
^^^^^^

SyntaxError: Cannot use import statement outside a module

[...]

- error /Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/antd/es/Tooltip/index.js:9
import classNames from 'classnames';
^^^^^^

SyntaxError: Cannot use import statement outside a module

[...]

- error /Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/antd/es/Input/index.js:1
import Group from './Group';
^^^^^^

SyntaxError: Cannot use import statement outside a module

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1177:20)
    at Module._compile (node:internal/modules/cjs/loader:1221:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1311:10)
    at Module.load (node:internal/modules/cjs/loader:1115:32)
    at Module._load (node:internal/modules/cjs/loader:962:12)
    at Module.require (node:internal/modules/cjs/loader:1139:19)
    at require (node:internal/modules/helpers:121:18)
    at antd/es/Input (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:590:18)
    at __webpack_require__ (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/chat-util/NewChatModalCustom.tsx:25:72)
    at ./src/components/chat-util/NewChatModalCustom.tsx (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:286:1)
    at __webpack_require__ (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/draft-util/StartDraftPanel.tsx:15:87)
    at ./src/components/draft-util/StartDraftPanel.tsx (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:363:1)
    at __webpack_require__ (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/pages/draft.tsx:8:99)
    at ./src/pages/draft.tsx (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:429:1)
    at __webpack_require__ (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fdraft&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Fdraft.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!:22:78)
    at ./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2Fdraft&preferredRegion=&absolutePagePath=.%2Fsrc%2Fpages%2Fdraft.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D! (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:33:1)
    at __webpack_require__ (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:1117:39)
    at /Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:1118:28
    at Object.<anonymous> (/Users/tylerkim/Documents/Scraft/scraft-webapp/.next/server/pages/draft.js:1121:3)
    at Module._compile (node:internal/modules/cjs/loader:1257:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1311:10)
    at Module.load (node:internal/modules/cjs/loader:1115:32)
    at Module._load (node:internal/modules/cjs/loader:962:12)
    at Module.require (node:internal/modules/cjs/loader:1139:19)
    at require (node:internal/modules/helpers:121:18)
    at requirePage (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/require.js:156:12)
    at /Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/load-components.js:71:84
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async loadComponentsImpl (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/load-components.js:71:26)
    at async DevServer.findPageComponentsImpl (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/next-server.js:772:36)
    at async DevServer.findPageComponents (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/dev/next-dev-server.js:1277:20)
    at async DevServer.renderPageComponent (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/base-server.js:1336:24)
    at async DevServer.renderToResponseImpl (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/base-server.js:1380:32)
    at async DevServer.pipeImpl (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/base-server.js:641:25)
    at async Object.fn (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/next-server.js:1158:21)
    at async Router.execute (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/router.js:315:32)
    at async DevServer.runImpl (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/base-server.js:615:29)
    at async DevServer.run (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/dev/next-dev-server.js:908:20)
    at async DevServer.handleRequestImpl (/Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/next/dist/server/base-server.js:546:20) {
  digest: undefined
}

What happened before the issue:

  • I was having npm errors after doing npm install ai, so I ran npm install again after deleting node_modules and package_lock.json

What I attempted so far:

  1. Tried different imports as suggested by VSCode autocomplete; none of the options made a difference in the error enter image description here

  2. Tried adding "type": "module" in package.json as suggested by this thread

  3. Tried adding transpilePackages: ['antd'] in next.config.js but this caused the same error but for different random package (rc-util?) like following

- error /Users/tylerkim/Documents/Scraft/scraft-webapp/node_modules/rc-util/es/hooks/useMergedState.js:1
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

SyntaxError: Cannot use import statement outside a module
Tyler Kim
  • 181
  • 1
  • 11
  • You should show the stack trace from `[...]`. Looking at `antd` published files, it does not appear they include a package.json where they explicitly use `"type": "module"`, but instead only use the `"module"` field from package.json. Meaning, newer versions of node may require the use of `"type": "module"` and an `exports` field to properly support dual packages, i.e. CJS and ESM distributions. Basically, `antd` is using an `import` to load their own dependencies, but defines itself as CommonJS based on the nearest package.json file. Try building your project to the CommonJS module system. – morganney Jul 04 '23 at 17:14
  • @morganney thanks! just added stack trace to the original post. That makes sense, I'm wondering what caused the dual packages to act up all of the sudden when it was working fine for the last 9 months. When I add type:module, it'll create the same error for other libraries I've never heard of (such as rc-util) and I'm unsure if this is the proper way to fix the issue. I apologize for not being familiar with CommonJS module system, how does one 'build project to commonjs system'? – Tyler Kim Jul 04 '23 at 17:28
  • Looks like you are using Next.js, and have defined `"type": "module"` in your own package.json file. If you want to go full CJS, then change to `"type": "commonjs"` in your package.json, and set up your Next.js build to produce CJS modules. – morganney Jul 04 '23 at 17:56
  • @morganney Thanks! I'll look into it. But is there any other option that doesn't require going full CJS? I'm still unsure if that's necessary considering I had no issues with CJS until I simply added a new package `npm install ai`. I will try to uninstall that tomorrow and see if it changed anything – Tyler Kim Jul 04 '23 at 18:10
  • Without seeing your entire project's build, some things are uncertain. I did find the published version of `antd` interesting in that it _seems_ to rely entirely on the `module` field from package.json. `rm -rf node_modules` never hurt, not as bad as a full OS reboot :) – morganney Jul 04 '23 at 18:15
  • @morganney Oddly, trying that solution as well as trying `type:commonjs` is still resulting in the same error. Do you think this is a package-specific issue? I also saw your comment in https://github.com/ant-design/ant-design/issues/43233 and wanted to ask if it's relevant to what I tried/should try here – Tyler Kim Jul 06 '23 at 14:21
  • 1
    Like I said before, it is a bit of a guessing game without knowing your full set up. Pick your dependencies wisely is the best advice I could give atm. I’m not a fan of `antd` and am not sure why it’s so popular. – morganney Jul 06 '23 at 15:11

1 Answers1

0

The issue disappeared when I reverted the codebase prior to installing the new packages

  1. removed ai and openai-edge package from package.json
  2. removed package-lock.json
  3. rm -rf node_modules
  4. npm install

Still unsure why those two packages specifically caused this error, but will update here once I figure it out

Tyler Kim
  • 181
  • 1
  • 11