Búsqueda de sitios web

La configuración de Webpack escrita en TypeScript arroja un error sobre import


Recientemente he intentado migrar mi configuración de Webpack escrita en JavaScript a TypeScript. Desafortunadamente, tengo muchas dificultades con esto. He escrito un archivo de configuración mínimo para webpack con el que empezar, por lo que faltan algunas partes. Mi webpack.config.ts se ve así:

import webpack from "webpack";

const config: webpack.Configuration = {
    entry: {
        bookmarklet: 'bookmarklet.ts'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
}

export default config;

Tengo un tsconfig.json que contiene:

{
    "compilerOptions": {
        "module": "ESNext",
        "target": "ES6",
        "lib": ["ES6", "dom"],
        "strict": true,
        "isolatedModules": true,
        "esModuleInterop": true,
        "moduleResolution": "Node",
        "skipLibCheck": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "removeComments": false
    }
}

El package.json contiene:

{
  "name": "bookmarklets",
  "version": "0.0.1",
  "description": "A collection of bookmarklets",
  "license": "MIT",
  "scripts": {
    "build": "webpack --config webpack.config.ts"
  },
  "devDependencies": {
    "@types/node": "^14.10.0",
    "@types/webpack": "^4.41.22",
    "bookmarklet-wrapper-webpack-plugin": "^1.0.1",
    "ts-node": "^9.0.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  }
}

Al ejecutar yarn build se produce el siguiente error:

yarn run v1.22.5
webpack --config webpack.config.ts
/home/codespace/workspace/zli-bookmarklets/webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import webpack from "webpack";
                                                              ^^^^^^

SyntaxError: Cannot use import statement outside a module
    at new Script (vm.js:88:7)
    at NativeCompileCache._moduleCompile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:242:18)
    at Module._compile (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (/home/codespace/workspace/zli-bookmarklets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:114:13)
    at requireConfig (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:116:6)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:123:17
    at Array.forEach (<anonymous>)
    at module.exports (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/utils/convert-argv.js:121:15)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:71:45
    at Object.parse (/home/codespace/workspace/zli-bookmarklets/node_modules/yargs/yargs.js:576:18)
    at /home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:49:8
    at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack-cli/bin/cli.js:366:3)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> (/home/codespace/workspace/zli-bookmarklets/node_modules/webpack/bin/webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

¿Cómo encapsulo mi configuración dentro de un módulo? ¿Cuál es la razón del error?

Actualizar

También he probado el siguiente tsconfig.json como se sugiere aquí:

{
    "compilerOptions": {
        "module": "CommonJS",
        "target": "ES5",
        "esModuleInterop": true,
    }
}

Desafortunadamente ocurre el mismo error.

Respuesta #1

he resuelto con

{
    "compilerOptions": {...},
    "ts-node": {
        "compilerOptions": {
        "module": "CommonJS"
     }
  }
}

Artículos relacionados