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
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 18.3k
- Forks
- 2k
- Merge medio
- 2 d 12 h
- PR fusionados (30 d)
- 28
Descripción
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": [],
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza con webpack.config.js y la configuración de compilación de Angular en angular.json; después, reproduce la compilación utilizando la hoja de estilos de maplibre-gl indicada y la configuración personalizada de Webpack. Sigue cómo se procesa el archivo CSS y confirma que la compilación se completa sin el error notificado «Module parse failed».
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, javascript, webpack
- Área
- build-system, frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100