Webpack config (React/Redux) seems inherently fragile #1189

New Issue

fergalmoran · 2025-08-09T17:19:12Z

fergalmoran commented

2025-08-09 17:19:12 +00:00

Originally created by @jonorogers on 12/12/2016

When using the provided webpack config from the React/Redux template it seems to be fragile - breaking as soon as extra modules are installed.

The worst example I've run into is using openlayers and firebase. They break in different ways.

Adding firebase (npm install --save firebase) and a couple of statements to load up firebase will start generating webpack errors which aren't present if including this from a basic react-webpack template.

import * as firebase from 'firebase';

        let firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            storageBucket: "",
            messagingSenderId: ""
        };

        // Initialize Firebase - once for the app
        firebase.initializeApp(firebaseConfig);

Then adding openlayers (npm install --save openlayers) immediately breaks webpack - generating a huge amount of errors reading json files - like there's no json loader present.

ERROR in ./~/tough-cookie/package.json Module parse failed: C:\code\yo-asp-net-core-spa-react-redux\node_modules\tough-cookie\package.json Unexpected token (2:9) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (2:9)

There's lots more like that; all about peer packages.

I've seen this symptom (lots of errors about .json files) before, but I can't remember the exact modules which caused the issue.

Have tested this combination with react-webpack yo template with no problem.

*Originally created by @jonorogers on 12/12/2016* When using the provided webpack config from the React/Redux template it seems to be fragile - breaking as soon as extra modules are installed. The worst example I've run into is using openlayers and firebase. They break in different ways. Adding firebase (npm install --save firebase) and a couple of statements to load up firebase will start generating webpack errors which aren't present if including this from a basic react-webpack template. ``` import * as firebase from 'firebase'; let firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", storageBucket: "", messagingSenderId: "" }; // Initialize Firebase - once for the app firebase.initializeApp(firebaseConfig); ``` Then adding openlayers (npm install --save openlayers) immediately breaks webpack - generating a huge amount of errors reading json files - like there's no json loader present. ` ERROR in ./~/tough-cookie/package.json Module parse failed: C:\code\yo-asp-net-core-spa-react-redux\node_modules\tough-cookie\package.json Unexpected token (2:9) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (2:9)` There's lots more like that; all about peer packages. I've seen this symptom (lots of errors about .json files) before, but I can't remember the exact modules which caused the issue. Have tested this combination with [react-webpack yo template](https://github.com/react-webpack-generators/generator-react-webpack) with no problem.

fergalmoran closed this issue

2025-08-09 17:19:12 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1189