search

vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

Alpha73 Get the error: Cannot use import statement outside a module #2280

Closed arcqiufeng closed 1 year ago

arcqiufeng commented 1 year ago

Describe the bug

I got the following when I upgrade to the lastest alpha73:

SyntaxError: Cannot use import statement outside a module

Then I try to create new fresh project following the document and get the same.

What's wrong?

Reproduction

PS W:\work\2023\test> yarn add -D vitepress

yarn add v1.22.19 info No lockfile found. [1/4] Resolving packages... warning vitepress > vue > @vue/compiler-sfc > magic-string > sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead [2/4] Fetching packages... [3/4] Linking dependencies... warning "vitepress > @docsearch/js > @docsearch/react > @algolia/autocomplete-preset-algolia@1.7.4" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6". [4/4] Building fresh packages... success Saved lockfile. success Saved 47 new dependencies. info Direct dependencies └─ vitepress@1.0.0-alpha.73 info All dependencies ├─ @algolia/autocomplete-core@1.7.4 ├─ @algolia/autocomplete-preset-algolia@1.7.4 ├─ @algolia/cache-browser-local-storage@4.17.0 ├─ @algolia/cache-in-memory@4.17.0 ├─ @algolia/client-account@4.17.0 ├─ @algolia/client-analytics@4.17.0 ├─ @algolia/client-personalization@4.17.0 ├─ @algolia/logger-console@4.17.0 ├─ @algolia/requester-browser-xhr@4.17.0 ├─ @algolia/requester-node-http@4.17.0 ├─ @docsearch/css@3.3.3 ├─ @docsearch/js@3.3.3 ├─ @docsearch/react@3.3.3 ├─ @esbuild/win32-x64@0.17.18 ├─ @types/web-bluetooth@0.0.16 ├─ @vitejs/plugin-vue@4.1.0 ├─ @vue/compiler-sfc@3.2.47 ├─ @vue/devtools-api@6.5.0 ├─ @vue/reactivity-transform@3.2.47 ├─ @vue/reactivity@3.2.47 ├─ @vue/runtime-core@3.2.47 ├─ @vue/runtime-dom@3.2.47 ├─ @vue/server-renderer@3.2.47 ├─ @vueuse/core@10.1.0 ├─ @vueuse/metadata@10.1.0 ├─ @vueuse/shared@10.1.0 ├─ algoliasearch@4.17.0 ├─ ansi-sequence-parser@1.1.0 ├─ body-scroll-lock@4.0.0-beta.0 ├─ csstype@2.6.21 ├─ esbuild@0.17.18 ├─ jsonc-parser@3.2.0 ├─ mark.js@8.11.1 ├─ minisearch@6.0.1 ├─ nanoid@3.3.6 ├─ picocolors@1.0.0 ├─ postcss@8.4.23 ├─ preact@10.13.2 ├─ rollup@3.21.0 ├─ shiki@0.14.1 ├─ source-map-js@1.0.2 ├─ sourcemap-codec@1.4.8 ├─ vite@4.3.1 ├─ vitepress@1.0.0-alpha.73 ├─ vscode-oniguruma@1.7.0 ├─ vscode-textmate@8.0.0 └─ vue@3.2.47 Done in 6.98s.

PS W:\work\2023\test> npx vitepress init

vitepress v1.0.0-alpha.73

┌ Welcome to VitePress! │ ◇ Where should VitePress initialize the config? │ ./docs/ │ ◇ Site title: │ My Awesome Project │ ◇ Site description: │ A VitePress Site │ ◇ Theme: │ Default Theme │ ◇ Use TypeScript for config and theme files? │ Yes │ ◇ Add VitePress npm scripts to package.json? │ Yes │ └ Done! Now run npm run docs:dev and start writing.

PS W:\work\2023\test> yarn docs:dev

yarn run v1.22.19 warning package.json: No license field $ vitepress dev docs/ failed to load config from W:\work\2023\test\docs.vitepress\config.ts failed to start server. error: W:\work\2023\test\docs.vitepress\config.ts:1 import { defineConfig } from 'vitepress' ^^^^^^

SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:360:18) at wrapSafe (node:internal/modules/cjs/loader:1055:15) at Module._compile (node:internal/modules/cjs/loader:1090:27) at Module._extensions..js (node:internal/modules/cjs/loader:1180:10) at Object._require.extensions. [as .js] (file:///W:/work/2023/test/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64459:17) at Module.load (node:internal/modules/cjs/loader:1004:32) at Function.Module._load (node:internal/modules/cjs/loader:839:12) at Module.require (node:internal/modules/cjs/loader:1028:19) at require (node:internal/modules/cjs/helpers:102:18) at loadConfigFromBundledFile (file:///W:/work/2023/test/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64464:21) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

PS W:\work\2023\test>

Expected behavior

It should be work fine if following the documents.

System Info

PS W:\work\2023\test> npx envinfo --system --npmPackages vitepress --binaries --browsers

Need to install the following packages: envinfo@7.8.1 Ok to proceed? (y) y

System: OS: Windows 10 10.0.22621 CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700 @ 2.50GHz Memory: 49.02 GB / 63.73 GB Binaries: Node: 16.17.1 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.15.0 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.58), ChromiumDev (114.0.1793.0) Internet Explorer: 11.0.22621.1 npmPackages: vitepress: ^1.0.0-alpha.73 => 1.0.0-alpha.73

Additional context

None

Validations

brc-dd commented 1 year ago

Not sure but the logs show the command being run is vitepress dev docs/ notice the trailing slash. Is it there in the package.json too? I think the commands should just be vitepress dev docs, vitepress build docs, vitepress preview docs

arcqiufeng commented 1 year ago

The package.json that automatically generated by npx vitepress init :

{
  "devDependencies": {
    "vitepress": "^1.0.0-alpha.73"
  },
  "scripts": {
    "docs:dev": "vitepress dev docs/",
    "docs:build": "vitepress build docs/",
    "docs:preview": "vitepress preview docs/"
  }
}

And the in the docs:

PS W:\work\2023\test> cd docs
PS W:\work\2023\test\docs> tree /f
W:.
│  api-examples.md
│  index.md
│  markdown-examples.md
│
└─.vitepress
        config.ts

And in the config.ts:

import { defineConfig } from 'vitepress'

// https://vitepress.dev/reference/site-config
export default defineConfig({
  title: "My Awesome Project",
  description: "A VitePress Site",
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' }
    ],

    sidebar: [
      {
        text: 'Examples',
        items: [
          { text: 'Markdown Examples', link: '/markdown-examples' },
          { text: 'Runtime API Examples', link: '/api-examples' }
        ]
      }
    ],

    socialLinks: [
      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
    ]
  }
})
arcqiufeng commented 1 year ago

Not sure but the logs show the command being run is vitepress dev docs/ notice the trailing slash. Is it there in the package.json too? I think the commands should just be vitepress dev docs, vitepress build docs, vitepress preview docs

Then I remove the slash after docs, now the json is:

{
  "devDependencies": {
    "vitepress": "^1.0.0-alpha.73"
  },
  "scripts": {
    "docs:dev": "vitepress dev docs",
    "docs:build": "vitepress build docs",
    "docs:preview": "vitepress preview docs"
  }
}

and get the same:

