Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

warn Package @ant-design/react-native contains invalid configuration: "dependency.assets" is not allowed. Please verify it's properly linked using "react-native config" command and contact the package maintainers about this. error: unknown command 'link' #1289

Closed
douguohai opened this issue Mar 1, 2023 · 7 comments

Comments

@douguohai
Copy link

Reproduction link

Edit on CodeSandbox

Steps to reproduce

初始化项目报错

What is expected?

期望修复这个错误

What is actually happening?

期望修复这个错误

Environment Info
antd 5.0.4
React 0.71.3
System MACOS
Browser chrome
@eliomaria
Copy link

eliomaria commented Mar 7, 2023

Try this:

React Native 0.69 update
In 0.69 version of React Native link command has been removed. react-native-asset should be used to automatically link the font assets. Just run the following command:
$ npx react-native-asset

Other thing you can try to refactor the react-native.config.js inside the @ant-design package in node modules for:
The one inside react-native:

module.exports = {
  project: {
    ios: {},
    android: {
      sourceDir: './rn-kitchen-sink/android'
    }
  },
  assets: ['../icons-react-native/fonts']
};

and the one inside icons-react-native:

module.exports = {
  project: {
    ios: {},
    android: {}
  },
  assets: ['./src/assets/fonts']
};

@Oakyden
Copy link

Oakyden commented Jul 18, 2023

@eliomaria can you elaborate a bit more?

I am in the root of my project and run 'npx react-native-asset' and it says Error: Cannot find module '/Users/**username**/Documents/Repositories/**projectName**/react-native.config.js'

I presume i need to cd into the node modules folder? I just did so and the command runs, but the Icons still don't work

Also surely editing the files you state above in node modules is not sustainable, so we need to create a patch file or similar?

@avrahm
Copy link

avrahm commented Nov 9, 2023

@Oakyden

I was running into the same wanrings but also with @ant-design/icons-react-native.

I cleared the warning messages and resolved the link using a combination of steps from both issues. But I do agree updating node_modules is not sustainable.

warn Package @ant-design/icons-react-native contains invalid configuration: "dependency.assets" is not allowed. 
Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.

warn Package @ant-design/react-native contains invalid configuration: "dependency.assets" is not allowed. 
Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.

First run the solution by @huzhanbo1996 in ant-design/ant-design-icons#535 (comment)

NOTE: I updated the steps for npm and clarified some other parts.

  1. npm I react-native-asset
  2. Create or update the root config file react-native.config.js like this
module.exports = {
   assets: ["node_modules/@ant-design/icons-react-native/fonts"]
};
  1. Add this into app.json
"packagerOpts": {
    "config": "metro.config.js"
  }
  1. npx react-native-asset -> this will copy assets into platform specific path

Next, I complete the steps from @eliomaria in #1289 (comment)

NOTE: I updated the steps to clarify some points and fixed the asset line for step 3.

  1. npx react-native-asset (can be skipped if you just ran from step 5 above)

  2. Refactor the dependency listed in react-native.config.js inside the @ant-design package in node modules.

a. This is what you will find:

dependency: {
  assets: ['../icons-react-native/fonts'],
},

b. Replace it with:

module.exports = {
  project: {
    ios: {},
    android: {
      sourceDir: './rn-kitchen-sink/android'
    }
  },
  assets: ['../icons-react-native/fonts']
};
  1. Update the dependency inside the node_modules for icons-react-native:
module.exports = {
  project: {
    ios: {},
    android: {}
  },
  assets: ['fonts']
};

Best of luck with your project!

@Oakyden
Copy link

Oakyden commented Nov 9, 2023

Thanks @avrahm, I've since moved on to using React Paper, but I hope your reply helps someone!

@buihuynhngoctram
Copy link

@Oakyden

I was running into the same wanrings but also with @ant-design/icons-react-native.

I cleared the warning messages and resolved the link using a combination of steps from both issues. But I do agree updating node_modules is not sustainable.

warn Package @ant-design/icons-react-native contains invalid configuration: "dependency.assets" is not allowed. 
Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.

warn Package @ant-design/react-native contains invalid configuration: "dependency.assets" is not allowed. 
Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.

First run the solution by @huzhanbo1996 in ant-design/ant-design-icons#535 (comment)

NOTE: I updated the steps for npm and clarified some other parts.

  1. npm I react-native-asset
  2. Create or update the root config file react-native.config.js like this
module.exports = {
   assets: ["node_modules/@ant-design/icons-react-native/fonts"]
};
  1. Add this into app.json
"packagerOpts": {
    "config": "metro.config.js"
  }
  1. npx react-native-asset -> this will copy assets into platform specific path

Next, I complete the steps from @eliomaria in #1289 (comment)

NOTE: I updated the steps to clarify some points and fixed the asset line for step 3.

  1. npx react-native-asset (can be skipped if you just ran from step 5 above)
  2. Refactor the dependency listed in react-native.config.js inside the @ant-design package in node modules.

a. This is what you will find:

dependency: {
  assets: ['../icons-react-native/fonts'],
},

b. Replace it with:

module.exports = {
  project: {
    ios: {},
    android: {
      sourceDir: './rn-kitchen-sink/android'
    }
  },
  assets: ['../icons-react-native/fonts']
};
  1. Update the dependency inside the node_modules for icons-react-native:
module.exports = {
  project: {
    ios: {},
    android: {}
  },
  assets: ['fonts']
};

Best of luck with your project!

Thanks a lot, it works for me 👍

@yydddiiii
Copy link

@Oakyden

I was running into the same wanrings but also with @ant-design/icons-react-native.

I cleared the warning messages and resolved the link using a combination of steps from both issues. But I do agree updating node_modules is not sustainable.

warn Package @ant-design/icons-react-native contains invalid configuration: "dependency.assets" is not allowed. 
Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.

warn Package @ant-design/react-native contains invalid configuration: "dependency.assets" is not allowed. 
Please verify it's properly linked using "react-native config" command and contact the package maintainers about this.

First run the solution by @huzhanbo1996 in ant-design/ant-design-icons#535 (comment)

NOTE: I updated the steps for npm and clarified some other parts.

  1. npm I react-native-asset
  2. Create or update the root config file react-native.config.js like this
module.exports = {
   assets: ["node_modules/@ant-design/icons-react-native/fonts"]
};
  1. Add this into app.json
"packagerOpts": {
    "config": "metro.config.js"
  }
  1. npx react-native-asset -> this will copy assets into platform specific path

Next, I complete the steps from @eliomaria in #1289 (comment)

NOTE: I updated the steps to clarify some points and fixed the asset line for step 3.

  1. npx react-native-asset (can be skipped if you just ran from step 5 above)
  2. Refactor the dependency listed in react-native.config.js inside the @ant-design package in node modules.

a. This is what you will find:

dependency: {
  assets: ['../icons-react-native/fonts'],
},

b. Replace it with:

module.exports = {
  project: {
    ios: {},
    android: {
      sourceDir: './rn-kitchen-sink/android'
    }
  },
  assets: ['../icons-react-native/fonts']
};
  1. Update the dependency inside the node_modules for icons-react-native:
module.exports = {
  project: {
    ios: {},
    android: {}
  },
  assets: ['fonts']
};

Best of luck with your project!

非常感谢!!我用这个方法也解决了问题!!

@1uokun 1uokun pinned this issue Apr 8, 2024
@1uokun 1uokun mentioned this issue Apr 15, 2024
@1uokun
Copy link
Collaborator

1uokun commented Apr 15, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants