javascripttypescriptnode-modulests-loader

Problems importing Typescript and Js files in node modules


I am importing a node module folder that contains both Typescript and JS files. I use ts-loader for the typescript, but for some reason, it is creating a long list of errors and I think it's because of the fact that both files are together. I can't touch those files myself, so maybe there is a better way to configure ts-loader?

This is my tsconfig.json

{
"compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "declaration": false,
    "outDir": "lib",
    "strict": false,
    "allowJs": true,
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "noResolve": false
},
"include": [
    "./standalone/**/*",
    "./node_modules/**/*"
],
}

some of the errors being:

ERROR in ./node_modules/project/frontend/react/shared/inputs/smallcolorinput.tsx Module build failed (from ./node_modules/ts-loader/index.js): Error: Typescript emitted no output for ../FrontEnd/ProjectFolder/node_modules/project/frontend/react/shared/inputs/smallcolorinput.tsx. at successLoader (../FrontEnd/ProjectFolder/node_modules/ts-loader/dist/index.js:41:15) at Object.loader (../FrontEnd/ProjectFolder/node_modules/ts-loader/dist/index.js:21:12) @ ./node_modules/project/frontend/react/shared/views/FontSettings.jsx 13:23-59 @ ./node_modules/project/frontend/react/shared/views/ThemeEditor.jsx @ ./node_modules/project/frontend/react/editor/editor.jsx @ ./electron/views/Edit.tsx

This is the web pack config:

return {
        devtool: devMode ? 'eval' : 'hidden-source-map',
        module: {
            rules: [
                {
                    test: /\.(ts|tsx)?$/,
                    use: [babelLoader, {
                        loader: 'ts-loader',
                        options: {
                            onlyCompileBundledFiles: true,
                            allowTsInNodeModules: true
                        }
                    }],
                    exclude: /node_modules\/(?!(project)\/).*/

                },
                {
                    test: /\.(css|scss)?$/,
                    use:  ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
                },
                {
                    test: /.jsx?$/,
                    use: babelLoader,
                    exclude: /node_modules\/(?!(project)\/).*/
                },
},resolve: {
            symlinks: false,
            modules: [
                path.resolve(basePath, "node_modules"),

            ],
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            alias: {

                'classnames': path.join(basePath, 'node_modules/project/lib/utils/classnames.js')
            }
        },

Solution

  • After a lot of looking and trying different answers, I found that Typescript has a problem with compiling ts files from node_modules. It was not supported before now ts-loader supports it officially.

    I found out that removing onlyCompileBundledFiles for ts-loader fixes these issues.