Я пытаюсь использовать пакет React-native-vecor-icons в проекте, использующем развертывание реакции на рендеринг на стороне сервера (SSR).
React-native-vector-Значки отлично работают и в стандартных веб-развертываниях (не только в реагирующих на мобильных устройствах).Однако при рендеринге на стороне сервера существует проблема.
Автор пакета выбрал , чтобы опубликовать свою библиотеку в репозитории NPM с синтаксисом ES6 для модулей (например, import ...}.
В то время как веб-браузеры полагаются на передачу по Babel на ES5, на этапе сборки приложения - это не помогает при развертывании на стороне сервера, поскольку именно сервер (NodeJs) должен уметь понимать синтаксис пакета..
По-моему, именно поэтому я получаю эту ошибку.
Если мое понимание проблемы правильное, тогда мне нужно найти способ заставить Вавилона передать этот оскорбительный пакет наfly и скормить его в node-js во время выполнения.
Здесь мне нужна помощь, просто настройка различных вещей в .babelrc не помогает (см. ниже). И я не знаю, как это сделатьработать без внесения ручных изменений в код React-native-vector icons (см. в конце руководство по изменениям I, которые я рассчитывал сделать ... для проверки теории).
Ошибка:
c:\Users\v\home\devel\mine\ltproject\mob\rnweb\aa1a\ssr-aft\node_modules\react-native-vector-icons\Ionicons.js:6
import createIconSet from './lib/create-icon-set';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:152:10)
at Module._compile (module.js:605:28)
at Object.Module._extensions..js (module.js:652:10)
at Module.load (module.js:560:32)
at tryModuleLoad (module.js:503:12)
at Function.Module._load (module.js:495:3)
at Module.require (module.js:585:17)
at require (internal/module.js:11:18)
at Object.react-native-vector-icons/Ionicons (c:\Users\v\home\devel\mine\ltproject\mob\rnweb\aa1a\ssr-aft\build\server.js:1527:18)
Кусок кода из библиотеки React Native Vector Icons внутри node_modules, вызывающий проблему (первый оператор импорта)
/**
* Ionicons icon set component.
* Usage: <Ionicons name="icon-name" size={20} color="#4F8EF7" />
*/
import createIconSet from './lib/create-icon-set';
import glyphMap from './glyphmaps/Ionicons.json';
const iconSet = createIconSet(glyphMap, 'Ionicons', 'Ionicons.ttf');
export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
My package.json
{
"name": "aa1a",
"version": "0.0.1",
"license": "XYZ",
"private": true,
"scripts": {
"start": "razzle start",
"build": "razzle build",
"test": "razzle test --env=jsdom",
"start:prod": "NODE_ENV=production node build/server.js",
"vclient": "webpack --watch --progress"
},
"dependencies": {
"@jaredpalmer/after": "latest",
"airbnb-browser-shims": "^2.1.0",
"bootstrap": "^3.3.7",
"bundle-loader": "^0.5.6",
"compression": "^1.7.2",
"express": "^4.16.2",
"postcss-syntax": "^0.10",
"prop-types": "^15.6.1",
"pubsub-js": "^1.6",
"qs": "^6.5.2",
"razzle": "^2.0.0-alpha.12",
"react": "^16.3.2",
"react-art": "^16.3.2",
"react-bootstrap": "^0.32.1",
"react-dom": "^16.3.2",
"react-helmet": "^5.2.0",
"react-markdown": "^3.3.2",
"react-native-vector-icons": "^4.6.0",
"react-native-web": "^0.6.1",
"react-router-dom": "^4.3.0-rc.2",
"react-virtualized": "^9.19",
"react-virtualized-image-measurer": "^0.3",
"resize-observer-polyfill": "^1.5.0",
"serialize-javascript": "^1.4.0",
"tree-model": "^1.0.6",
"webpack-visualizer-plugin": "^0.1.11"
},
"devDependencies": {
"babel-plugin-react-native-web": "^0.7.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"babel-preset-react-native": "^4.0.0",
"babel-register": "^6.26.0",
"mini-css-extract-plugin": "^0.4.0",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"stylelint": "^9.2.1",
"stylelint-config-standard": "^18.2.0",
"treeify": "^1.1.0",
"webpack-bundle-analyzer": "^2.9.1"
}
}
Я также пытался сказать babel-loader для перехода в синтаксис ES5, совместимый с версией узла ((я использую узел 9.10)).Но установка babel-preset-env @ 1.3.3 (потому что это то, что использует razzle / babel).И затем, модифицируя мой .babelrc с помощью
{
"presets": ["razzle/babel",
"react-native",
[
"babel-preset-env",
{
"targets": {
"node": 9,
"esmodules": true
}
}
]
],
"plugins": ["react-native-web",
"transform-es2015-modules-commonjs",
"transform-class-properties"
]
}
Это, к сожалению, не помогло - получаю ту же ошибку.
Я также пытался перейти на узел v10.2 и с использованием
npm start - - экспериментальные модули
... razzle start "--experimental modules"
тоже не сработало .. хотя я не уверен на 100%, если razzle, в этом случае передаю командную строку arg в node.js
Как уже отмечалось выше - я разобрался ручные изменения кода, которые мне нужно сделать , чтобы заставить векторные иконки RN запускаться под узлом JS (я использую версию 9.1)
Change 1) CD для node_modules / реагировать-native-vector-icons.Скопируйте Ionicons.js в Ionicons_org.js.
Изменить 2) Замените Ionicons.js этим кодом (и удалите остальное).
require('babel-register')({
plugins: ["transform-class-properties","react-native-web"],
presets: [ 'env' ],
// Ignore everything in node_modules except node_modules/react-native-vector-icons
ignore: /node_modules\/(?!react-native-vector-icons)/
})
// Import the rest of our application.
module.exports = require('./Ionicons_org.js')