plotly / plotly/plotly.js

Upgrading to plotly ^3- Angular build fails with this Webpack error: java Copy Edit Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type

Offen
#7,466 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

bug P2
Vorherrschende Sprache
JavaScript
Sterne
18.3k
Forks
2k
Ø Merge
2 T. 12 Std.
Gemergte PRs (30 T.)
28

Beschreibung

When using a recent version of plotly.js (or @plotly/mapbox), which internally depends on maplibre-gl, the build fails with this Webpack error:
./node_modules/maplibre-gl/dist/maplibre-gl.css:1:0 - Error: Module parse failed: Unexpected token (1:0)

I have a custom webpack.config.js
const webpack = require('webpack');

module.exports = (config) => {
// Add polyfills
config.resolve = config.resolve || {};
config.resolve.fallback = {
...config.resolve.fallback,
stream: require.resolve('stream-browserify'),
buffer: require.resolve('buffer/')
};

config.plugins = config.plugins || [];
config.plugins.push(
new webpack.ProvidePlugin({
Buffer: ['buffer', 'Buffer'],
process: 'process/browser'
})
);

// Tell webpack to ignore CSS imports from plotly.js
config.module.rules.push({
test: /.css$/,
use: 'null-loader',
include: /node_modules[/\]plotly.js/
});

return config;
};

I have it in the styles on angular.json-
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./webpack.config.js"
},
"outputPath": "dist/sizingTool-ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/maplibre-gl/dist/maplibre-gl.css",
"src/styles.css",
"src/theme.scss",
"node_modules/primeng/resources/themes/saga-green/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/open-iconic/font/css/open-iconic-bootstrap.min.css",
"node_modules/ngx-spinner/animations/ball-newton-cradle.css"
],
"scripts": [],

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit webpack.config.js und der Angular-Build-Konfiguration in angular.json und reproduziere dann den Build mit dem aufgeführten maplibre-gl-Stylesheet und dem benutzerdefinierten Webpack-Setup. Verfolge, wie die CSS-Datei verarbeitet wird, und bestätige, dass der Build ohne den gemeldeten Fehler „Module parse failed“ abgeschlossen wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, javascript, webpack
Bereich
build-system, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.