CODEWITHSUNDEEP
typescriptwebpackes6-modules
FST
FST

Reputation: 3

Getting error with webpack when using import/export

I'm getting an error when I try to import a function from another module and then run that function. I have been doing this on simple js files, but when I tried this on TS it gives me an error. Is there a different way in TS?

index.ts

import 'normalize.css';
import './sass/style.scss';
import * as _ from 'lodash';
import { foo } from './ty';

foo('bad');

ty.ts

const foo = (ok: string): void => {
console.log(ok);
};

export { foo };

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  mode: 'development',
  optimization: {
    usedExports: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: [path.resolve(__dirname, 'src')],
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
};

tsconfig.json

  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonJS",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

Here is the screenshot my VS code

Upvotes: 0

Views: 2556

Answers (1)

Thai Duong Tran
Thai Duong Tran

Reputation: 2522

For webpack to be able to resolve typescript file, you need to add it to the list of webpack extensions.

By default, webpack is not looking for .ts or .tsx file when it resolves module.

Update your webpack.config.js to something like:

module.exports = {
  ...
  resolve: {
    extensions: ['.ts', '.js', '.json'],
  },
  ...
};

Upvotes: 3

Related Questions