comment faire pour résoudre cette erreur, Vous pourriez avoir besoin d'un chargeur approprié pour traiter ce type de fichier
J'ai eu cette erreur avec cette bibliothèque https://github.com/react-native-web-community/react-native-web-linear-gradient/
l'erreur de lien
https://github.com/react-native-web-community/react-native-web-linear-gradient/issues/1
détails de l'erreur:
Module d'analyser échoué: Unexpected token (5:22)
Vous aurez besoin d'un chargeur approprié pour traiter ce type de fichier.
mon webpack:
'use strict';
const autoprefixer = require('autoprefixer');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const getClientEnvironment = require('./env');
const paths = require('./paths');
const publicPath = '/';
const publicUrl = '';
const env = getClientEnvironment(publicUrl);
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
require.resolve('./polyfills'),
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs,
],
output: {
pathinfo: true,
filename: 'static/js/bundle.js',
chunkFilename: 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'babel-runtime': path.dirname(
require.resolve('babel-runtime/package.json')
),
'react-native': 'react-native-web',
'react-native-linear-gradient': 'react-native-web-linear-gradient'
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
},
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: 'pre',
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
baseConfig: {
extends: [require.resolve('eslint-config-react-app')],
},
ignore: false,
useEslintrc: false,
},
loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
cacheDirectory: true,
},
},
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', //React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new InterpolateHtmlPlugin(env.raw),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin(env.stringified),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
node: {
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty',
},
performance: {
hints: false,
},
};
la classe qui rend le problème:
import React, { PureComponent } from 'react';
import { View } from 'react-native';
export default class LinearGradient extends PureComponent {
static defaultProps = {
start: {
x: 0.5,
y: 0,
},
end: {
x: 0.5,
y: 1,
},
locations: [],
colors: [],
};
state = {
width: 1,
height: 1,
};
measure = ({ nativeEvent }) =>
this.setState({
width: nativeEvent.layout.width,
height: nativeEvent.layout.height,
});
getAngle = () => {
//Math.atan2 handles Infinity
const angle =
Math.atan2(
this.state.width * (this.props.end.y - this.props.start.y),
this.state.height * (this.props.end.x - this.props.start.x)
) +
Math.PI / 2;
return angle + 'rad';
};
getColors = () =>
this.props.colors
.map((color, index) => {
const location = this.props.locations[index];
let locationStyle = '';
if (location) {
locationStyle = ' ' + location * 100 + '%';
}
return color + locationStyle;
})
.join(',');
render() {
return (
<View
style={[
this.props.style,
{ backgroundImage: `linear-gradient(${this.getAngle()},${this.getColors()})` },
]}
onLayout={this.measure}
>
{this.props.children}
</View>
);
}
}
statique des defaultprops et ()=> faire le bug donc ce qui pourrait être mauvais?
- Pouvez-vous effacer le texte à partir de votre webpack de config, il pourrait rendre plus facile à lire?
- J'ai supprimer toutes les lignes commentées
Vous devez vous connecter pour publier un commentaire.
Correction partielle >>
Suit:
1-
npm install babel babel-cli --save-dev
sur la bibliothèque2-je ajouter
"transpile": "babel src/index.js --out-file src/index-transpiled.js"
dans
package.json
scripts3-
yarn transpile
4-j'ai déplacé le ES5 fichier à mon code, et il a travaillé
Mise À Jour Complète De Fixer
Je inclus mon dossier src et les bibliothèques de babel trop
Module parse failed: Unexpected token (10:2) You may need an appropriate loader to handle this file type. const pop = payload => ({ type: POP, ...payload, });
react-navigation
avecreact-native-web
(texte dactylographié). Lorsque j'essaie d'inclurereact-navigation
module, c'est de donner à l'erreur. tous liés à la propagation de l'opérateur.babel-plugin-transform-object-rest-spread
etbabel-preset-stage-0
dansconfig/webpack.config.dev.js
; mais aucun n'a fonctionné.Je pense que c'est à cause de ES7 fonctionnalité. Avez-vous des
stage-0
installé & ajouté à votre.babelrc
ouwebpack.config.js
fichier?Ici comment vous pouvez le faire:
npm i --save-dev babel-preset-stage-0
Et puis, vous devriez inclure dans
webpack.config.js
fichier comme ci-dessous:Ou l'ajouter à
.babelrc
fichier:Mise à JOUR
Comme je l'ai dit plus tôt, la question appartient à ES7 fonctionnalité. Semble comme
webpack
ne peut pas résoudrestatic
mot-clé dansreact-native-web-linear-gradient
module. Donc, ce que j'ai fait pour résoudre ce problème:react-native-web-linear-gradient
dans mon propre composant appeléLinearGradient
. Je n'ai pas changer quoi que ce soit à l'intérieur.stage-0
et de l'ajouter à.babelrc
comme je l'ai décrit ci-dessus.react-native-web-linear-gradient
- je utiliser monLinearGradient
composant.Comme un résultat que j'ai obtenu de gradient sur ma page.
git
lien de projet.Espère que ça va aider!
C'est de cette façon webpack peut être configuré pour la charge des actifs, comme les images (
pngs
,svgs
,jpgs
et ainsi de suite):npm install --save-dev file-loader
webpack.config.js
, en vertu de lamodule.exports.rules
:npm install gatsby-plugin-force-file-loader
? Gatsby n'aime pasnpm install --save-dev file-loader
donc la recherche d'une solution de contournement! Merci d'avance