Unable to get babel-plugin-import to work when scripts are compiled from typescript (Android)

Version

1.4.2

Environment

react-native

Reproduction link

https://github.com/stonecold123/antd-mobile-test-ts

Steps to reproduce

$ git clone https://github.com/stonecold123/antd-mobile-test-ts $ npm install $ npm start $ react-native run-android

What is expected?

I’ve made two examples for android only, one written in raw js (run fine), and one written in typescript (not working): https://github.com/stonecold123/antd-mobile-test-js https://github.com/stonecold123/antd-mobile-test-ts

I was expecting the typescript example to work perfectly without the console.error “Must use babel-plugin-import…” and render successfully like the first one which is written in JS. Both examples use the latest react native and react version.

What is actually happening?

Can you please try this example: https://github.com/stonecold123/antd-mobile-test-ts

I’m still getting the “Must use babel-import…” error even though the .babelrc file has updated to :

{
  "presets": ["react-native"],
  "plugins": [["import", { "libraryName": "antd-mobile" }]]
}

I suspect there’s an issue related to babel-plugin-import when the ts example is compiled back into raw javascript. I have spent hours on it but still can’t find a solution.

[cncolder]

@stonecold123 Change your tsconfig.json tell tsc compile to es2015. babel-plugin-import only understand import style code.

{
    "compilerOptions": {
        "module": "es2015"
    }
}

babel-plugin-import will transform import { Button } from 'antd-mobile'; <Button /> into var _button = require('antd-mobile/lib/button'); <_button />

[cncolder]

@stonecold123 Change your tsconfig.json again

{
    "compilerOptions": {
        "module": "es2015",
        "allowSyntheticDefaultImports": true
    }
}

Then write import URIJS from 'urijs' in your .ts file.

import React, { Component } from 'react'