Так что моя проблема возникает в старых браузерах. В настоящее время выполняется тестирование Safari на iPad Mini под управлением iOS 9.3.5.
. В консоли появляется следующая ошибка
Unexpected keyword 'const'. Const declarations are not supported in strict mode.
при импорте в компонент React
import twoMinOrangeSvg from '../../img/supporting/2-min-orange.svg';
в моем индексе сборки. js файл, который компилируется в svg как const, вместо var
const img = 'data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">....path code here.....</svg>';
Это мой rollup.config.js
файл. Я импортировал плагин @rollup/plugin-image
, который, кажется, является причиной, по которой это происходит ...
import babel from 'rollup-plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import filesize from 'rollup-plugin-filesize';
import autoprefixer from 'autoprefixer';
import localResolve from 'rollup-plugin-local-resolve';
import json from 'rollup-plugin-json';
import pkg from './package.json';
import externals from 'rollup-plugin-node-externals';
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
import image from '@rollup/plugin-image';
import { terser } from 'rollup-plugin-terser';
const ENVIRONMENT = process.env.ENVIRONMENT;
const PRODUCTION = ENVIRONMENT === 'production';
const config = {
input: 'src/index.js',
watch: {
chokidar: {
usePolling: true,
paths: 'src/**'
}
},
output:
[
{
file: pkg.browser,
format: 'umd',
name: 'Example',
},
{
file: pkg.main,
format: 'cjs',
name: 'Example',
},
{
file: pkg.module,
format: 'es',
},
],
external: [
'react',
'react-dom',
'styled-components',
'formik',
'scheduler',
'date-fns'
],
globals: {
// Use external version of React
"react": "React"
},
plugins: [
PRODUCTION && globals(),
PRODUCTION && builtins(),
PRODUCTION && externals(),
babel({ exclude: 'node_modules/**', presets: ['@babel/env', '@babel/preset-react'] }),
PRODUCTION && commonjs({
namedExports: {
// left-hand side can be an absolute path, a path
// relative to the current directory, or the name
// of a module in node_modules
'node_modules/formik/node_modules/scheduler/index.js' : ['unstable_runWithPriority'],
}
}),
PRODUCTION && peerDepsExternal(),
PRODUCTION && postcss({ extract: true, plugins: [autoprefixer] }),
PRODUCTION && json({ include: 'node_modules/**' }),
PRODUCTION && localResolve(),
PRODUCTION && resolve({dedupe: [ 'react', 'react-dom' ]}),
PRODUCTION && filesize(),
image(),
PRODUCTION && terser()
]
};
export default config;
Любая помощь будет принята с благодарностью.