Got 'Cannot find module' error when I tried to import certain JS file

Question

I am currently learning JS and this is codes from practice. (which is from YDKJSY)

This is a publication.js

function printDetails(title,author,pubDate) { 
    console.log(` 
    Title: ${ title } 
    By: ${ author } 
    ${ pubDate } `
    ); 
}
export function create(title,author,pubDate) { 
    var publicAPI = { 
        print() { 
            printDetails(title,author,pubDate); 
        } 
     };
return publicAPI;
}

And this blogpost.js import publication.js

import { create as createPub } from "publication.js";
function printDetails(pub,URL) { 
    pub.print(); console.log(URL); 
}
export function create(title,author,pubDate,URL) { 
    var pub = createPub(title,author,pubDate);
var publicAPI = { print() { printDetails(pub,URL); 
        } 
    };
return publicAPI;
}

And finally main.js import blogpost.js

import { create as newBlogPost } from "blogpost.js";
var forAgainstLet = newBlogPost( 
    "For and against let", 
    "Kyle Simpson", 
    "October 27, 2014", 
    "https://davidwalsh.name/for-and-against-let" 
);

I converted these code by babel and got converted codes.

PS C:\users\leepc\babel> npm run build

> babel@1.0.0 build C:\users\leepc\babel
> babel ./public/src -d ./public/lib -w

public\src\blogpost.js -> public\lib\blogpost.js
public\src\main.js -> public\lib\main.js
public\src\publication.js -> public\lib\publication.js

but when I do npm run build and tried to run main.js I got this,

PS C:\users\leepc\babel\public\lib> node main.js

internal/modules/cjs/loader.js:984
  throw err;
  ^

Error: Cannot find module 'blogpost.js'
Require stack:
    at Module.require 
(internal/modules/cjs/loader.js:1043:19)     
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.<anonymous> 
(C:\users\leepc\babel\public\lib\main.js:3:17)     
    at Module._compile 
(internal/modules/cjs/loader.js:1157:30)    3:17)     
    at Object.Module._extensions..js 
(internal/modules/cjs/loader.js:117     
7:10)                                                                        
    at Module.load (internal/modules/cjs/loader.js:1001:32)                  
    at Function.Module._load 
(internal/modules/cjs/loader.js:900:14)         

    at Function.executeUserEntryPoint [as runMain] 
(internal/modules/run
_main.js:74:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ 
'C:\\users\\leepc\\babel\\public\\lib\\main.js' ]

}

I checked whether I forgot any installment.

PS C:\users\leepc\babel> npm ls --depth=0

babel@1.0.0 C:\users\leepc\babel
+-- @babel/core@7.8.4
+-- babel-cli@6.26.0
+-- babel-preset-env@1.7.0
`-- babel-preset-es2015@6.24.1

Lastley, about .babelrc

{
  "presets": ["env"]
}

and package.json build,

{
    ...
    "build": "babel ./public/src -d ./public/lib -w"
  }

I used node.js preset, but it got weird errors so I just left if with "env".

Sorry for a messy and long code, but I have been trouble for this problem these days and can't get to further studying. Please let me know is there any other information I have to post and edit in this question.

edit: is this maybe becasue I put all of this files in a same folder? should I have to put these in a certain different folder? This is a picture of my practice project folder

Answer 1

Okay it turns out, I should combine both of answers above.

First, I have to check whether my import plugin is right or wrong. So I just re-installed it.

npm install babel-plugin-import --save-dev

Make sure not to forget put plugin opitions. In my cases, I use this in .babelrc

{
    "presets": ["es2015"],
    "plugins": [["import", { "libraryName": "antd" }]]
}

this "plugins": [["import", { "libraryName": "antd" }] line means import js modulary.

And also next stuff, I have to make import path to be corrected.

import { create as newBlogPost } from "blogpost.js"; 

change this to

import { create as newBlogPost } from "./blogpost.js"; 

By doing this, now I can get a result that I wanted so far.

PS C:\Users\leePC\babel\public\lib> node main.js

    Title: For and against let 
    By: Kyle Simpson 
    October 27, 2014 

So majorly, 1. Check whether I missed some plugins or packages ( in my cases, I forgot import package ) 2. Make sure to check your import path

Thank you for help guys.

Answer 2

please try to have your modules relative to your file for importing. Usually, the imports with no paths are for node_modules.

import { create as newBlogPost } from "./blogpost.js"; 
// or wherever your blogpost.js is relative to your main.js
...

Answer 3

Have you followed the setup steps from https://www.npmjs.com/package/babel-plugin-import ?

npm install babel-plugin-import --save-dev

In .babelrc

{
  "plugins": [["import", options]]
}