Jeton inattendu m dans JSON à la position 0 erreur
En compilant une application et en essayant d'implémenter la bibliothèque i18n avec webpack, je fais face à cette erreur:
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
Cela se répète pour l'autre langue que j'ai dans le dossier locales, qui est correctement placé dans le dossier src, même si les fichiers JSON sont complètement vides, la même erreur se produit.
Voici le fichier 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())
]
});
Le problème dans le code ci-dessus se produit à
{
test: /\.json$/i,
loader: 'json-loader'
},
Ce qui si vous commentez, permet à l'application de compiler sans problèmes, j'ai cherché mais bien que j'aie trouvé des problèmes similaires à celui-ci, je n'ai pas trouvé de solution de travail, si quelqu'un a une suggestion sur la façon de résoudre ce problème Je l'apprécierais.
Merci d'avance.
La raison pour laquelle il dit unexpected token m est parce que le chargeur json transforme votre json en un fichier javascript qui commence par module.exports = ...
Bien sûr, ce n'est pas un json valide (json doit toujours commencer par l'accolade ouvrante {), donc il harcèle le "m" de "module".
En d'autres termes, cette erreur indique que webpack essaie d'appliquer json-loader deux fois de suite. En changeant json-loader à raw-loader devrait se débarrasser du wrapper javascript de webpack et passer le json tel quel à tout autre plugin qui pourrait essayer de le charger en json brut.
Voici un problème connexe qui pourrait vous aider à résoudre ce problème: