Might better to add example project to try out very quickly

[PeiTianHuang]

I don't know why it can't work

[peakchen90]

@PeiTianHuang Please provide your babel configuration.

[PeiTianHuang]

myPage.tsx: <p x-if={false}>A</p>

package.json: { ...... "babel": { "presets": [ "react-app" ], "plugins": [ "react-directives" ] } }

error: Warning: Received false for a non-boolean attribute x-if.

If you want to write it to the DOM, pass a string instead: x-if="false" or x-if={value.toString()}.

If you used to conditionally omit it with x-if={condition && value}, pass x-if={condition ? value : undefined} instead. in p (created by PutCreateCtrl) in div (created by PutCreateCtrl) in div (created by PutCreateCtrl) in div (created by ContentLayout) in div (created by ContentLayout) in div (created by ContentLayout) in ContentLayout (created by PutCreateCtrl) in PutCreateCtrl (created by Form(PutCreateCtrl)) in Form(PutCreateCtrl) (created by LoadableComponent) in LoadableComponent (created by Page) in Route (created by Page) in Authorized (created by ConnectFunction) in ConnectFunction (created by Context.Consumer) in Route (created by withRouter(Connect(Authorized))) in withRouter(Connect(Authorized)) (created by Page) in Route (created by Page) in Switch (created by Page) in TestManage (created by Context.Consumer) in Route (created by withRouter(TestManage)) in withRouter(TestManage) (created by LoadableComponent) in LoadableComponent (created by Page) in Route (created by Page) in Authorized (created by ConnectFunction) in ConnectFunction (created by Context.Consumer) in Route (created by withRouter(Connect(Authorized))) in withRouter(Connect(Authorized)) (created by Page) in Route (created by Page) in Switch (created by Page) in main (created by Basic) in Basic (created by Context.Consumer) in Adapter (created by Home) in section (created by BasicLayout) in BasicLayout (created by Context.Consumer) in Adapter (created by Home) in section (created by BasicLayout) in BasicLayout (created by Context.Consumer) in Adapter (created by Home) in Home (created by Context.Consumer) in Route (created by withRouter(Home)) in withRouter(Home) (created by Page) in Route (created by Page) in Authorized (created by ConnectFunction) in ConnectFunction (created by Context.Consumer) in Route (created by withRouter(Connect(Authorized))) in withRouter(Connect(Authorized)) (created by Page) in Route (created by Page) in Switch (created by Page) in Root (created by ConnectFunction) in ConnectFunction (created by Page) in Router (created by ConnectedRouter) in ConnectedRouter (created by Context.Consumer) in ConnectedRouterWithContext (created by ConnectFunction) in ConnectFunction (created by Page) in LocaleProvider (created by Context.Consumer) in LocaleReceiver (created by ConfigProvider) in ConfigProvider (created by Page) in Page in Suspense in Provider

[PeiTianHuang]

x-if doesn't work with TypeScript? I found it can work in .jsx

[peakchen90]

@PeiTianHuang I tried it according to the information you provided.

1. Run npx create-react-app ts-react-demo --template typescript
2. Run yarn eject
3. Install babel-plugin-react-directives and @babel/helper-create-regexp-features-plugin(I don't know why I want to install it after eject)
4. Add configruation in babel.plugins field of package.json: react-directives And, it works.

[peakchen90]

@PeiTianHuang I tried, x-if can also be used in .tsx, maybe it is caused by your other configuration or plugins, please try to putreact-directives at the top of the babel plugin (the directive will be converted first). On the other hand, the error log you provided looks like a warning, not a blocking error.

[PeiTianHuang]

package.json: ` { "name": "media-platform", "version": "0.1.0", "private": true, "dependencies": { "antd": "^3.26.0", "autoprefixer": "7.1.6", "axios": "^0.18.0", "babel-jest": "^22.1.0", "babel-loader": "^7.1.2", "babel-preset-react-app": "^3.1.1", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "connected-react-router": "^6.5.0", "css-loader": "0.28.7", "dotenv": "4.0.0", "dotenv-expand": "4.2.0", "echarts": "^4.2.1", "echarts-for-react": "^2.0.15-beta.0", "file-loader": "0.11.2", "fork-ts-checker-webpack-plugin": "^0.2.8", "fs-extra": "3.0.1", "history": "^4.7.2", "html-webpack-plugin": "2.29.0", "i18next": "^19.0.1", "i18next-browser-languagedetector": "^4.0.1", "i18next-xhr-backend": "^3.2.2", "jest": "22.4.2", "lodash": "^4.17.15", "moment": "^2.24.0", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.8", "promise": "8.0.1", "query-string": "^6.8.1", "raf": "3.4.0", "react": "^16.12.0", "react-dev-utils": "^5.0.1", "react-dom": "^16.12.0", "react-i18next": "^11.2.5", "react-loadable": "^5.5.0", "react-redux": "^7.1.0", "react-router": "^4.4.0-beta.8", "react-router-dom": "^4.4.0-beta.8", "redux": "^4.0.4", "redux-actions": "^2.6.1", "redux-saga": "^0.16.2", "reselect": "^4.0.0", "resolve": "1.6.0", "source-map-loader": "^0.2.1", "style-loader": "0.19.0", "sw-precache-webpack-plugin": "0.11.4", "ts-jest": "22.0.1", "ts-loader": "^2.3.7", "tsconfig-paths-webpack-plugin": "^2.0.0", "tslint": "^5.7.0", "tslint-config-prettier": "^1.10.0", "tslint-react": "^3.2.0", "uglifyjs-webpack-plugin": "^1.1.8", "url-loader": "0.6.2", "uuid": "^3.3.2", "webpack": "3.8.1", "webpack-dev-server": "2.9.4", "webpack-manifest-plugin": "1.3.2", "whatwg-fetch": "2.0.3", "xlsx": "^0.15.1" }, "scripts": { "start": "node scripts/start.js", "gray": "node scripts/gray.js", "prod": "node scripts/prod.js", "test": "node scripts/test.js", "excel": "node scripts/excel.js", "lint-fix:style": "stylelint \"src//*.less\" --syntax less --fix" }, "devDependencies": { "babel-plugin-react-directives": "^1.1.1", "@babel/helper-create-regexp-features-plugin": "^7.7.4", "@types/jest": "^24.0.17", "@types/lodash": "^4.14.136", "@types/node": "^10.12.14", "@types/react": "^16.7.18", "@types/react-dom": "^16.0.11", "@types/react-loadable": "^5.5.1", "@types/react-redux": "^7.1.1", "@types/react-router": "^4.0.30", "@types/react-router-dom": "^4.3.0", "@types/redux-actions": "^2.3.0", "@types/uuid": "^3.4.5", "extract-text-webpack-plugin": "^3.0.2", "immutability-helper": "^2.9.0", "less": "^3.9.0", "less-loader": "^4.1.0", "postcss-flexbugs-fixes": "^3.2.0", "postcss-px-to-viewport": "0.0.3", "react-app-rewired": "^1.5.2", "stylelint": "^9.9.0", "stylelint-config-standard": "^18.2.0", "stylelint-webpack-plugin": "^0.10.5", "ts-import-plugin": "^1.5.4", "tslint": "^5.11.0", "typescript": "^3.2.2", "webpack-merge": "^4.2.1" }, "proxy": { "/api": { "target": "http://146.196.79.131:20011", "pathRewrite": { "^/api": "" }, "headers": { "X-USERNAME-X": "liangchaoliang" }, "changeOrigin": false }, "/mockApi": { "target": "http://192.168.197.132:3000/mock/24", "pathRewrite": { "^/mockApi": "" }, "changeOrigin": true } }, "annotationEnv": { "dev": "http://146.196.79.131:20011", "test": "http://146.196.79.131:10011" }, "jest": { "collectCoverageFrom": [ "src/*/.{js,jsx,ts,tsx}" ], "setupFiles": [ "/config/polyfills.js" ], "testMatch": [ "/src//tests/*/.(j|t)s?(x)", "/src/*/?(.)(spec|test).(j|t)s?(x)" ], "testEnvironment": "node", "testURL": "http://localhost", "transform": { "^.+\.(js|jsx|mjs)$": "/node_modules/babel-jest", "^.+\.tsx?$": "/config/jest/typescriptTransform.js", "^.+\.css$": "/config/jest/cssTransform.js", "^(?!.*\.(js|jsx|mjs|css|json)$)": "/config/jest/fileTransform.js" }, "transformIgnorePatterns": [ "[/\\]node_modules[/\\].+\.(js|jsx|mjs|ts|tsx)$" ], "moduleNameMapper": { "^react-native$": "react-native-web" }, "moduleDirectories": [ "node_modules", "src" ], "moduleFileExtensions": [ "web.ts", "ts", "web.tsx", "tsx", "web.js", "js", "web.jsx", "jsx", "json", "node", "mjs" ], "globals": { "ts-jest": { "tsConfigFile": "E:\react-project-template\tsconfig.test.json" }, "window": {} } }, "babel": { "presets": [ "react-app" ], "plugins": [ "react-directives" ] } }

`

[PeiTianHuang]

node v10.15.3 babel v7.3.3

[peakchen90]

@PeiTianHuang can you speak chinese?😂

[PeiTianHuang]

你好，我试着用你上面提供的方法创建新项目，运行是正常的，但是在我已有的项目上则无法正常运行。 我试着将上面提到的那两个插件置顶，但仍不可用。之后又检查了下node及babel的版本，确认了在所要求的版本之上。 目前在逐个测试是否跟其他依赖的版本有关，大神是否有其他头绪可以指点一下？

[peakchen90]

@PeiTianHuang 找到一个类似的issues: https://github.com/ant-design/ant-design/issues/7798 你试一下把 x-if 改成其他属性，看下是否报错。如果也报一样的错误，看下 PutCreateCtrl 组件的相关代码

[chengzhuo5]

楼上的对话把我笑死了，两个中国人一直用英语交流，最后实在是忍不住了，哈哈哈。 话说阿里巴巴也推出了类似的jsx-plus，而且也是用 x 作为前缀，你们是一家的吗？还是只是巧合。