Can not find module 'require("file-type")'

[axetroy]

Describe the bug

I import a module in renderer progress

import FileType from 'file-type'

To Reproduce Steps to reproduce the behavior:

15:44:49.951          › Error: Cannot find module 'require("file-type")'
Require stack:
- electron/js2c/renderer_init
    at Module._resolveFilename (internal/modules/cjs/loader.js:972:15)
    at Function.o._resolveFilename (electron/js2c/renderer_init.js:35:917)
    at Module._load (internal/modules/cjs/loader.js:848:27)
    at Function.f._load (electron/js2c/asar_bundle.js:5:12633)
    at Module.require (internal/modules/cjs/loader.js:1032:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.file-type (http://localhost:8080/js/app.js:80000:18)
    at __webpack_require__ (http://localhost:8080/js/app.js:850:30)
    at fn (http://localhost:8080/js/app.js:152:20)
    at Module../src/renderer/modules/im/_store/actions.js (http://localhost:8080/js/app.js:74115:68)

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

Environment (please complete the following information):

Environment Info:

  System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
  Binaries:
    Node: 14.15.0 - ~/.nvm/versions/node/v14.15.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.15.0/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.0/bin/npm
  Browsers:
    Chrome: 92.0.4496.0
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.6 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.13 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.13 
    @vue/cli-plugin-babel: 4.5.0 => 4.5.0 
    @vue/cli-plugin-eslint: 4.5.0 => 4.5.0 
    @vue/cli-plugin-router:  4.5.13 
    @vue/cli-plugin-typescript: 4.5.0 => 4.5.0 
    @vue/cli-plugin-vuex:  4.5.13 
    @vue/cli-service: 4.5.0 => 4.5.0 
    @vue/cli-shared-utils:  4.5.13 
    @vue/component-compiler-utils:  3.2.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/web-component-wrapper:  1.3.0 
    babel-helper-vue-jsx-merge-props: 2.0.3 => 2.0.3 
    babel-plugin-transform-vue-jsx: 3.7.0 => 3.7.0 
    eslint-plugin-vue: 7.9.0 => 7.9.0 
    jsdoc-vuedoc: 1.2.0 => 1.2.0 
    typescript: 4.2.4 => 4.2.4 
    vue: 2.6.12 => 2.6.12 
    vue-at: 2.5.0-beta.2 => 2.5.0-beta.2 
    vue-cli-plugin-electron-builder: 2.0.0-rc.6 => 2.0.0-rc.6 
    vue-clipboard2: 0.3.1 => 0.3.1 
    vue-cropper: 0.5.5 => 0.5.5 
    vue-electron: 1.0.6 => 1.0.6 
    vue-eslint-parser:  7.6.0 
    vue-hot-reload-api:  2.3.4 
    vue-html-loader: 1.2.4 => 1.2.4 
    vue-i18n: 8.24.0 => 8.24.0 
    vue-loader: 15.9.6 => 15.9.6 (16.2.0)
    vue-qr: 2.3.0 => 2.3.0 
    vue-ref: 2.0.0 => 2.0.0 
    vue-router: 3.5.1 => 3.5.1 
    vue-style-loader: 4.1.3 => 4.1.3 
    vue-template-compiler: 2.6.12 => 2.6.12 
    vue-template-es2015-compiler:  1.9.1 
    vuescroll: 4.16.1 => 4.16.1 
    vuex: 3.6.2 => 3.6.2 
    vuex-electron: 1.0.3 => 1.0.3 
  npmGlobalPackages:
    @vue/cli: 4.5.12

Additional context

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')

module.exports = {
    configureWebpack: {
        devtool: 'source-map',
        output: {
            libraryTarget: 'commonjs2'
        },
        resolve: {
            alias: {
                '@vendor': path.join(__dirname, 'src', 'vendor')
            },
            extensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.node']
        },
        plugins: [
            // new CopyWebpackPlugin([{ from: path.join(__dirname, 'static'), to: path.join(__dirname, 'dist_electron', 'bundled', 'vendor') }]),
            // new webpack.DefinePlugin({
            //     __static: `"${path.join(__dirname, 'static').replace(/\\/g, '\\\\')}"`
            // })
        ]
    },
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            externals: ['puppeteer'],
            chainWebpackMainProcess: config => {
                config.module
                    .rule('node')
                    .test(/\.node$/)
                    .use(process.env.NODE_ENV === 'production' ? 'node-loader-ext' : 'node-loader')
                    .loader(process.env.NODE_ENV === 'production' ? 'node-loader-ext' : 'node-loader')
                    .end()

                config.module
                    .rule('ts')
                    .test(/\.tsx?$/)
                    .use('ts-loader')
                    .end()

                config.module
                    .rule('js')
                    .enforce('pre')
                    .test(/\.jsx?$/)
                    .use('eslint-loader')
                    .loader('eslint-loader', { formatter: require('eslint-friendly-formatter') })
                    .end()
            },
            chainWebpackRendererProcess: config => {
                config.module
                    .rule('node')
                    .test(/\.node$/)
                    .use(process.env.NODE_ENV === 'production' ? 'node-loader-ext' : 'node-loader')
                    .loader(process.env.NODE_ENV === 'production' ? 'node-loader-ext' : 'node-loader')
                    .end()

                config.module
                    .rule('ts')
                    .test(/\.tsx?$/)
                    .use('ts-loader')
                    .end()
            },
            builderOptions: {
                productName: 'Electron 测试版',
                appId: 'electron.axetroy.com',
                mac: {
                    target: [
                        {
                            target: 'dmg'
                        }
                    ],
                    icon: 'static/custom/icon.ico',
                    extraResources: [
                        {
                            from: './src/vendor',
                            to: './public/vendor'
                        }
                    ]
                }
            }
        }
    }
}

[axetroy]

Is file-type a special module, and why is it an external module like nodejs?

EDIT:

It seems that the file-type module is missing the main field

After I added it up manually, it works now.

[nklayman]

Importing file-type works just fine for me, can you create a repo that demonstrates the error? Seems like it may have been a borked dependency installation.

[no-response[bot]]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.