Webpack ZoneAwareError - 预期'风格'是一个字符串数组（无预处理器）

问题描述：

我想正确配置Webpack。我正在使用this blog post from Microsoft as basis。Webpack ZoneAwareError - 预期'风格'是一个字符串数组（无预处理器）

目前，我在控制台中发现异常，说Expected 'styles' to be an array of strings.我更深入地研究了这个错误，发现在大多数情况下，这是由webpack.config.js文件中的缺少加载程序或错误的配置引起的，但是项目工作正常，直到我尝试在Shopify中创建它的嵌入式应用程序。请记住，我目前没有使用任何预处理器！

所以我的问题是：

可以这样错误的事实，脚本中的iFrame拼命地跑造成的？
我在配置中做错了什么？

这里是我的webpack.config.js文件：

const path = require('path'); 
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 

module.exports = (env) => { 
    // Configuration in common to both client-side and server-side bundles 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: ['.ts', '.js'] }, 
     output: { 
      filename: '[name].js', 
      publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: [/ClientApp/, /Plugins/], use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: ['to-string-loader', 'css-loader'] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 
      ] 
     }, 
     plugins: [new CheckerPlugin()] 
    }; 

    // Configuration for client-side bundle suitable for running in browsers 
    const clientBundleOutputDir = './wwwroot/dist'; 
    const clientBundleConfig = merge(sharedConfig, { 
     entry: { 'bundle': './ClientApp/boot-client.ts' }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
       // Plugins that apply in production builds only 
       new webpack.optimize.UglifyJsPlugin() 
      ]) 
    }); 

    // Configuration for server-side (prerendering) bundle suitable for running in Node 
    const serverBundleConfig = merge(sharedConfig, { 
     resolve: { mainFields: ['main'] }, 
     entry: { 'main-server': './ClientApp/boot-server.ts' }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./ClientApp/dist/vendor-manifest.json'), 
       sourceType: 'commonjs2', 
       name: './vendor' 


}) 
    ], 
    output: { 
     libraryTarget: 'commonjs', 
     path: path.join(__dirname, './ClientApp/dist') 
    }, 
    target: 'node', 
    devtool: 'source-map' 
}); 

return [clientBundleConfig, serverBundleConfig];

};

这里是JS例外，我得到的堆栈跟踪：

Error: Expected 'styles' to be an array of strings. 
    at assertArrayOfStrings (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:70123:15) [<root>] 
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32189:101) [<root>] 
    at CompileMetadataResolver._loadDirectiveMetadata (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32121:23) [<root>] 
    at https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32322:54 [<root>] 
    at Array.forEach (native) [<root>] 
    at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:32321:41) [<root>] 
    at https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72595:58 [<root>] 
    at Array.forEach (native) [<root>] 
    at JitCompiler._loadModules (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72594:43) [<root>] 
    at JitCompiler._compileModuleAndComponents (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72549:52) [<root>] 
    at JitCompiler.compileModuleAsync (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:72515:21) [<root>] 
    at PlatformRef_._bootstrapModuleWithZone (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:53194:25) [<root>] 
    at PlatformRef_.bootstrapModule (https://localhost/dist/vendor.js?v=rUYiw0agrE4eOpKoyLar1iLT1ql6s5KESRzWj-HWhyc:53169:21) [<root>] 
    at HTMLDocument.bootApplication (https://localhost/dist/bundle.js?v=5y5PspNLD-tK9PXgSUUIscip2N-vrKWGkiMyAtnQdaI:4813:46) [<root>]

有没有人有什么可能是这个原因的任何想法？

使用require来包含component.ts文件中的任何css。这将解决问题 – Vignesh

感谢您的建议@Vignesh。我意识到这一点。我的组件初始化如下所示： '@Component（{'app'，'app'， template：require（'./ app.component.html'）， styles：[require（'./ app.component。 css'）] }）' 我想这就是你的意思？ –

虽然你在styleUrls中的scss和css文件，它会抛出错误 – Vignesh

答

我发现了这个问题。 :)

这是复制粘贴错误。在我的两个组件中，初始化是：

@Component({ 
    selector: 'app', 
    template: require('./app.component.html'), 
    styles: require('./app.component.css') 
})

像这样。请注意，styles属性不是数组。显然，它应该是。

Webpack ZoneAwareError - 预期'风格'是一个字符串数组（无预处理器）

相关推荐