search

storybook-vue / storybook-nuxt

Deprecated in favor of https://github.com/nuxt-modules/storybook/
https://github.com/nuxt-modules/storybook/
134 stars 20 forks source link

SyntaxError: Cannot use import statement outside a module #38

Open VegasChickiChicki opened 1 year ago

VegasChickiChicki commented 1 year ago

PS C:\Users\dodaa\WebstormProjects\popso> npm run storybook

nuxt-app@1.0.10 storybook storybook dev -p 6006

@storybook/cli v7.3.0

WARN Failed to load preset: "@storybook-vue\nuxt\preset" ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook-vue\nuxt\dist\preset.mjs:1 ERR! import { resolve, join } from 'path'; ERR! ^^^^^^ ERR! ERR! SyntaxError: Cannot use import statement outside a module ERR! at Object.compileFunction (node:vm:360:18) ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15) ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27) ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10) ERR! at Object.newLoader [as .mjs] (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9) ERR! at Module.load (node:internal/modules/cjs/loader:1033:32) ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12) ERR! at Module.require (node:internal/modules/cjs/loader:1057:19) ERR! at require (node:internal/modules/cjs/helpers:103:18) ERR! at Object. (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook-vue\nuxt\preset.js:1:18) ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook-vue\nuxt\dist\preset.mjs:1 ERR! import { resolve, join } from 'path'; ERR! ^^^^^^ ERR! ERR! SyntaxError: Cannot use import statement outside a module ERR! at Object.compileFunction (node:vm:360:18) ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15) ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27) ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10) ERR! at Object.newLoader [as .mjs] (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9) ERR! at Module.load (node:internal/modules/cjs/loader:1033:32) ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12) ERR! at Module.require (node:internal/modules/cjs/loader:1057:19) ERR! at require (node:internal/modules/cjs/helpers:103:18) ERR! at Object. (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook-vue\nuxt\preset.js:1:18) WARN Failed to load preset: {"type":"presets","name":"C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js"} on level 1 ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1 ERR! import { fileURLToPath } from 'node:url'; ERR! ^^^^^^ ERR! ERR! SyntaxError: Cannot use import statement outside a module ERR! at Object.compileFunction (node:vm:360:18) ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15) ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27) ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10) ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9) ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24) ERR! at Module.load (node:internal/modules/cjs/loader:1033:32) ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12) ERR! at Module.require (node:internal/modules/cjs/loader:1057:19) ERR! at require (node:internal/modules/cjs/helpers:103:18) ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1 ERR! import { fileURLToPath } from 'node:url'; ERR! ^^^^^^ ERR! ERR! SyntaxError: Cannot use import statement outside a module ERR! at Object.compileFunction (node:vm:360:18) ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15) ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27) ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10) ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9) ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24) ERR! at Module.load (node:internal/modules/cjs/loader:1033:32) ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12) ERR! at Module.require (node:internal/modules/cjs/loader:1057:19) ERR! at require (node:internal/modules/cjs/helpers:103:18) ERR! Error: Invariant failed: No builder configured in core.builder ERR! at invariant (C:\Users\dodaa\WebstormProjects\popso\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11) ERR! at buildDevStandalone (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\core-server\dist\index.js:128:1790) ERR! at async withTelemetry (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\core-server\dist\index.js:113:3910) ERR! at async dev (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\cli\dist\generate.js:457:401) ERR! at async Command. (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\cli\dist\generate.js:459:225) ERR! Error: Invariant failed: No builder configured in core.builder ERR! at invariant (C:\Users\dodaa\WebstormProjects\popso\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11) ERR! at buildDevStandalone (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\core-server\dist\index.js:128:1790) ERR! at async withTelemetry (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\core-server\dist\index.js:113:3910) ERR! at async dev (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\cli\dist\generate.js:457:401) ERR! at async Command. (C:\Users\dodaa\WebstormProjects\popso\node_modules\@storybook\cli\dist\generate.js:459:225)

WARN Broken build, fix the error above. WARN You may need to refresh the browser.

WARN Failed to load preset: {"type":"presets","name":"C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js"} on level 1 ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1 ERR! import { fileURLToPath } from 'node:url'; ERR! ^^^^^^ ERR! ERR! SyntaxError: Cannot use import statement outside a module ERR! at Object.compileFunction (node:vm:360:18) ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15) ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27) ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10) ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9) ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24) ERR! at Module.load (node:internal/modules/cjs/loader:1033:32) ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12) ERR! at Module.require (node:internal/modules/cjs/loader:1057:19) ERR! at require (node:internal/modules/cjs/helpers:103:18) ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1 ERR! import { fileURLToPath } from 'node:url'; ERR! ^^^^^^ ERR! ERR! SyntaxError: Cannot use import statement outside a module ERR! at Object.compileFunction (node:vm:360:18) ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15) ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27) ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10) ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9) ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24) ERR! at Module.load (node:internal/modules/cjs/loader:1033:32) ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12) ERR! at Module.require (node:internal/modules/cjs/loader:1057:19) ERR! at require (node:internal/modules/cjs/helpers:103:18)

storybook config(main.js):

import { mergeConfig } from 'vite'
import userConfig from './vite.config';

module.exports = {
  stories: [
    '../components/**/*.docs.mdx',
    '../components/**/*.stories.@(js|ts)',
    '../pages/**/*.stories.@(js|ts)'
  ],
  addons: [
    '@storybook/addon-essentials',
    'storybook-addon-nuxt'
  ],
  framework: {
    name: '@storybook-vue/nuxt',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  async viteFinal(baseConfig) {
    return mergeConfig(baseConfig, userConfig);
  }
};

userConfig:

import { fileURLToPath } from 'url';
import { defineConfig } from 'vite';

export default defineConfig({
    resolve: {
        alias: {
            '~': fileURLToPath(new URL('../', import.meta.url)),
            '@': fileURLToPath(new URL('../', import.meta.url)),
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `
                    @import "@/assets/styles/variables/colors.scss";
                    @import "@/assets/styles/variables/media.scss";
                    @import "@/assets/styles/mixins/layouts.scss";
                    @import "@/assets/styles/mixins/media.scss";
                    @import "@/assets/styles/mixins/typography.scss";
                    @import "@/assets/styles/mixins/helpers.scss";
                `
            }
        }
    }
});
chakAs3 commented 1 year ago

@VegasChickiChicki , let me check this, i'm releasing a new version today. i would like you to test it.

happy-turtle commented 1 year ago

Same as described here. The current path resolution does not work on Windows but only on Linux.