SyntaxError: Cannot use import statement outside a module

发布时间:2022-07-29 发布网站:https://blog.csdn.net/weixin_44184425
前端之家收集整理的这篇文章主要介绍了SyntaxError: Cannot use import statement outside a module前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

以往都在 node 中使用 require 导入模块,直到我有一次使用 lodash 时遇到这么个问题

SyntaxError: Cannot use import statement outside a module


作为强迫症的我当然受不了 require 下面的那三个点!

背景知识

上面的提到了两个 module,一个是 CommonJS module,一个是 ES6 module。姑且把他们先理解成这样——CommonJS 使用 require 语法导入模块,ES6 使用 import 语法导入模块

// a.js
const a = 123
module.exports = a

// b.js
const newA = require('./a')
console.log(newA)    // 123
// c.js
const a = 456
export { a }

// d.js
import { a } from './a.js'
console.log(a)    // 456

回到问题

既然要用 ES6 模块来解决,那就用吧。

import _ from 'lodash'
// 模拟使用 lodash 方法
console.log(_)

还没打印,就弹一堆错误

(node:9348) Warning: To load an ES module,set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

import _ from 'lodash'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)     
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
    at node:internal/main/run_main_module:17:47

仔细观察发现,警告里有一个 package.json 提示,看来我们需要初始化一个 npm 项目

解决

  1. npm init -y —— 初始化 npm 项目
  2. 找到 package.json 文件,在里面的配置中加一行 "type": "module"

后记

2021-10-11 打包 Webpack 程序时出现类似问题

[webpack-cli] Failed to load 'D:\Download Files\nodejs-myblog\code-demo\webpack-test\webpack.config.js' config
[webpack-cli] ReferenceError: require is not defined in ES module scope,you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'D:\Download Files\nodejs-myblog\code-demo\webpack-test\package.json' contains "type": "module". To treat it as a CommonJS script,rename it to use the '.cjs' file extension.
    at file:///D:/Download%20Files/nodejs-myblog/code-demo/webpack-test/webpack.config.js:1:14
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async WebpackCLI.tryRequireThenImport (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:269:18)      
    at async loadConfigByPath (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:1725:19)
    at async WebpackCLI.loadConfig (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:1845:30)
    at async WebpackCLI.createCompiler (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:2200:18)
    at async WebpackCLI.runWebpack (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:2336:16)
    at async Command.<anonymous> (D:\Download Files\nodejs-myblog\code-demo\webpack-test\node_modules\_webpack-cli@4.9.0@webpack-cli\lib\webpack-cli.js:1073:13)

让我们把眼光注意到第二行

ReferenceError: require is not defined in ES module scope,you can use import instead

这里跟上面的意思一样,因为我在 package.json 文件中定义了 "type": "module" ,因此程序认为代码的导入模块应该使用 ES6 语法,而不是 CommonJS 语法。因此我们把 "type": "module" 删去,就可以正常运行了。

总结


以上是前端之家为你收集整理的SyntaxError: Cannot use import statement outside a module全部内容,希望文章能够帮你解决SyntaxError: Cannot use import statement outside a module所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。