¿Cómo resolver el famoso problema "Cannot use import statement outside a module"
en una aplicación Electron-React-Typescript?
//const { app, BrowserWindow } = require('electron'); import { app, BrowserWindow } from 'electron';
Error :
import { app, BrowserWindow } from 'electron'; ^^^^^^ SyntaxError: Cannot use import statement outside a module
en package.json agregué:
"type": "module",
devDependencies en paquete.json:
"@types/node": "^14.14.28", "@types/react": "^17.0.2", "electron": "^11.2.3", "typescript": "^4.1.5", "webpack": "^5.21.2"
tsconfig.json:
{ "compilerOptions": { "target": "ES2018", "module": "CommonJS", "lib": ["dom", "esnext"], "outDir": "dist", "declaration": true, "declarationMap": true, "noEmit": true, "jsx": "react", "strict": true, "pretty": true, "sourceMap": true, "skipLibCheck": true, "noImplicitAny": false, "noImplicitThis": false, /* Additional Checks */ "noUnusedLocals": true, "noUnusedParameters": true, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true, /* Module Resolution Options */ "moduleResolution": "node", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "resolveJsonModule": true, "allowJs": true }, "include": ["src/**/*"], "exclude": [ "src/index.js", "dist", ] }
También agregué los complementos de babel.config.json:
["@babel/plugin-transform-modules-commonjs", { "allowTopLevelThis": true }],
y en paquete.json:
"scripts": { "babel": "babel ./src/**/* -d dist", "start": "yarn run babel && electron .",
¿Qué tengo que agregar/modificar para poder usar "importar"?
Gracias al experto de Electron, descubrí dos errores que causaron ese problema:
Modifiqué la ruta principal en package.json
"main": "./src/main/main.ts"
---> "main": "./dist/main/main.js"
porque electron solo puede entender el archivo compilado
Lo eliminé en package.js en
"type": "module"
que de lo contrario requeriría cambiar archivos .js to
.cjs