Ошибка при использовании modernizr-loader с горячей перезагрузкой vue -cli - PullRequest
Новая
       8

Ошибка при использовании modernizr-loader с горячей перезагрузкой vue -cli

0 голосов
/ 27 апреля 2020

Я использую webpack-modernizr-loader для загрузки конфигурации Modernizr в мое приложение Vue. js, которое скомпилировано с использованием vue-cli. Раньше все работало нормально.

Недавно я вернулся в проект и попытался снова поработать над ним. Когда я запускаю vue-cli-service build --modern для создания рабочей версии, все работает правильно.

Однако, когда я пытаюсь использовать сервер dev с горячей перезагрузкой, используя vue-cli-service serve, я получаю следующую ошибку компиляции, и ничего не работает: 

 ERROR  Failed to compile with 1 errors
 error  in ./.modernizrrc

Syntax Error: C:\path\to\project\node_modules\requirejs\bin\r.js:1
(function (exports, require, module, __filename, __dirname) { #!/usr/bin/env node
                                                              ^

SyntaxError: Invalid or unexpected token


 @ ./src/lib/modernizr-checks.js 6:16-36
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://172.16.66.101:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Вот файл modernizr-checks.js: 

const Modernizr = require('modernizr');

export function waitForTests (tests) {
    const testNames = Object.keys(tests);
    const testCount = testNames.length;
    const testsPassed = [];
    const testsFailed = [];

    return new Promise((resolve, reject) => {
        const checkIfDone = function () {
            if (testsPassed.length + testsFailed.length === testCount) {
                if (testsFailed.length === 0) {
                    resolve();
                } else {
                    reject(testsFailed);
                }
            }
        };

        const makeTestFunction = function (message) {
            return function (result) {
                if (result) {
                    testsPassed.push(message);
                } else {
                    testsFailed.push(message);
                }
                checkIfDone();
            };
        };

        testNames.forEach(name => {
            Modernizr.on(name, makeTestFunction(tests[name]));
        });
    });
}

Файл main.js использует его таким образом, чтобы предотвратить загрузку приложения Vue, если не пройдут все тесты: 

// ... [snip]

const modernizrTests = {
    eventlistener: 'Event Listener Support',
    fetch: 'Fetch API Support',
    flexbox: 'Flexbox Support',
    json: 'JSON Support',
    localstorage: 'LocalStorage Support',
    promises: '"Promise" Support',
    queryselector: 'QuerySelector Support',
    sessionstorage: 'SessionStorage Support',
    svg: 'SVG Graphics Support',
};

waitForTests(modernizrTests).then(() => {
    new Vue({
        router,
        store,
        vuetify,
        i18n,
        render: h => h(App),
    }).$mount('#app');
}).catch(failures => {
    document.getElementById('app').style.display = 'none';
    document.getElementById('deps-fail').style.display = 'block';
    var list = document.getElementById('failedTestsList');

    failures.forEach(message => {
        var li = document.createElement('li');
        li.innerHTML = message;
        list.appendChild(li);
    });
});

Вот vue.config.js, который используется для загрузки загрузчика modernizr: 

const path = require('path');
const modernizrConfig = require('./.modernizrrc');

module.exports = {
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.modernizrrc$/,
                    use: [
                        {
                            loader: 'webpack-modernizr-loader',
                            options: modernizrConfig,
                        },
                    ],
                },
            ],
        },
        resolve: {
            alias: {
                modernizr$: path.resolve(__dirname, './.modernizrrc'),
            },
        },
    },
};

А вот файл .modernizrrc: 

module.expoerts = {
    minify: true,
    options: [
        'addTest',
    ],
    'feature-detects': [
        'test/audio',
        'test/eventlistener',
        'test/json',
        'test/queryselector',
        'test/svg',
        'test/video',
        'test/websockets',
        'test/css/flexbox',
        'test/es6/promises',
        'test/network/eventsource',
        'test/network/fetch',
        'test/storage/localstorage',
        'test/storage/sessionstorage',
        'test/webrtc/getusermedia',
        'test/webrtc/peerconnection',
    ],
};

Насколько я могу судить, эта конфигурация почти такая же, как и вторая опция, описанная в README для плагина webpack-modernizr-loader. Раньше он также работал должным образом, и ничего не изменилось, о чем я знаю.

Я исследовал ошибку, но это довольно сложно для Google для таких обобщенных c терминов, и я ничего не могу найти.

Почему этот код не компилируется при использовании сервера Vue dev / hot-reload? Как я могу это исправить?

...