no effect - how to check if even loaded?

[Falieson]

I probably have something wrong with my configuration. ts-jest makes use of the same underlying tsconfig-paths library right? it doesn't have any problems running tests. The error I get is

ERROR in ./src/app/root/application.tsx
Module not found: Error: Can't resolve '_modules/ui/tgr/page' in '/home/falieson/Code/Publications/tgrstack/skeletons/skeleton-tgr-app-express/src/app/root'
 @ ./src/app/root/application.tsx 7:13-44
 @ ./src/app/index.tsx

My project is structured like this

/webpack/webpack.js
/tsconfig.js
/src/

TSconfig.json is like this

    "baseUrl": ".",                           /* Base directory to resolve non-absolute module names. */
    "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
      "*":              ["node_modules/*", "src/*",],
      // list of submodules matching tslint
      "!server/*":      ["src/server/*"],
      "!app/*":         ["src/app/*"],

      // implicitely app modules
      "_modules/*":     ["src/app/modules/*"],
    },

Webpack config is like this

const rootPath = path.resolve(__dirname, '..')
const srcPath = path.resolve(rootPath, 'src')
const paths = {
    _: rootPath,
    src: { _: srcPath },
}

const typescript = (() => {
  const configFile = path.resolve(paths._, 'tsconfig.json') 
  const tsOptions = {
    context: paths._,
    configFile,
    transpileOnly: true,
  }
  const loader = {
    test: /\.tsx?$/,
    include: paths.src._,
    use: [
      {
        loader: 'babel-loader',
        options: {
          babelrc: true,
        }
      },
      {
        loader: 'ts-loader',
        options: tsOptions
      }
    ]
  }

  const tsPaths = new TsconfigPathsPlugin({
    logLevel: 'info',
    configFile,
  })

  return {
    loader,
    paths: tsPaths,
  }
})()

module.exports = {
  node: {
    __dirname: false,
    __filename: false,
  },
  resolve: {
    extensions: ['.csv', '.ts', '.tsx', '.js', '.json', '.jsx'],
    modules: ['src', 'node_modules'],
  },
  module: {
    rules: [
      typescript.loader,
      // graphql,
      files,
    ],
  },
  plugins: [
    new Dotenv(dotEnvOpts),
    typescript.paths
  ],
}

Thanks for your consideration

[c-vetter]

From the README:

Notice that the plugin is placed in the resolve.plugins section of the configuration. tsconfig-paths-webpack-plugin is a resolve plugin and should only be placed in this part of the configuration. Don't confuse this with the plugins array at the root of the webpack configuration object.

So, just move typescript.paths into resolve.plugins instead of plugins and you should be good.

Might be a good idea to move that note further toward the top 🤔

[Falieson]

wow - sorry I missed that! I know its a little superfluous but I typically focus on code examples so

...
...
resolve: {plugins: ...} // your existing example
...

new example

...
resolve: {plugins: ...} // the place you add tsconfig
module: { 
  rules: []
}
plugins: [] // not here!!
...

[c-vetter]

PR 😉

[akopchinskiy]

Same issue here.

Project structure:

/
--/source
--/tests
tsconfig.json
tsconfig.lib.json
webpack.config.ts

// webpack.config.ts


const config: webpack.Configuration = {
    target: 'web',
    
    entry: {
        '@lib': `${source}/module.ts`
    },
    output: {
        path: path.resolve(__dirname, build),
        filename: 'module.js'
    },

    // Dev tools
    devtool: 'source-map',

    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },

    resolve: {
        extensions: ['.ts'],
        plugins: [
            new TsConfigPathsPlugin({ 
                configFile: './tsconfig.lib.json'
            })
        ]
    },
    plugins: [
        new WpClean([build]),
        new CopyWebpackPlugin([{
            from: `./package.json`
        }])
    ]
};

export default config;

tsconfig.lib.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "umd",
        "target": "es6",
        "declaration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "esModuleInterop": true,
        "lib": [
            "esnext",
            "dom"
        ],
        "types": [
            "node"
        ],
        "rootDir": ".",
        "baseUrl": "./source",
        "outDir": "lib",
        "typeRoots": [
            "./node_modules/@types/"
        ]
    },
    "include": [
        "./**/*"
    ],
    "exclude": [
        "./**/*.test.*",
        "./node_modules/"
    ]
}

[au-top]

Error Info ERROR in ./src/index.ts Module not found: Error: Can't resolve '@@/async/asyncList' in '/project/node/LMRY-tieba/src' @ ./src/index.ts 8:20-49

webpack.config.js

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
     target: 'node',
     entry: {
          index: path.resolve(__dirname, './src/index.ts')
     },
     output: {
          filename: '[name].js',
          path: path.resolve(__dirname, './dist')
     },
     module: {
          rules: [{ test: /\.ts$/, use: 'ts-loader' }]
     },
     resolve: {
          plugins: [
               new TsconfigPathsPlugin({
                    configFile: path.resolve(__dirname, './tsconfig.json'),
                    logLevel: 'info',
                    extensions: ['.ts', '.tsx']
               })
          ]
     }
};

typescript config

{
  "compilerOptions": {
    "target": "es2020",                       
    "module": "commonjs",                     
    "outDir": "./dist",                   
    "rootDir": "./src",                     
    "strict": true,                         
    "baseUrl": "./src",                      
    "paths": {
      "@@/*":["./*"]
    },                  
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true,                  
    "skipLibCheck": true,                    
    "forceConsistentCasingInFileNames": true  
  }
}