不能在模块 Electron React Typescript 之外使用 import 语句

Posted

技术标签:

【中文标题】不能在模块 Electron React Typescript 之外使用 import 语句【英文标题】:Cannot use import statement outside a module Electron React Typescript 【发布时间】:2021-05-18 08:17:05 【问题描述】:

如何解决 Electron-React-Typescript 应用程序中著名的问题 "Cannot use import statement outside a module"

//const  app, BrowserWindow  = require('electron');
import  app, BrowserWindow  from 'electron';

错误:

import  app, BrowserWindow  from 'electron';
^^^^^^
SyntaxError: Cannot use import statement outside a module

在 package.json 我添加了:

"type": "module",

package.json 中的devDependencies:

"@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",
  ]

我还添加了 babel.config.json 的插件:

["@babel/plugin-transform-modules-commonjs", 
  "allowTopLevelThis": true
],

在 package.json 中:

"scripts": 
   "babel": "babel ./src/**/* -d dist",
   "start": "yarn run babel && electron .",
电子:11.2.3 打字稿:4.1.5 节点:v14.5.0 操作系统: Ubuntu 18.04.4 桌面版

我必须添加/修改什么才能使用“导入”?

【问题讨论】:

***.com/questions/65762278/… 的副本 【参考方案1】:

感谢 Electron 的专家,我发现了导致该问题的两个错误:

    我在 package.json 中修改了 main 的路径

    "main": "./src/main/main.ts" ---> "main": "./dist/main/main.js"

    因为 electron 只能理解编译后的文件

    我在 package.js 上删除了

    "type": "module"

    否则需要更改 .js to .cjs 文件

【讨论】:

以上是关于不能在模块 Electron React Typescript 之外使用 import 语句的主要内容,如果未能解决你的问题,请参考以下文章

在 Electron + React + Webpack 设置中找不到模块“电子”

在 Electron + React 中使用静态资源

Electron 和 TypeScript (electron-builder):“不能在模块外使用 import 语句”

如何使用 React 和 TypeScript 设置 Electron?

Angular.ts 和 Electron:SyntaxError:不能在模块外使用 import 语句

Node.js实现PC端类微信聊天软件