Приложение загружается до того, как зависимости requirejs получат Uncaught Error: Несоответствующий анонимный define () - PullRequest
Новая
       8

Приложение загружается до того, как зависимости requirejs получат Uncaught Error: Несоответствующий анонимный define ()

0 голосов
/ 14 февраля 2019

У меня есть следующие внешние зависимости в моем файле webpack.config.prod.js: 

const webpack = require('webpack');
const path = require('path');

const config = {
    mode: 'production',
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'app.js',
        libraryTarget: 'amd',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    externals: {
        react: 'react',
        'react-dom': 'react-dom'
    },
};
module.exports = config;

, и у меня есть следующий скрипт в моем html-файле: 

<!DOCTYPE html>
<html>
    <head>
        <title>React App</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js" crossorigin=""></script>
        <script>
          (function(cdn) {
            require(cdn);
            ['react', 'react-dom'].forEach(dep => (dep) => {
              define(dep, cdn, function(b) {
                return b[dep];
              });
            });
          })(['http://localhost:8080/public/bundle.js'])
        </script>
    </head>
    <body>
        <div id="app"></div>
        <script src="app.js"></script>
    </body>
</html>

каквы можете видеть, что я пытаюсь загрузить свои реакции и реакции-домены из cdn, но app.js загружается перед зависимостями, поэтому я получаю:

Uncaught Ошибка: несоответствие анонимного определения () модуль: функция (e, t) {функция возврата (e) {var t = {}; функция n (r) {if (t [r]) возвращает t [r] .exports; var o = t [r]= {i: r, l:! 1, export: {}}; return e [r] .call (o.exports, o, o.exports, n), ol =! 0, o.exports} return nm =е, пс = т, й = функция (е, т, г) {нет (е, т) || Object.defineProperty (е, т, {перечислимы: 0, получаем: г})}, NR = функция (e) {"undefined"! = typeof Symbol && Symbol.toStringTag && Object.defineProperty (e, Symbol.toStringTag, {value: "Module"}), Object.defineProperty (e, " esModule", {value:! 0})}, nt = function (e, t) {if (1 & t && (e = n (e)), 8 & t) возвращает e; if (4 & t && "object" == typeof e && e && e .__ esModule) возвращает e; var r = Object.create(нуль), если (пг (г), Object.defineProperty (г, "DEFAult ", {enumerable:! 0, value: e}), 2 & t &&" string "! = typeof e) для (var o in e) nd (r, o, function (t) {return e [t]}. bind(null, o)); return r}, nn = function (e) {var t = e && e .__ esModule? function () {return e.default}: function () {return e}; return nd (t, "a", t), t}, no = function (e, t) {return Object.prototype.hasOwnProperty.call (e, t)}, np =" ", n (ns = 2)} ([function (t,n) {t.exports = e}, function (e, n) {e.exports = t}, function (e, t, n) {"использовать строгий"; nr (t); var r = n (0), o = nn (r), u = n (1), i = nn (u); function c (e) {return (c = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator? function(e) {вернуть typeof e}: функция (e) {вернуть e && "function" == typeof Symbol && e.constructor === Symbol && e! == Symbol.prototype? "symbol": typeof e}) (e)} функция f(e, t) {for (var n = 0; n || Object.getPrototypeOf (e)}) (e)} function p (e, t) {return (p = Object.setPrototypeOf || function (e, t) {return e.proto = t, e}) (e, t)} var y = function (e) {function t () {return function (e, t) {if (! (e instanceof t)) throw new TypeError («Невозможно вызвать класс как функцию»)} (this, t), a (this, l (t) .apply (this, arguments))} varn, r, u; вернуть функцию (e, t) {if ("function"! = typeof t && null! == t) бросить новый TypeError ("Супер-выражение должно быть либо нулевым, либо функцией"); e.prototype = Object.create (т && t.prototype, {конструктор: {значение: е, доступен для записи: 0, конфигурируемый: 0}}), т && р (е, т)} (т, oaComponent), п = т, (г = [{key: "render", value: function () {return oacreateElement ("div", null, "Hello", this.props.name)}}]) && f (n.prototype, r), u && f (n, u), t} (); iarender (oacreateElement (y, {name: "Jean"}), document.getElementById ("app"))}])} http://requirejs.org/docs/errors.html#mismatch в makeError (require.min.js: 1) atosingDefines (require.min.js: 1) at require.min.js: 1

Как я могу загрузить app.js после зависимостей?

...