Rollup Vu3 error can't find module. I can not compile my library with rollup?

Viewed 40

I have a problem compiling to rollup with vue3 and typescript.

This is the error when running compile project. The vue file exists in the repository and use also storybook and this case building correctly

npm run build:lib

> coder-ui@0.0.0 build:lib
> rimraf dist && npm run build:vue && npm run build:style


> coder-ui@0.0.0 build:vue
> rollup -c && rollup -c --environment MINIFY

OBJ:  { chButton: './src/components/chButton' }

./src/index.ts, ./src/components/chButton → dist/esm...
[!] (plugin rpt2) Error: src/components/chButton/index.ts:2:22 - error TS2307: Cannot find module './ChButton.vue' or its corresponding type declarations.

2 import ChButton from "./ChButton.vue"
                       ~~~~~~~~~~~~~~~~

this is my rollup.config.js, use plugin vue, node, commonjs, trypscript, alias and babel

import { text } from './build/banner.json'
import packageInfo from './package.json'
import alias from '@rollup/plugin-alias';
import vue from 'rollup-plugin-vue'
import node from '@rollup/plugin-node-resolve'
import cjs from '@rollup/plugin-commonjs'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'
import typescript from 'rollup-plugin-typescript2';

import fs from 'fs'
import path from 'path'

const baseFolderPath = './src/components/'
const banner = text.replace('${version}', packageInfo.version)

const components = fs
    .readdirSync(baseFolderPath)
    .filter((f) =>
        fs.statSync(path.join(baseFolderPath, f)).isDirectory()
    )

const entries = {
    'index': './src/index.ts',
    ...components.reduce((obj, name) => {
        obj[name] = (baseFolderPath + name)
        console.log("OBJ: ",obj)
        return obj
    }, {})
}

const babelOptions = {
    babelHelpers: 'bundled',
    exclude: 'node_modules/**',
}

const vuePluginConfig = {
    include: [/\.vue$/i],
    defaultLang: { script: 'ts' },
    template: {
        isProduction: true,
        compilerOptions: {
            whitespace: 'condense'
        }
    }
}

const capitalize = (s) => {
    if (typeof s !== 'string') return ''
    return s.charAt(0).toUpperCase() + s.slice(1)
}

export default () => {
    let config = [
      {
        input: entries,
        external: ['vue', 'ts'],
        output: {
            format: 'esm',
            dir: `dist/esm`,
            entryFileNames: '[name].mjs',
            chunkFileNames: '[name]-[hash].mjs',
        },
        plugins: [
            node({
                extensions: ['.vue', '.ts', '.js', '.d.ts', '.tsx']
            }),
            typescript({
                typescript: require('typescript')
            }),
            vue(vuePluginConfig),
            cjs(),
            babel(babelOptions),
            alias({
              entries: {
                'vue': 'vue/dist/vue.runtime.esm.js'
              }
            }),
        ]
    },


    ]

    if (process.env.MINIFY === 'true') {
        config = config.filter((c) => !!c.output.file)
        config.forEach((c) => {
            c.output.file = c.output.file.replace(/\.m?js/g, r => `.min${r}`)
            c.plugins.push(terser({
                output: {
                    comments: '/^!/'
                }
            }))
        })
    }
    return config
}

and tsconfig.app.json

 {
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": [
    "env.d.ts", 
    "shims-vue.d.ts",
    "rollup.config.js", 
    "src/**/*.vue", 
    "src/**/*.ts", 
    "src/**/*.d.ts", 
    "src/**/*.tsx", 
    "src/**/*.js"],
  "exclude": ["node_modules"],
  "compilerOptions": {
    "target": "esnext",
    /* Specify what JSX code is generated. */
    "jsx": "preserve",
    /* Specify what module code is generated. */
    "module": "esnext",
    /* Specify the root folder within your source files. */
    "rootDir": "./src",
    /* Specify how TypeScript looks up a file from a given module specifier. */
    "moduleResolution": "node",
    /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    "declaration": true,
    /* Create sourcemaps for d.ts files. */
    "declarationMap": true,
    /* Create source map files for emitted JavaScript files. */
    "sourceMap": true,
    /* Specify an output folder for all emitted files. */
    "outDir": "./dist",
    /* Emit additional JavaScript to ease support for importing CommonJS modules.
       This enables `allowSyntheticDefaultImports` for type compatibility. */
    "esModuleInterop": true,
    /* Ensure that casing is correct in imports. */
    "forceConsistentCasingInFileNames": true,
    /* Enable all strict type-checking options. */
    "strict": true,
    /* Skip type checking all .d.ts files. */
    "skipLibCheck": true,
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  
}
0 Answers
Related