fix: addressing issues where webpackJsonp function is renamed (#105)

* fix: travis files * fix: fixing tests fixing most of the errors failing tests and builds * docs: adding comments * feat: adding css import * adding website 3 * adding style files as chunks * feat: move away from magic comments * fix: use dynamic require function * fix: addressing issues where webpackJsonp function is named something else issue brought to my attention. If window.webpackJsonp is renamed to something else. webpackRegister is not injected into the runtime properly fix #123
ScriptedAlchemy · Jan 30, 2020 · eb73e0d · eb73e0d
1 parent 5a54b79
commit eb73e0d
Show file tree

Hide file tree

Showing 12 changed files with 32 additions and 37 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -11,7 +11,7 @@
     "es6": true,
     "node": true
   },
-  "plugins": ["prettier"],
+  "plugins": ["prettier", "react-hooks"],
   "extends": ["airbnb", "plugin:prettier/recommended"],
   "rules": {
     "no-console": "off",

diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 *~
 *.swp
-.nodecypherrc
+.nodecipherrc
 node_modules
 .idea
 dist

diff --git a/.npmignore b/.npmignore
@@ -3,3 +3,4 @@ test
 .idea
 .travis.yml
 secure-src
+.nodecipherrc
diff --git a/.travis.yml b/.travis.yml
@@ -16,4 +16,4 @@ jobs:
         provider: script
         skip_cleanup: true
         script:
-          - yarn semantic-release
+          - yarn semantic-release
diff --git a/manual/Website1/src/App.jsx b/manual/Website1/src/App.jsx
@@ -1,10 +1,6 @@
 import React, { Component } from "react";
 import {
   ExternalComponent,
-  corsImport,
-  getChunkPath,
-  getChunkDependencies,
-  importDependenciesOf
 } from "webpack-external-import";
 import HelloWorld from "./components/goodbye-world";
 import "react-select";
@@ -25,12 +21,6 @@ class App extends Component {
       .then(() => __webpack_require__("TitleComponentWithCSSFile"))
   }
 
-  renderDynamic = () => {
-    const { loaded } = this.state;
-    if (!loaded) return null;
-    return __webpack_require__("SomeExternalModule").default();
-  };
-
   render() {
     return (
       <div>
@@ -51,7 +41,6 @@ class App extends Component {
           export="Title"
           title="Title Component With CSS File Import"
         />
-        {this.renderDynamic()}
       </div>
     );
   }

diff --git a/manual/Website1/yarn.lock b/manual/Website1/yarn.lock
@@ -2,7 +2,7 @@
 # yarn lockfile v1
 
 
-"@babel/cli@^7.4.3":
+"@babel/cli@7.7.7":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.7.7.tgz#56849acbf81d1a970dd3d1b3097c8ebf5da3f534"
   integrity sha512-XQw5KyCZyu/M8/0rYiZyuwbgIQNzOrJzs9dDLX+MieSgBwTLvTj4QVbLmxJACAIvQIDT7PtyHN2sC48EOWTgaA==
@@ -25,7 +25,7 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/core@^7.4.3":
+"@babel/core@7.7.7":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9"
   integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ==
@@ -325,7 +325,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-dynamic-import@^7.2.0", "@babel/plugin-syntax-dynamic-import@^7.7.4":
+"@babel/plugin-syntax-dynamic-import@7.7.4", "@babel/plugin-syntax-dynamic-import@^7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.7.4.tgz#29ca3b4415abfe4a5ec381e903862ad1a54c3aec"
   integrity sha512-jHQW0vbRGvwQNgyVxwDh4yuXu4bH1f5/EICJLAhl1SblLs2CDhrsmCk+v5XLdE9wxtAFRyxx+P//Iw+a5L/tTg==
@@ -598,7 +598,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-runtime@^7.5.0":
+"@babel/plugin-transform-runtime@7.7.6":
   version "7.7.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.7.6.tgz#4f2b548c88922fb98ec1c242afd4733ee3e12f61"
   integrity sha512-tajQY+YmXR7JjTwRvwL4HePqoL3DYxpYXIHKVvrOIvJmeHe2y1w4tz5qz9ObUDC9m76rCzIMPyn4eERuwA4a4A==
@@ -653,7 +653,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.4"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/preset-env@^7.4.3":
+"@babel/preset-env@7.7.7":
   version "7.7.7"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.7.tgz#c294167b91e53e7e36d820e943ece8d0c7fe46ac"
   integrity sha512-pCu0hrSSDVI7kCVUOdcMNQEbOPJ52E+LrQ14sN8uL2ALfSqePZQlKrOy+tM4uhEdYlCHi4imr8Zz2cZe9oSdIg==
@@ -710,7 +710,7 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-react@^7.0.0":
+"@babel/preset-react@7.7.4":
   version "7.7.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.7.4.tgz#3fe2ea698d8fb536d8e7881a592c3c1ee8bf5707"
   integrity sha512-j+vZtg0/8pQr1H8wKoaJyGL2IEk3rG/GIvua7Sec7meXVIvGycihlGMx5xcU00kqCJbwzHs18xTu3YfREOqQ+g==
@@ -1247,12 +1247,12 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-babel-core@^7.0.0-bridge.0:
+[email protected]:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
-babel-loader@^8.0.5:
+[email protected].6:
   version "8.0.6"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
   integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
@@ -2508,7 +2508,7 @@ escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-eslint-loader@^3.0.3:
+[email protected]:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-3.0.3.tgz#e018e3d2722381d982b1201adb56819c73b480ca"
   integrity sha512-+YRqB95PnNvxNp1HEjQmvf9KNvCin5HXYYseOXVC2U0KEcw4IkQ2IQEBG46j7+gW39bMzeu0GsUhVbBY3Votpw==
@@ -5045,7 +5045,7 @@ [email protected]:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
-react-hot-loader@^4.8.3:
+react-hot-loader@4.12.18:
   version "4.12.18"
   resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.18.tgz#a9029e34af2690d76208f9a35189d73c2dfea6a7"
   integrity sha512-qYD0Qi9lIbg9jLyfmodfqvAQqCBsoPKxAhca8Nxvy2/2pO5Q9r2kM28jN0bbbSnhwK8dJ7FjsfVtXKOxMW+bqw==
@@ -6207,7 +6207,7 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   dependencies:
     minimalistic-assert "^1.0.0"
 
-webpack-cli@^3.3.0:
+[email protected].10:
   version "3.3.10"
   resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.10.tgz#17b279267e9b4fb549023fae170da8e6e766da13"
   integrity sha512-u1dgND9+MXaEt74sJR4PR7qkPxXUSQ0RXYq8x1L6Jg1MYVEmGPrH6Ah6C4arD4r0J1P5HKjRqpab36k0eIzPqg==
@@ -6235,7 +6235,7 @@ webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@^3.2.1:
+webpack-dev-server@3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.10.1.tgz#1ff3e5cccf8e0897aa3f5909c654e623f69b1c0e"
   integrity sha512-AGG4+XrrXn4rbZUueyNrQgO4KGnol+0wm3MPdqGLmmA+NofZl3blZQKxZ9BND6RDNuvAK9OMYClhjOSnxpWRoA==
@@ -6307,7 +6307,7 @@ webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.29.6:
+webpack@4.41.5:
   version "4.41.5"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.5.tgz#3210f1886bce5310e62bb97204d18c263341b77c"
   integrity sha512-wp0Co4vpyumnp3KlkmpM5LWuzvZYayDwM2n17EHFr4qxBBbRokC7DJawPJC7TfSFZ9HZ6GsdH40EBj4UV0nmpw==
@@ -6407,7 +6407,7 @@ write-file-atomic@^2.3.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
-write-file-webpack-plugin@^4.5.0:
+[email protected].1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/write-file-webpack-plugin/-/write-file-webpack-plugin-4.5.1.tgz#aeeb68889194da5ec8a864667d46da9e00ee92d5"
   integrity sha512-AZ7qJUvhTCBiOtG21aFJUcNuLVo2FFM6JMGKvaUGAH+QDqQAp2iG0nq3GcuXmJOFQR2JjpjhyYkyPrbFKhdjNQ==

diff --git a/manual/Website2/package.json b/manual/Website2/package.json
@@ -15,6 +15,10 @@
     "src/components/Title/index.js": "TitleComponent",
     "src/components/hello-world/index.js": "SomeExternalModule"
   },
+  "interleave": {
+    "src/components/Title/index.js": "TitleComponent",
+    "src/components/hello-world/index.js": "SomeExternalModule"
+  },
   "devDependencies": {
     "@babel/cli": "7.7.7",
     "@babel/core": "7.7.7",

diff --git a/manual/webpack/webpack.dev.js b/manual/webpack/webpack.dev.js
@@ -23,6 +23,7 @@ module.exports = commonPaths => ({
     runtimeChunk: {
       name: "webpackRuntime"
     },
+    namedChunks: true,
     splitChunks: {
       chunks: "all",
       maxInitialRequests: Infinity,

diff --git a/package.json b/package.json
@@ -84,7 +84,7 @@
     "eslint-plugin-jsx-a11y": "6.2.3",
     "eslint-plugin-prettier": "3.1.2",
     "eslint-plugin-react": "7.17.0",
-    "eslint-plugin-react-hooks": "2.3.0",
+    "eslint-plugin-react-hooks": "^2.3.0",
     "flow-bin": "0.117.0",
     "html-webpack-plugin": "3.2.0",
     "jest": "25.1.0",

diff --git a/src/webpack/beforeStartup.js b/src/webpack/beforeStartup.js
@@ -7,10 +7,10 @@ export function addWebpackRegister(source) {
 
     return Template.asString([
       splitSource[0].replace(
-        'var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];',
+        `var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);`,
         Template.asString([
-          'var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];',
-          'var webpackRegister = window["webpackRegister"] = window["webpackRegister"] || [];'
+          'var webpackRegister = window["webpackRegister"] = window["webpackRegister"] || [];',
+          `var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);`
         ])
       ),
       "jsonpArray.push = function(data) {",

diff --git a/src/webpack/index.js b/src/webpack/index.js
@@ -4,6 +4,7 @@ const createHash = require("webpack/lib/util/createHash");
 // const FunctionModuleTemplatePlugin = require("webpack/lib/FunctionModuleTemplatePlugin");
 const fs = require("fs");
 const { mergeDeep } = require("./utils");
+
 const {
   addInterleaveExtention,
   addInterleaveRequire
@@ -539,10 +540,9 @@ class URLImportPlugin {
         // webpack does this and its how code splitting works. It exposes window.webpackJsonP
         // This registration system works just like webpacks, it exposes a function that allows information to be passed
         // into webpack runtime, because the function is in webpack runtime, i have access to all of webpacks internals
-        mainTemplate.hooks.beforeStartup.tap(
-          "URLImportPlugin",
-          addWebpackRegister
-        );
+        mainTemplate.hooks.beforeStartup.tap("URLImportPlugin", source => {
+          return addWebpackRegister(source, options.output.jsonpFunction);
+        });
 
         // add variables to webpack runtime which are available throughout all functions and closures within the runtime
         // localVars are like global variables for webpack, anything can access them.

diff --git a/yarn.lock b/yarn.lock
@@ -4401,7 +4401,7 @@ [email protected]:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-[email protected]:
+eslint-plugin-react-hooks@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.3.0.tgz#53e073961f1f5ccf8dd19558036c1fac8c29d99a"
   integrity sha512-gLKCa52G4ee7uXzdLiorca7JIQZPPXRAQDXV83J4bUEeUuc5pIEyZYAZ45Xnxe5IuupxEqHS+hUhSLIimK1EMw==