Estoy tratando de construir un proyecto con Webpack 5.74.0 (después de instalarlo globalmente):
webpack --config src/webpack.config.js Mi archivo src/webpack.config.js usa sintaxis de import , por ejemplo:
import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';Pero eso debería estar bien porque tengo:
"type": "module" en el package.json del proyecto. Sin embargo, a pesar de eso, cuando ejecuto Webpack obtengo:
[webpack-cli] Failed to load '/home/me/project/src/webpack.config.js' config [webpack-cli] /home/me/project/src/webpack.config.js:1 import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:352:18) at wrapSafe (node:internal/modules/cjs/loader:1033:15) at Module._compile (node:internal/modules/cjs/loader:1069:27) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at WebpackCLI.tryRequireThenImport (/home/me/project/node_modules/webpack-cli/lib/webpack-cli.js:204:22) at loadConfigByPath (/home/me/project/node_modules/webpack-cli/lib/webpack-cli.js:1404:38) Entiendo que puedo usar cargadores para habilitar la sintaxis de import en el proyecto que estoy construyendo ... pero ¿cómo puedo arreglar Webpack para leer el archivo de configuración, si ignora mi package.json ?
EDITAR: Encontré una solución alternativa: si cambio el nombre webpack.config.js => webpack.config.mjs (es decir, lo obligo a reconocer el archivo como un archivo de módulo ES), todo funciona.
Pero todavía no responde por qué Webpack ignora "type": "module" en mi package.json , así que dejo la pregunta abierta con la esperanza de entender eso.
Cuando está en webpack.config.js , lo que está escribiendo es un código JavaScript para que Node.js configure un entorno de desarrollo. Eso significa que para poder usar módulos ES con sintaxis de import allí, debe usar una de las configuraciones necesarias para Node.js, agregando "type": "module" en paquete.json o usando .mjs como lo hizo .
Esto es lo que dice el documento de Node.js :
Node.js tiene dos sistemas de módulos: módulos CommonJS y módulos ECMAScript. Los autores pueden decirle a Node.js que use el cargador de módulos ECMAScript a través de la extensión de archivo
.mjs, el campo"type"depackage.jsono el--input-type. Fuera de esos casos, Node.js utilizará el cargador de módulos CommonJS.