Después de investigar durante unas horas, no creo que este problema en particular sea un duplicado.
Estoy incluyendo d3 en un proyecto usando Webpack. Estoy siguiendo la técnica recomendada de "importar * como d3 desde 'd3'", pero por alguna razón aparece "Error de referencia no detectado: d3 no está definido". Cuando reviso el archivo de paquete generado, veo que importó todos los módulos d3, sin embargo, por alguna razón, el archivo principal d3.js no está allí. ¿Alguna pista de lo que está pasando?
Esto se está ejecutando en Chrome. Cuando escribo "d3" o "window.d3" en la consola, devuelve "Error de referencia no detectado: d3 no está definido".
paquete.json
"dependencies": { "d3": "^7.1.1", "fisforformat": "^2.0.0", "jquery": "^3.6.0" },la llamada de importación
import * as d3 from 'd3';webpack.config.js (v5.59.1)
const path = require('path'); module.exports = { entry: './src/lib.js', output: { filename: 'lib.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: "swc-loader" } } ], }, };Me lo imaginé. Webpack encapsula los recursos importados y solo los expone a otros módulos cargados a través de Webpack. Tenía lógica en mi que estaba comprobando si window.d3 existía antes de intentar dibujar un gráfico y dado que d3 no estaba expuesto globalmente, esa comprobación falló. Además, cuando estaba solucionando problemas con la consola, no pude ver d3 por la misma razón. Cambié a la lógica en mi código para verificar solo d3 en lugar de window.d3 y comenzó a funcionar.
Para su información, si realmente necesita hacer algo global importado, puede hacer algo como esto en su archivo js de entrada:
import * as d3 from 'd3'; window.d3 = d3;Editar: aún mejor, puede usar el cargador de exposición .