为啥我会收到此错误：模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误 Unexpected token, expected "

Posted 2023-05-08

【中文标题】为啥我会收到此错误：模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误 Unexpected token, expected ","

【英文标题】：Why am I getting this error: Module build failed (from ./node_modules/babel-loader/lib/index.js): Syntax Error Unexpected token, expected ","为什么我会收到此错误：模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误 Unexpected token, expected ","

【发布时间】：2021-07-19 09:25:21

【问题描述】：

我在javascript/packs/style.js 中有这段代码，我在application.js 中使用`require("packs/style") 需要它。但是当我刷新页面时，我在控制台中收到此错误。

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/maryan/Desktop/workspace/collabfield/app/javascript/posts/style.js: Unexpected token, expected "," (20:0)

  18 |
  19 |
> 20 | var colorSet = randomColorSet();
     | ^
  21 | var mode = Math.floor(Math.random() * 2);
  22 |
  23 | function randomColorSet() 
    at Parser._raise (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:776)
    at Parser.raiseWithData (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:769)
    at Parser.raise (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:737)
    at Parser.unexpected (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:9735)
    at Parser.expect (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:9721)
    at Parser.parseCallExpressionArguments (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10890)
    at Parser.parseCoverCallAndAsyncArrowHead (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10816)
    at Parser.parseSubscript (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10752)
    at Parser.parseSubscripts (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10725)
    at Parser.parseExprSubscripts (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10714)
    at Parser.parseUpdate (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10688)
    at Parser.parseMaybeUnary (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10666)
    at Parser.parseExprOps (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10523)
    at Parser.parseMaybeConditional (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10497)
    at Parser.parseMaybeAssign (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10460)
    at Parser.parseExpressionBase (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10405)
    at :3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10399
    at Parser.allowInAnd (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:12098)
    at Parser.parseExpression (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:10399)
    at Parser.parseStatementContent (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:12390)
    at Parser.parseStatement (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:12259)
    at Parser.parseBlockOrModuleBlockBody (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:12845)
    at Parser.parseBlockBody (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:12836)
    at Parser.parseProgram (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:12190)
    at Parser.parseTopLevel (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:12181)
    at Parser.parse (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:13892)
    at parse (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/parser/lib/index.js:13944)
    at parser (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/core/lib/parser/index.js:54)
    at parser.next (<anonymous>)
    at normalizeFile (:3000/home/maryan/Desktop/workspace/collabfield/node_modules/@babel/core/lib/transformation/normalize-file.js:55)
    at Object../app/javascript/posts/style.js (application.js:16)
    at __webpack_require__ (bootstrap:19)
    at Module../app/javascript/packs/application.js (application.js:1)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
./app/javascript/posts/style.js @ application.js:16
__webpack_require__ @ bootstrap:19
./app/javascript/packs/application.js @ application.js:1
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

这是style.js中的代码

$(document).on('turbolinks:load', function() 
    if ($(".single-post-card").length) 
        // set a solid background color style
        if (mode == 1) 
            $(".single-post-card").each(function() 
                $(this).addClass("solid-color-mode");
                $(this).css('background-color', randomColor());
            );
        
        // set a border color style
        else 
            $(".single-post-card").each(function() 
                $(this).addClass("border-color-mode");
                $(this).css('border', '5px solid ' + randomColor());
            );
           
    


    $('#feed').on( 'mouseenter', '.single-post-list', function() 
        $(this).css('border-color', randomColor()); 
    );

    $('#feed').on( 'mouseleave', '.single-post-list', function() 
        $(this).css('border-color', 'rgba(0, 0 , 0, 0.05)');    
    );

);

var colorSet = randomColorSet();
var mode = Math.floor(Math.random() * 2);

// Randomly returns a color scheme
function randomColorSet() 
    var colorSet1 = ['#45CCFF', '#49E83E', '#FFD432', '#E84B30', '#B243FF'];
    var colorSet2 = ['#FF6138', '#FFFF9D', '#BEEB9F', '#79BD8F', '#79BD8F'];
    var colorSet3 = ['#FCFFF5', '#D1DBBD', '#91AA9D', '#3E606F', '#193441'];
    var colorSet4 = ['#004358', '#1F8A70', '#BEDB39', '#FFE11A', '#FD7400'];
    var colorSet5 = ['#105B63', '#FFFAD5', '#FFD34E', '#DB9E36', '#BD4932'];
    var colorSet6 = ['#04BFBF', '#CAFCD8', '#F7E967', '#A9CF54', '#588F27'];
    var colorSet7 = ['#405952', '#9C9B7A', '#FFD393', '#FF974F', '#F54F29'];
    var randomSet = [colorSet1, colorSet2, colorSet3, colorSet4, colorSet5, colorSet6, colorSet7];
    return randomSet[Math.floor(Math.random() * randomSet.length )];


// Randomly returns a color from an array of colors
function randomColor() 
    var color = colorSet[Math.floor(Math.random() * colorSet.length)];
    return color;

我正在 Rails 6.0.3.2 上构建它

我不知道我的代码是错误的还是有其他问题。

非常感谢任何帮助或想法...

【参考方案1】：

这个 ./node_modules/babel-loader/lib/index.js) 模块构建错误肯定是随机出现在 Rails 6 中的 Webpacker 中。据我了解，rails 6 中的整个 webpacker 设置非常脆弱。为了解决这个问题，我做了一个干净的重新安装：

yarn remove @rails/webpacker
yarn remove webpack webpack-cli webpack-dev-server
rm -fr node_modules
rm -fr public/packs
bundle exec rails webpacker:install
# REMOVE any invalid babel preset from package.json added by "webpacker:install"
yarn add node-releases
bundle exec rails webpacker:compile

使用require("packs/style") 将style.js 添加到application.js

#Success