How to use import statement?

[ngekoding]

I just try the basic, and want to use import to make the project structure better.

Here is the project stucture.

.
├── .vuepress
│   ├── config.js
│   └── configs
│       ├── index.js
│       └── sidebar
│           ├── id.js
│           └── index.js
├── README.md
└── guide
    └── README.md

I want to import the sidebar from config.js, and get the error below:

// docs/.vuepress/config.js
import { sidebar } from './configs'

And here is my project https://github.com/ngekoding/vuepress-starter

Am I doing something wrong?

Thanks in advance

[yzx9]

This is a limiation from node.js, mix import and require will get an error. The simplest solution is that change .js to .ts, typescript will help you solve the the problem.

[ngekoding]

Thanks for the answer.
So there is no way to use import with .js?
I'm afraid that will take a lot of time to understanding TypeScript or that just my thinking?

[yzx9]

So there is no way to use import with .js?

As I remember, we are using require in node side, so you have to make a workaround. There are some feasible solutions, like babel, but it also bring complexity, use require instead of import/export did not introduce anything new and solve your issue🤔

I'm afraid that will take a lot of time to understanding TypeScript or that just my thinking?

Haha😄, actually not, we have built-in esbuild which will help you transform .ts to .js, and typescript is a superset of javascript, all js code is legal ts code, like c in c++

[ngekoding]

@nsznsznjsz Thank you, I change it to use require and the error was gone.
But, I don't know how to replace the export part with require.

How to change this part?

export * as sidebar from './sidebar'

Sorry if this is a basic, but I can't found it yet on Google.

[yzx9]

@ngekoding Feel free to ask any question🙌, try following code:

// From:
export * as sidebar from './sidebar'
// To:
const sidebar = require('./sidebar')
exports.sidebar = sidebar

[ngekoding]

Thank you, the problem solved!