ESM(Programmatic Webpack & Jest): '.js' 파일 확장자가 없으면 모듈을 확인할 수 없습니다.

ESM(Programmatic Webpack & Jest): '.js' 파일 확장자가 없으면 모듈을 확인할 수 없습니다.

저는 웹팩을 프로그래밍 방식으로 사용하고 있으며, 타자 스크립트, ESM, 농담을 사용하고 있습니다.농담 테스트에서 포함하지 않은 오류가 발생합니다..jsES 모듈을 가져올 때 파일 확장명입니다.예:

    Module not found: Error: Can't resolve 'modulename' in '/path/components'
    Did you mean 'modulename.js'?
    BREAKING CHANGE: The request 'modulename' failed to resolve only because it was resolved as fully specified
    (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
    The extension in the request is mandatory for it to be fully specified.
    Add the extension to the request.

문제의 모듈은 실제로 다음과 같습니다."type": "module"을 설정한.package.json추가해 보았습니다..js그것은 도움이 되지 않습니다.

나는 농담을 하고 있습니다.

node --experimental-vm-modules --experimental-specifier-resolution=node node_modules/jest/bin/jest.js

문서에서 권장하는 대로(웹 팩을 제외한 다른 모든 것이 작동함).참고로, 나는 그것과 함께 그리고 없이 시도해 왔습니다.--experimental-specifier-resolution=node(이것은 다른 유사한 상황에서도 도움이 되었습니다.)

웹팩을 작동시키는 방법에 대해 의견이 있으십니까?잘 부탁드립니다!

참고: 모든 것이 ESM으로 변환될 때까지 작동했습니다!이제 프로그래밍 방식의 웹 팩만 작동하지 않습니다.

웹 팩 구성:

  {
    entry,
    target: 'web',
    output: {
      path: outputDir,
      filename: '[name].js',
    },
    mode: process.env.NODE_ENV as 'development' | 'production' | 'none' | undefined,
    resolve: {
      extensions: [
        '.ts',
        '.tsx',
        '.js',
        '.jsx',
        '.ttf',
        '.eot',
        '.otf',
        '.svg',
        '.png',
        '.woff',
        '.woff2',
        '.css',
        '.scss',
        '.sass',
      ],
    },
    module: {
      rules: [
        {
          test: /\.(ttf|eot|otf|svg|png)$/,
          loader: 'file-loader',
        },
        {
          test: /\.(woff|woff2)$/,
          loader: 'url-loader',
        },
        {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            sourceType: 'unambiguous',
            presets: [
              [
                '@babel/preset-env',
                {
                  corejs: '3.0.0,',
                  useBuiltIns: 'usage',
                },
              ],
              '@babel/preset-react',
              '@babel/preset-typescript',
            ],
            plugins: [
              'css-modules-transform',
              [
                'babel-plugin-react-scoped-css',
                {
                  include: '.scoped.(sa|sc|c)ss$',
                },
              ],
              '@babel/plugin-proposal-class-properties',
            ],
          },
        },
        {
          test: /\.(sc|c|sa)ss$/,
          use: [
            'style-loader',
            'css-loader',
            'scoped-css-loader',
            'sass-loader',
          ],
        },
      ],
    },
  }

네, 그래서 여기서 해결책을 찾았습니다.

기본적으로, 아래의 웹팩 구성에 2가지를 추가해야 했습니다.module.rules:

{
  test: /\.m?js/,
  type: "javascript/auto",
},
{
  test: /\.m?js/,
  resolve: {
    fullySpecified: false,
  },
},

@너링거의 대답은 나에게 효과가 있었습니다.저는 이 웹팩.config.js를 가지고 있었습니다.

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ],
    }
    ...
}

그리고 이것으로 바꿨습니다.

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
                resolve: {
                  fullySpecified: false,
                }
            }
        ],
    }
    ...
}

언급URL : https://stackoverflow.com/questions/69427025/programmatic-webpack-jest-esm-cant-resolve-module-without-js-file-exten