前提・実現したいこと
現在、一つのファイルに複数のクラスが存在している状態です。クラスごとにファイルを分けて、webpackを使おうとしたら、以下のエラーが発生しました。
発生している問題・エラーメッセージ
ERROR in ./src/app/app.js 7:15 Module parse failed: Unexpected token (7:15) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | render() | { > return(<div> | <Input /> | </div>);
webpack.config.jsを変更後↓
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (`NormalModuleFactory`).
該当のソースコード
JavaScript
1import React, {Component} from 'react'; 2 3export default class Sample extends Component 4{ 5 render() 6 { 7 return(<div> 8 <Input /> 9 </div>); 10 } 11} 12
const path = require('path'); module.exports = { entry: "./src/app/app.js", output: { path: path.join(__dirname, 'src/app'), filename: "bundle.js" }, module: { loaders: [{ test: /.js?$/, // 拡張子がjsなのでjsxから変更 exclude: /node_modules/, // node_modulesフォルダ配下でなければ loader: 'babel', // babel-loaderを使って変換する query: { plugins: ["transform-react-jsx"] // babelのtransform-react-jsxプラグインを使ってjsxを変換 } }] } }
試したこと
JSX部分を削除→問題なく動作しました。
webpack JSXで検索して、webpack.configを変更してみました。
補足情報(FW/ツールのバージョンなど)
webpack:Ver.4.41.6
webpackの設定はこのサイトを参考にしました
![guest](/img/icon/icnUserSample.jpg)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/03/02 01:00