Webpack ZoneAwareError - Erwartete 'Styles' als Array von Strings (kein Preprocessor)

Question

Ich versuche, Webpack korrekt zu konfigurieren. Ich benutze this blog post from Microsoft as basis.

Derzeit bekomme ich eine Ausnahme in der Konsole, sagen Expected 'styles' to be an array of strings. Ich recherchierte den Fehler tiefer und festgestellt, dass in den meisten Fällen dies durch einen fehlenden Lader in der Datei webpack.config.js oder schlechte Konfiguration verursacht wird, aber die Das Projekt funktioniert gut, bis ich versuche, eine eingebettete App in Shopify zu erstellen. Bedenken Sie, dass ich derzeit keine Präprozessoren verwende!

Also meine Fragen sind:

1. Dieser Fehler kann durch die Tatsache verursacht werden, dass das Skript in einem iFrame runned ist?
2. Mache ich etwas falsch in der Konfiguration?

Hier ist meine webpack.config.js Datei:

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]; 

};

Hier ist der Stack-Trace der JS Ausnahme, dass ich erhalte:

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>] 

Hat jemand eine Idee hat, was die Ursache dafür sein könnte?

Answer 1

Ich habe das Problem gefunden. :)

Es war Copy-Paste-Fehler. In zwei meiner Komponenten die Initialisierung war:

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

Like this. Beachten Sie, dass die Eigenschaft styles kein Array ist. Anscheinend sollte es sein.