1
resposta

Erro ao copilar o código: Module not found: Error: Can't resolve 'jquery'

Olá vi um problema parecido em um tópico anterior e não consegui resolver o problema citado acima.

Eis meu webpack.config.js

const path = require('path')
const babilinPlugin = require('babili-webpack-plugin')
const extractTextPlugin = require('extract-text-webpack-plugin')
const optimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpack = require('webpack');

let plugins = []

plugins.push(new extractTextPlugin('styles.css'))

plugins.push(
    new webpack.ProvidePlugin({
        "$": "jquery/dist/jquery.js",
        "jQuery": "jquery/dist/jquery.js"
    })
);

if(process.env.NODE_ENV === 'production'){
    plugins.push(new babilinPlugin());
    plugins.push(new optimizeCSSAssetsPlugin({
        cssProcessor: require('cssnano'),
        cssProcessorOptions: {
            discardComments: {
                removeAll: true
            }
        },
        canPrint: true
    }))
}

module.exports = {
    entry: './app-src/app.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: 'dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
               test: /\.css$/,
               use: extractTextPlugin.extract({
                   fallback: 'style-loader',
                   use: 'css-loader'
               })
            },
            {
                test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
            },
            {
                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
            }
        ]
    },
    plugins
}
1 resposta

Fala aí Thiago, tudo bem? Onde está seu jquery e como você baixou ele? Por padrão o Webpack vai tentar resolver a busca de dependências relativo ao diretório atual (onde se encontra o arquivo de configuração) ou node_modules.

Sugiro você baixar e instalar o jquery pelo npm:

npm i jquery

E depois atualizar seu `ProvidePlugin:

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
})

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software