Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

198
Vistas
Webpack Can't Load Modules ... When "type":""module"?

I'm trying to build a project with Webpack 5.74.0 (after installing it globally):

webpack --config src/webpack.config.js

My src/webpack.config.js file uses import syntax, eg:

import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';

But that should be fine because I have:

"type": "module"

in the project's package.json. However, despite that, when I run Webpack I get:

[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)

I understand that I can use loaders to enable import syntax in the project I'm building ... but how can I fix Webpack to read the config file, if it ignores my package.json?

EDIT: I found a workaround: if I rename webpack.config.js => webpack.config.mjs (ie. I force it to recognize the file as an ES Module file) everything works.

But, it still doesn't answer why Webpack ignores "type": "module" in my package.json, so I'm leaving the question open in hopes of understanding that.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

When you are in webpack.config.js, what you are writing is JavaScript code for Node.js to set up a development environnement. That means that in order to be able to use ES modules with import syntax there, you should use one of the needed set up for Node.js, adding "type": "module" in package.json or using .mjs as you did.

Here is what the Node.js's doc says:

Node.js has two module systems: CommonJS modules and ECMAScript modules. Authors can tell Node.js to use the ECMAScript modules loader via the .mjs file extension, the package.json "type" field, or the --input-type flag. Outside of those cases, Node.js will use the CommonJS module loader.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda