Import fails

[msabramo]

I did:

npm install next-usequerystate

and then added to my code:

import { useQueryState } from 'next-usequerystate'

I got this error:

Failed to compile

./node_modules/next-usequerystate/dist/esm/index.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export * from './defs';
| export * from './useQueryState';
| export * from './useQueryStates'

[franky47]

Could you tell me more about your setup (transpiler, bundler, general processing of source files into final artifacts, use of ES modules, TypeScript, Babel, etc..) ?

[msabramo]

This happens with an app create with use-next-app, using the next-learn-starter:

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

[msabramo]

It's not specific to next-learn-starter. I was able to reproduce it with an app created by:

npx create-next-app nextapp --use-npm

[msabramo]

I didn't think it would matter, but for the sake of completeness, it also still happens without the --use-npm flag:

npx create-next-app nextapp

[msabramo]

$ npm list
[email protected] /private/tmp/nextapp
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[msabramo]

This config seems to be using webpack5, in case that matters. I saw this when running npm run dev:

info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5

[msabramo]

Ah, interesting. I followed the link in the above message about webpack5 and that lead me to try putting:

webpack5: false

in next.config.js and then it seemed to work!

Note however that this is not a long-term solution as the above link says:

In Next.js 11 webpack 5 was enabled by default for all applications. You can still opt-out and use webpack 4 to help with backwards compatibility using webpack5: false in next.config.js
In the next major version webpack 4 support will be removed.

[msabramo]

Possibly of interest?

webpack/webpack#12598

[msabramo]

#238 seems like it might fix this. Hopefully it doesn't have any bad side-effects.

[bogdansoare]

any news on this?

[github-actions]

🎉 This issue has been resolved in version 1.4.0-beta.5 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[franky47]

@msabramo & @bogdansoare, let me know if 1.4.0-beta.5 works for you. I'm still waiting on a TS types bugfix from Next.js to bump a security PR and I'll look into crafting a proper release.

[msabramo]

Yep I'm using 1.4.0-beta.5 and it's working well for me.

$ npm list next-usequerystate
[email protected] /Users/abramowi/dev/adobe/sensei/next-stock-prototype
└── [email protected]

Thank you!

[github-actions]

🎉 This issue has been resolved in version 1.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