"webpackJsonP is not defined" after upgrading to webpack 3

Viewed 435

I get an error since upgrading webpack to version 3 and my other packages to their respective latest versions. I use this for an app with office ui fabric react, however I cannot find the error. From my understanding, the load order of my chunks is correct so what is the problem here?

Here is my webpack config:

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

var config = {
    entry: {
        vendor: ["jquery", "react", "react-dom", "office-ui-fabric-react"]
    },
    //watch: true,
    output: {
        path: __dirname + "/dist",
        filename: './[name].js'
    },
    devtool: 'source-map',
    devServer: {
        contentBase: path.resolve(__dirname, './dist')
    },
    resolve: {
        alias: {
            Content: path.resolve(__dirname, "Content")
        },
        extensions: ['.ts', '.tsx', '.js']
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("vendor")
    ],
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: [
                    { loader: "ts-loader" }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "sass-loader" }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" }
                ]
            }
        ]
    }
}

config.entry.projectrecord = "./src/apps/csr_projects";
config.entry.contractcsr = "./src/apps/csr_contracts";
config.entry.finance = "./src/apps/finance";
config.entry.wpreviewer = "./src/apps/wpreviewer";

module.exports = config;

And my package.json

{
  "name": "MyApp",
  "version": "1.0.0",
  "description": "SharePoint Add-In",
  "main": "index.js",
  "types": "main.d.ts",
  "repository": "repo_url",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Me",
  "license": "UNLICENSED",
  "devDependencies": {
    "@types/jquery": "~3.2.16",
    "@types/react": "16.0.25",
    "@types/react-dom": "^16.0.3",
    "@types/sharepoint": "^2016.0.2",
    "@uifabric/icons": "^5.2.0",
    "css-loader": "^0.28.7",
    "jquery": "^3.2.1",
    "load-themed-styles": "^1.2.0",
    "node-sass": "^4.7.1",
    "office-ui-fabric-react": "^5.23.0",
    "raw-loader": "^0.5.1",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "systemjs": "^0.20.19",
    "ts-loader": "^3.1.1",
    "typescript": "~2.6.1",
    "webpack": "~3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "dependencies": {}
}

EDIT: The issue only persists in IE. Chrome and FF have no problems parsing the resulting script.

EDIT 2: When I use a prod build, I get an error "Set is undefined" in my vendor bundle. It seems IE doesn't support this. I have included a set polyfill with my webpack config but the error still persists.

0 Answers
Related