ant-design / ant-design-mobile-rn

Ant Design for React Native
https://rn.mobile.ant.design/
MIT License
3k stars 610 forks source link

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 closed 7 months ago

douguohai commented 1 year ago

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 commented 1 year ago

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 commented 11 months ago

@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 commented 8 months ago

@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 https://github.com/ant-design/ant-design-icons/issues/535#issuecomment-1604027589

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 https://github.com/ant-design/ant-design-mobile-rn/issues/1289#issuecomment-1457878465

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 commented 8 months ago

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

buihuynhngoctram commented 7 months ago

@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 commented 7 months ago

@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 commented 2 months ago

fixed in 5.1.2

see the detail in https://github.com/ant-design/ant-design-mobile-rn/blob/master/docs/react/introduce.en-US.md#2-installation