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

Ouverte
#7,466 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

bug P2
Langage dominant
JavaScript
Étoiles
18.3k
Forks
2k
Merge moyen
2 j 12 h
PR mergées (30 j)
28

Description

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": [],

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Commencez par webpack.config.js et la configuration de build Angular dans angular.json, puis reproduisez le build avec la feuille de style maplibre-gl indiquée et la configuration Webpack personnalisée. Suivez le traitement du fichier CSS et confirmez que le build se termine sans l’erreur signalée « Module parse failed ».

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, javascript, webpack
Domaine
build-system, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.