位置0のJSONの予期しないトークンmエラー
アプリをコンパイルし、webpackでi18nライブラリを実装しようとすると、このエラーに直面します。
ERROR in ./node_modules/bundle-loader?lazy&name=lang-pt!./src/locales/pt/translation.json
Module parse failed: Unexpected token m in JSON at position 0
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token m in JSON at position 0
at JSON.parse (<anonymous>)
at JsonParser.parse (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\JsonParser.js:15:21)
at doBuild.err (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:367:32)
at runLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:264:12)
at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
at iterateNormalLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:183:6
at runSyncOrAsync (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:175:3
at loadLoader (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\loadLoader.js:36:3)
at iteratePitchingLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
at runLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
at NormalModule.doBuild (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:219:3)
at NormalModule.build (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:337:15)
at Compilation.buildModule (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\Compilation.js:346:10)
at factory.create (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\Compilation.js:572:15)
@ ./node_modules/aurelia-i18n/dist/native-modules/aurelia-i18n.js
@ ./src/main.js
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper
ERROR in chunk app [entry]
[name].[hash].bundle.js
Cannot read property 'replace' of undefined
JSONファイルが完全に空であっても、srcフォルダーに正しく配置されているlocalesフォルダーにある他の言語に対してこれが繰り返され、同じエラーが発生します。
Webconfig.jsファイルは次のとおりです。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const {
AureliaPlugin,
ModuleDependenciesPlugin
} = require('aurelia-webpack-plugin');
const {
ProvidePlugin
} = require('webpack');
const {
BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig);
// primary config:
const title = 'Aurelia Navigation Skeleton';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
const cssRules = [{
loader: 'css-loader'
}];
module.exports = ({
production,
server,
extractCss,
coverage,
analyze
} = {}) => ({
resolve: {
extensions: ['.js'],
modules: [srcDir, 'node_modules']
},
entry: {
app: ['aurelia-bootstrapper'],
vendor: ['bluebird']
},
mode: production ? 'production' : 'development',
output: {
path: outDir,
publicPath: baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
},
performance: {
hints: false
},
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for Push-state)
historyApiFallback: true
},
devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
module: {
rules: [
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{
not: [{
test: /\.html$/i
}]
}],
use: extractCss ? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: cssRules
}) : ['style-loader', ...cssRules]
},
{
test: /\.css$/i,
issuer: [{
test: /\.html$/i
}],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{
test: /\.html$/i,
loader: 'html-loader'
},
{
test: /\.js$/i,
loader: 'babel-loader',
exclude: nodeModulesDir,
options: coverage ? {
sourceMap: 'inline',
plugins: ['istanbul']
} : {}
},
{
test: /\.json$/i,
loader: 'json-loader'
},
// use Bluebird as the global Promise implementation:
{
test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/,
loader: 'expose-loader?Promise'
},
// embed small images and fonts as Data Urls and larger ones as files:
{
test: /\.(png|gif|jpg|cur)$/i,
loader: 'url-loader',
options: {
limit: 8192
}
},
{
test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff2'
}
},
{
test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff'
}
},
// load these fonts normally, as files:
{
test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
loader: 'file-loader'
}
]
},
plugins: [
new AureliaPlugin(),
new ProvidePlugin({
'Promise': 'bluebird'
}),
new ModuleDependenciesPlugin({
'aurelia-testing': ['./compile-spy', './view-spy'],
'aurelia-i18n': [{
name: 'locales/en/translation.json',
chunk: 'lang-en'
}, {
name: 'locales/pt/translation.json',
chunk: 'lang-pt'
}]
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
minify: production ? {
removeComments: true,
collapseWhitespace: true
} : undefined,
metadata: {
// available in index.ejs //
title,
server,
baseUrl
}
}),
...when(extractCss, new ExtractTextPlugin({
filename: production ? '[contenthash].css' : '[id].css',
allChunks: true
})),
...when(production, new CopyWebpackPlugin([{
from: 'static/favicon.ico',
to: 'favicon.ico'
}])),
...when(analyze, new BundleAnalyzerPlugin())
]
});
上記のコードの問題は次の場所で発生します
{
test: /\.json$/i,
loader: 'json-loader'
},
あなたがコメントすると、問題なくアプリをコンパイルできます、私は検索しましたが、これと同様の問題を見つけましたが、実用的な解決策は見つかりませんでした、誰かがこの問題を解決する方法について提案がある場合私はそれをお願い申し上げます。
前もって感謝します。
unexpected token mと表示される理由は、json-loaderがjsonをmodule.exports = ..で始まるjavascriptファイルに変換するためです。
もちろん、これは有効なjsonではありません（jsonは常に開き中括弧{で開始する必要があります）。したがって、 "モジュール"の "m"についてナグします。
言い換えると、このエラーは、webpackがjson-loaderを連続して2回適用しようとしていることを示しています。 json-loaderをraw-loaderに変更すると、webpackのラッパーjavascriptが削除され、他のプラグインが生のjsonとしてロードしようとしているものにjsonがそのまま渡されます。
これを整理するのに役立つ関連する問題を次に示します。