Uncaught ReferenceError: require is not defined at require('./bootstrap') Laravel Mix

Posted 2023-03-14

【中文标题】Uncaught ReferenceError: require is not defined at require(\'./bootstrap\') Laravel Mix

【英文标题】：Uncaught ReferenceError: require is not defined at require('./bootstrap') Laravel MixUncaught ReferenceError: require is not defined at require('./bootstrap') Laravel Mix

【发布时间】：2017-08-15 15:20:13

【问题描述】：

我已经使用 Laravel Mix 编译了我的样式表和 javascript 文件，代码如下：

const  mix  = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

// mix.js('resources/assets/js/app.js', 'public/js')
//    .sass('resources/assets/sass/app.scss', 'public/css');

mix.babel([
    'public/js/plugins/loaders/pace.min.js',
    'resources/assets/js/app.js',
    'public/js/plugins/loaders/blockui.min.js',
    'public/js/plugins/ui/nicescroll.min.js',
    'public/js/plugins/ui/drilldown.js',
    'public/js/plugins/ui/fab.min.js',
    'public/js/plugins/forms/selects/select2.min.js',
    'public/js/plugins/forms/styling/uniform.min.js',
    'public/js/plugins/ui/moment/moment.min.js',
    'public/js/plugins/ui/fullcalendar/fullcalendar.min.js',
    'public/js/core/app.js',
    'public/js/pages/user_pages_profile.js',
] , 'public/js/app.js');

mix.styles([
    'public/css/icons/icomoon/styles.css',
    'resources/assets/sass/app.scss',
    'public/css/core.css',
    'public/css/components.css',
    'public/css/colors.css',
],'public/css/app.css');

下面是我的 app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap'); //complains on this line after compilation

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue(
    el: '#app'
);

它抱怨 required,Uncaught ReferenceError: require is not defined at app.js:354 ，这是编译后的 app.js 我试过了： 1- mix.scripts 2- mix.babel（根据文档，这会将任何 ES2015 代码转换为所有浏览器都能理解的原生 JavaScript。） 我在这里错过了什么？

【问题讨论】：

你能添加你得到的确切错误吗？

问题中提到了错误，但现在也在描述中添加了它。

尝试使用 import 而不是 require。

对于 import 我必须在 bootstrap.js 中 export 一些东西，对吧？

你使用的是 Laravel 5.4 吗？

【参考方案1】：

您的节点版本很可能已过期。 Node JS 6 是第一个处理 ES2015 模块的版本。通过运行检查您的 Node 版本

node -v

如果您使用的是 Ubuntu 16，则需要添加源存储库以拉取更新版本的节点。运行以下命令应该可以让您升级到最新版本

cd ~
curl -sL https://deb.nodesource.com/setup_6.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt-get install nodejs
sudo npm update -g npm 
sudo ln -s /usr/bin/nodejs /usr/bin/node

现在尝试运行 npm run dev，一切都应该在 Laravel mix 中正常编译。

【讨论】：

它的节点 v7.5.0

这很奇怪。如果是 Node 7，应该识别 require 指令。您是否尝试擦除 node_modules 并重新运行 npm install？

这是全新安装。让我再做一次

如果这不能解决问题，我会很难过。有同样的问题是你在某一时刻节点升级和重新安装修复了它。希望它有效！

没有修复它。我使用的是 mix.babel 而不是 mix.js，我尝试同时编写两者，这意味着 webpack.mix.js 中的 mix.js 和 mix.babel，然后我进入了未定义的 jQuery。