starter kit

[LexRiver]

Hello, I have some strange errors with the recent versions when trying to import component from another file, like

Uncaught TypeError: vidom: Unexpected type of element is passed to the elements factory.
    at createElement$1 (vidom.js:3124)

I know it is somehow related to my typescript settings.
Can you please provide the very minimal project that works for you.
I'm looking for proper settings for

• tsconfig.json
• webpack.config.json
• .babelrc
• package.json

I think that it would be useful for other users also.
react has create-react-app to get started but vidom is missing it.

[dfilatov]

Hi, @LexRiver!
Could you investigate after which version it appears? Probably it's a bug.

[LexRiver]

No, seems like it's some error in my webpack config.
Because I can import .jsx files without any error.

Now I've switched to rollup and it works for me.

[dfilatov]

Here's a part of my webpack config for processing tsx files:

{
    test: /\.tsx$/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                plugins: [['babel-plugin-vidom-jsx', { autoRequire: false }]]
            }
        },          
        {
            loader: 'ts-loader',
            options: {
                transpileOnly: true,
                compilerOptions: {
                    sourceMap: true,
                    importHelpers: true,
                    jsx: 'preserve'
                }
            }
        }
    ]
}

[LexRiver]

yes, it seems to work now, but I have a runtime error
Uncaught ReferenceError: vidom is not defined
unless I add a script reference in my html:
<script src="https://unpkg.com/[email protected]/dist/vidom.js"></script>
is it the way it should be?

[dfilatov]

No, it isn't. You need to import vidom in tsx files.

// MyComponent.tsx

import * as vidom from 'vidom';

class MyComponent extends vidom.Component {
    onRender(): vidom.Node {
        return (
            <div>content</div>
        );
    }
}

[LexRiver]

vidom-test-webpack.zip
Here I'm trying to create minimal possible project, can you please check?