[Web] query-string does not contain a default export ( again )

[aliassar]

Current Behavior

I tried to import createStackNavigator, and I got the build error:

Failed to compile.

./node_modules/@react-navigation/core/lib/module/getStateFromPath.js Attempted import error: 'query-string' does not contain a default export (imported as 'queryString').

I am using webpack & react-native-web.

Expected Behavior

The build to pass.

How to reproduce

import {createStackNavigator} from "@react-navigation/stack";

repro link

just use yarn run web:build to see error yarn run web works just fine

Your Environment

software	version
@react-navigation/stack	^5.14.4
@react-navigation/native	^5.9.4
react-native-web	^0.16.2
react-navigation	^5.15.3
webpack	4.33.0 ( not sure )
react-native	0.64.0
node	v12.19.0
yarn	1.22.10

This has already happened in #8971 and was fixed. I don't know why this is happening again.

P. E. I tried a lot of version combinations & I don't think that's the problem.

[github-actions[bot]]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/stack (found: 5.12.8, latest: 5.14.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions[bot]]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.io link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[Snotax]

I have the same problem on those versions:

"@react-navigation/native": "^6.0.8", "@react-navigation/native-stack": "^6.4.1",

[mariomurrent-softwaresolutions]

any updates on this?

[xanxus135]

I have found a solution, and the build has been successful. I hope it can help. Hopefully, improvements will be made in future versions😊

1、Add resolutions to package.json

"resolutions": { "query-string": "8.1.0" }

2、Modify import code

--- a/node_modules/@react-navigation/native/node_modules/@react-navigation/core/lib/module/getPathFromState.js +++ b/node_modules/@react-navigation/native/node_modules/@react-navigation/core/lib/module/getPathFromState.js @@ -1,4 +1,4 @@ -import * as queryString from 'query-string'; +import queryString from 'query-string'; import fromEntries from './fromEntries'; import validatePathConfig from './validatePathConfig'; const getActiveRoute = state => {

--- a/node_modules/@react-navigation/native/node_modules/@react-navigation/core/lib/module/getStateFromPath.js +++ b/node_modules/@react-navigation/native/node_modules/@react-navigation/core/lib/module/getStateFromPath.js @@ -1,5 +1,5 @@ import escape from 'escape-string-regexp'; -import * as queryString from 'query-string'; +import queryString from 'query-string'; import findFocusedRoute from './findFocusedRoute'; import validatePathConfig from './validatePathConfig'; /**