Cannot find module Error (React, TypeScript, Webpack)

Question

Want to run app, but get the following error:

This is my project structure:

this is my app module i use export and also export default are same: app component and the imports of the module:

My webpack :

const devSever = (isDev) => !isDev ? {} : {
  devServer: {
      open: true,
      hot: true,
      port: 7070,
      contentBase: path.join(__dirname,'public')
     }
};

 const esLintPlugin = (isDev) => isDev ? [] : [new ESLintPlugin({ extensions: ['.ts', '.tsx ','.js']}) ]

module.exports = ({develop}) => ( {
  mode: develop ? 'development': 'production',
  devtool: develop ? 'inline-source-map' : false,
  entry:{ 
    app: './src/index.tsx',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    assetModuleFilename: 'assets/[hash][ext]' //may be hash
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js)$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.(woff(2)?|eot|ttf|otf)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader,'css-loader'] 
      }

    ]
  },
  resolve: {
    extensions: ['.tsx','.ts','.js']
  },
  plugins: [
    new CircularDependencyPlugin({
      exclude: /a\.js|node_modules/,
      include: /dir/,
      failOnError: true,
      allowAsyncCycles: false,
      cwd: process.cwd()
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'style.css'
    }),
    new CopyPlugin({
      patterns: [{from: './public' }]
    }),
    new CleanWebpackPlugin({cleanStaleWebpackAssets: false}),
     ...esLintPlugin(develop)
  ],
  ...devSever(develop)
});

it's all work good only if there are not imports and if i write code only in one component

Show your app.tsx component.

zhulien
– zhulien

2021-07-01 10:52:58 +00:00
Commented Jul 1, 2021 at 10:52 — zhulien
– zhulien, Commented Jul 1, 2021 at 10:52
@zhulien added check pls

Qugean
– Qugean

2021-07-01 11:42:13 +00:00
Commented Jul 1, 2021 at 11:42 — Qugean
– Qugean, Commented Jul 1, 2021 at 11:42
try some of these answers.

gantoine
– gantoine

2021-07-01 18:30:29 +00:00
Commented Jul 1, 2021 at 18:30 — gantoine
– gantoine, Commented Jul 1, 2021 at 18:30

yun · Accepted Answer · 2021-07-02 06:23:45Z

0

you check out tsconfig.json

{
  "include": ["src/**/*"],
  "compilerOptions": {
    "rootDir": "./src"
  }
}

answered Jul 2, 2021 at 6:23

yun

1141 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot find module Error (React, TypeScript, Webpack)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related