javascript - Babel not allowing imports without .js file extension - Stack Overflow

admin 管理员组

文章数量: 1086019

I have installed babel and can now use import syntax for example. However, this code import { dbConnect } from './utils/dbConnect.js'; works but this code import { dbConnect } from './utils/dbConnect'; does not work.

I have been searching for hours online, and from what I understand, this functionality should be auto enabled in @babel/preset-env that I already have installed. Here are my dependencies:

"dependencies": {
    "@babel/core": "^7.14.6",
    "@babel/node": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.12.14",
    "nodemon": "^2.0.7"
  },
  "devDependencies": {
    "eslint": "^7.28.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.23.4"
  }

I currently do not have a .babelrc file.

Here is the error:

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/me/Repositories/myrepo/server/utils/dbConnect' imported from /Users/me/Repositories/myrepo/server/index.js
Did you mean to import ../utils/dbConnect.js?
    at finalizeResolution (internal/modules/esm/resolve.js:276:11)
    at moduleResolve (internal/modules/esm/resolve.js:699:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:88:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:241:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
    at link (internal/modules/esm/module_job.js:55:36) {
  code: 'ERR_MODULE_NOT_FOUND'

I have installed babel and can now use import syntax for example. However, this code import { dbConnect } from './utils/dbConnect.js'; works but this code import { dbConnect } from './utils/dbConnect'; does not work.

I have been searching for hours online, and from what I understand, this functionality should be auto enabled in @babel/preset-env that I already have installed. Here are my dependencies:

"dependencies": {
    "@babel/core": "^7.14.6",
    "@babel/node": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^10.0.0",
    "express": "^4.17.1",
    "mongoose": "^5.12.14",
    "nodemon": "^2.0.7"
  },
  "devDependencies": {
    "eslint": "^7.28.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-plugin-import": "^2.23.4"
  }

I currently do not have a .babelrc file.

Here is the error:

internal/process/esm_loader.js:74
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/me/Repositories/myrepo/server/utils/dbConnect' imported from /Users/me/Repositories/myrepo/server/index.js
Did you mean to import ../utils/dbConnect.js?
    at finalizeResolution (internal/modules/esm/resolve.js:276:11)
    at moduleResolve (internal/modules/esm/resolve.js:699:10)
    at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)
    at Loader.resolve (internal/modules/esm/loader.js:88:40)
    at Loader.getModuleJob (internal/modules/esm/loader.js:241:28)
    at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)
    at link (internal/modules/esm/module_job.js:55:36) {
  code: 'ERR_MODULE_NOT_FOUND'

• javascript
• babeljs

Share Improve this question Follow edited Jun 16, 2021 at 19:21 JumpingElephant asked Jun 16, 2021 at 5:21 JumpingElephantJumpingElephant 16122 silver badges77 bronze badges 4

• So what is the error you get? "does not work" is not a useful description. – loganfsmyth Commented Jun 16, 2021 at 5:37
• @loganfsmyth apologies i thought the description was enough. Edited my OP to include the error. – JumpingElephant Commented Jun 16, 2021 at 6:07
• 1 That error doesn't appear to be from Babel, though it is hard to tell without the stacktrace. Are you using Node's native module? (As in "type":"module" in your package.json?) – loganfsmyth Commented Jun 16, 2021 at 15:56
• 1 Yes my package.json is of type module. Ill try to post the full trace when I get back home. – JumpingElephant Commented Jun 16, 2021 at 17:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

I ended up enabling imports without file extension with the following: --experimental-modules --es-module-specifier-resolution=node added to the node while running my app.

My start script is now: "start": "nodemon --exec babel-node --require dotenv/config --experimental-modules --es-module-specifier-resolution=node index.js"

If you use Node's builtin ES module support via "type": "module" or .mjs then you are opting into more restrictive requirements. Node requires you to explicitly provide file extensions as part of that.

Babel's official plugins don't have any logic to add extensions, since that's not really related to ECMAScript as a language/specification. You could consider user a munity plugin like https://www.npmjs./package/babel-plugin-add-import-extension, which appears to support what you're looking for.

本文标签： javascriptBabel not allowing imports without js file extensionStack Overflow