PS W:\work\2023\test\docs> cd..
PS W:\work\2023\test>  yarn docs:dev
yarn run v1.22.19
warning package.json: No license field
$ vitepress dev docs
failed to load config from W:\work\2023\test\docs\.vitepress\config.ts
failed to start server. error:
W:\work\2023\test\docs\.vitepress\config.ts:1
import { defineConfig } from 'vitepress'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object._require.extensions.<computed> [as .js] (file:///W:/work/2023/test/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64459:17)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (file:///W:/work/2023/test/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64464:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
arcqiufeng commented 1 year ago

Now I create the brand new project test2, all with the default answer (only enter key) to npx vitepress init.

PS W:\work\2023\test> cd..

PS W:\work\2023> mkdir test2

    目录: W:\work\2023

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----         2023/4/24     11:31                test2

PS W:\work\2023> cd test2

PS W:\work\2023\test2> yarn add -D vitepress

yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning vitepress > vue > @vue/compiler-sfc > magic-string > sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "vitepress > @docsearch/js > @docsearch/react > @algolia/autocomplete-preset-algolia@1.7.4" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 47 new dependencies.
info Direct dependencies
└─ vitepress@1.0.0-alpha.73
info All dependencies
├─ @algolia/autocomplete-core@1.7.4
├─ @algolia/autocomplete-preset-algolia@1.7.4
├─ @algolia/cache-browser-local-storage@4.17.0
├─ @algolia/cache-in-memory@4.17.0
├─ @algolia/client-account@4.17.0
├─ @algolia/client-analytics@4.17.0
├─ @algolia/client-personalization@4.17.0
├─ @algolia/logger-console@4.17.0
├─ @algolia/requester-browser-xhr@4.17.0
├─ @algolia/requester-node-http@4.17.0
├─ @docsearch/css@3.3.3
├─ @docsearch/js@3.3.3
├─ @docsearch/react@3.3.3
├─ @esbuild/win32-x64@0.17.18
├─ @types/web-bluetooth@0.0.16
├─ @vitejs/plugin-vue@4.1.0
├─ @vue/compiler-sfc@3.2.47
├─ @vue/devtools-api@6.5.0
├─ @vue/reactivity-transform@3.2.47
├─ @vue/reactivity@3.2.47
├─ @vue/runtime-core@3.2.47
├─ @vue/runtime-dom@3.2.47
├─ @vue/server-renderer@3.2.47
├─ @vueuse/core@10.1.0
├─ @vueuse/metadata@10.1.0
├─ @vueuse/shared@10.1.0
├─ algoliasearch@4.17.0
├─ ansi-sequence-parser@1.1.0
├─ body-scroll-lock@4.0.0-beta.0
├─ csstype@2.6.21
├─ esbuild@0.17.18
├─ jsonc-parser@3.2.0
├─ mark.js@8.11.1
├─ minisearch@6.0.1
├─ nanoid@3.3.6
├─ picocolors@1.0.0
├─ postcss@8.4.23
├─ preact@10.13.2
├─ rollup@3.21.0
├─ shiki@0.14.1
├─ source-map-js@1.0.2
├─ sourcemap-codec@1.4.8
├─ vite@4.3.1
├─ vitepress@1.0.0-alpha.73
├─ vscode-oniguruma@1.7.0
├─ vscode-textmate@8.0.0
└─ vue@3.2.47
Done in 7.43s.

PS W:\work\2023\test2> npx vitepress init

  vitepress v1.0.0-alpha.73

┌   Welcome to VitePress! 
│
◇  Where should VitePress initialize the config?
│  ./
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

PS W:\work\2023\test2> yarn docs:dev

yarn run v1.22.19
warning package.json: No license field
$ vitepress dev
failed to load config from W:\work\2023\test2\.vitepress\config.ts
failed to start server. error:
W:\work\2023\test2\.vitepress\config.ts:1
import { defineConfig } from 'vitepress'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object._require.extensions.<computed> [as .js] (file:///W:/work/2023/test2/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64459:17)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (file:///W:/work/2023/test2/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64464:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
zRains commented 1 year ago

There is no problem with npm and yarn for me. Could you provide repo or stackblitz example?

arcqiufeng commented 1 year ago

I am not a programmer and I don't know how to operate using stackblitz as you said. To be honest I don't know what stackblitz is.

I can describe the process by which I had this problem.

The version before I upgraded was Alpha 63. I initially installed another search plugin, because vitepress originally did not support local search.

The original search plugin I installed like this:

yarn add -D vitepress-plugin-search
yarn add -D segment

Then I found out that local search was already built into the lastest vitepress, so I uninstalled them with the yarn remove command and upgraded vitepress with yarn upgrade. Also I remove all the codes for these plugins in vite.config.ts.

yarn remove vitepress-plugin-search
yarn remove segment
yarn upgrade vitepress

Of course, as mentioned above, my upgrade failed. It doesn't work properly after the upgrade. I tried to recreate a new directory for a fresh install of vitepress and couldn't get a demo to run correctly.

Do I need to consider uninstalling node.js and reinstalling it?

Translated with www.DeepL.com/Translator (free version)

arcqiufeng commented 1 year ago

I rolled back to alpha 63 from my backup storage. Now it works fine.

I decided to yarn upgrade vitepress directly without uninstalling any plugins, and immediately after the upgrade finished, I ran yarn docs:dev, and got the same error.

Is yarn upgrade vitepress the right way to upgrade?

arcqiufeng commented 1 year ago

I make a new directory test2, and use npm, get the same error.

PS W:\work\2023\test2> npm install -D vitepress

npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 64 packages, and audited 65 packages in 24s

7 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS W:\work\2023\test2> npx vitepress init

  vitepress v1.0.0-alpha.73

┌   Welcome to VitePress! 
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◇  Theme:
│  Default Theme
│
◇  Use TypeScript for config and theme files?
│  Yes
│
◇  Add VitePress npm scripts to package.json?
│  Yes
│
└  Done! Now run npm run docs:dev and start writing.

PS W:\work\2023\test2> npm run docs:dev

> docs:dev
> vitepress dev docs

failed to load config from W:\work\2023\test2\docs\.vitepress\config.ts
failed to start server. error:
W:\work\2023\test2\docs\.vitepress\config.ts:1
import { defineConfig } from 'vitepress'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Object._require.extensions.<computed> [as .js] (file:///W:/work/2023/test2/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64459:17)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (file:///W:/work/2023/test2/node_modules/vite/dist/node/chunks/dep-24daf00c.js:64464:21)        
PS W:\work\2023\test2>

Does it matter that there was a warning at the beginning? npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

arcqiufeng commented 1 year ago

Now I have learned to use Stackblitz Tried installing vitepress alpha 63 on it first then upgraded to alpha 74 Couldn't get this issue back.

What a headache.

I just can't upgrade on my local computer. As soon as I upgrade, this problem occurs. If you don't update, all is well.

brc-dd commented 1 year ago

I'm not sure but something is broken specifically on your system. Even other Windows users aren't able to reproduce the issue you mentioned.

arcqiufeng commented 1 year ago

Update:

node.js upgraded to the latest 18.x LTS. didn't work.

Uninstalled node.js and reinstalled, didn't work.

I don't know what to do anymore.

Probably need a fresh install of windows, geez

However, if don't upgrade and keep using alpha.63, everything is fine.

brc-dd commented 1 year ago

Have you tried creating the project directory at different place/drive (outside of W:\work)?

arcqiufeng commented 1 year ago

You're a genius. I just tried it and it worked.

My W drive is a network mapped drive (on a Linux NAS [synology DSM 7.1]). I use it because it's automatically backed up daily to a private server, so I like to use it that way. So I was able to get the old version back after the upgrade failed yesterday.

I copied the whole folder to my local D drive and ran the upgrade and it works now.

But I used it this way up to alpha.63. Maybe it's a NAS OS problem.

Thanks again.

brc-dd commented 1 year ago

Maybe it's not a NAS problem. Are there any files like package.json, node_modules, vite.config.ts in W:\work or W:\work\2023. My guess is those might be conflicting with VitePress. Still not sure how alpha.63 was working in that directory. It should've been an issue with all the versions.

PS: Don't use yarn upgrade / npm upgrade. They don't work like people expect them to work. Run npx taze or npx npm-check-updates -u

arcqiufeng commented 1 year ago

Thank you for your guidance.

I will have a closer look at the possibilities you mentioned later.