2
votes

Les options d'options non valides du chargeur CSS ne doivent PAS avoir de propriétés supplémentaires

Nouveau développeur nativescript-vue ici ...

Je reçois soudainement des erreurs de compilation tns sur chaque fichier /components/*.vue lorsque j'exécute ma routine de construction normale:

$ rm -rf modules_noeud / hooks / plates-formes / package-lock.json
$ tns compile ios --bundle --env.config dev

ERREUR dans ./components/Startup.vue?vue&type=style&index=0&lang=css& (../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack /apply-css-loader.js!../node_modules/css-loader/dist/cjs.js??ref--1-2!../node_modules/vueloader/lib/loaders/stylePostLoader.js!../ node_modules / vue-loader / lib ?? vue-loader-options! ./ components / Startup.vue? vue & type = style & index = 0 & lang = css &)

La construction du module a échoué (à partir de ../node_modules/css-loader/dist/cjs.js): ValidationError: Options non valides du chargeur CSS

Les options ne doivent PAS avoir de propriétés supplémentaires

sur validateOptions (/Users/.../node_modules/css-loader/node_modules/schema-utils/src/validateOptions.js:32:11) à Object.loader (/Users/.../node_modules/css-loader/dist/index.js:44:28) @ ./components/Startup.vue?vue&type=style&index=0&lang=css& 1: 0-371 1: 387-390 1: 392-760 1: 392-760 @ ./components/Startup.vue @ ./router/index.js @ ./app.js

Cela semble être lié au UglifyJsPlugin fourni avec Nativescript. Dans mon webpack.config.js:

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
...
const config = {
        mode: mode,
        context: appFullPath,
        externals,
        ...
        minimize: Boolean(production),
        minimizer: [
                new UglifyJsPlugin({
                    parallel: true,
                    cache: true,
                    uglifyOptions: {
                        output: {
                            comments: false,
                        },
                        compress: {
                            // The Android SBG has problems parsing the output
                            // when these options are enabled
                            'collapse_vars': platform !== "android",
                            sequences: platform !== "android",
                        },
                    },
                }),
            ],

Je ne sais pas pourquoi cela échoue. Environnement:

OS X 10.14.5
tns: 5.3.4
nativescript: 5.4.2

webpack nativescript-vue

2 commentaires

vous semblez un développeur plus habile que moi, pourquoi supprimez-vous tous ces fichiers?

Je ne sais pas si je suis plus habile ... Je les rme juste pour m'assurer d'avoir une table rase quand je rencontre des problèmes de build.

3 Réponses :

1
votes

Je n'ai aucune expérience avec Vue, mais j'ai eu un problème similaire lorsque j'ai mis à jour les dépendances de mon projet React, en utilisant une configuration Webpack personnalisée.

CSS Loader a été mis à jour vers 3.0, et ils ont quelque peu changé leurs spécifications. Si vous avez accès à un fichier de configuration webpack, vous verrez peut-être quelque chose de similaire à ceci:

{
    loader: "css-loader",
    options: {
        modules: {
            localIdentName: "..."
        }
    }
}

Et cela devrait être changé en quelque chose comme ceci:

{
    loader: "css-loader",
    options: {
        modules: true,
        localIdentName: "..."
    }
}

Notez que la partie "..." sera une sorte de motif comme "[hash: base64: 5]" , pas littéralement un "..." .

Ceci peut ou peut être le problème spécifique, car il y a d'autres changements de rupture en dehors de celui-là. Vous pouvez trouver la liste des modifications de configuration de dernière minute ici: https://github.com/webpack -contrib / css-loader / releases

J'espère que cela vous aidera!

1 commentaires

Mes problèmes semblent spécifiques à uglifyjs-webpack-plugin, qui est inclus avec nativescript. Apparemment, l'activer avec --env.uglify n'aide pas. J'essaierai d'appliquer vos commentaires sur le formatage à mon propre webpack.config.js

0
votes

J'ai enfin trouvé la solution, en publiant ici pour d'autres personnes qui pourraient avoir besoin d'aide. Il s'avère que, selon Nativescript , Webpack devait être mis à niveau. L'exécution de ceci a fait l'affaire et m'a permis de construire et d'exécuter à nouveau: ./node_modules/.bin/update-ns-webpack --deps --configs

0 commentaires

2
votes

Si vous utilisez la version ^ 3.0.0 de Webpack css-loader, vous devrez légèrement mettre à jour votre webpack.config.

notez le 'Ici --->' dans le code ci-dessous. J'espère que cela vous aidera.

module.exports = {
  entry: `${SRC_DIR}`,
  output: {
    filename: 'bundle.js',
    path: `${DIST_DIR}`,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader',
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
Here--->   modules: {
Here--->    mode: 'local',
Here--->    localIdentName: '[local]--[hash:base64:5]',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

De plus, si vous travaillez avec un projet React, vous devrez peut-être mettre à jour le nom du style de votre composant. les nouvelles versions de react-scripts préfèrent la convention de dénomination des fichiers [nom] .module.css.

Ce lien explique comment. https://facebook.github.io/ create-react-app / docs / ajout-d'une-feuille-de-style-modules-css

0 commentaires